Edit error when I use drag and drop on the Datagrid.

[Stefan Tmusic]

I am developing the project using Datagrid.

As I use drag and drop within the grid, I used to get the following issue.

When I edit the cell I don't change its value, but it is changed as the prev cell value.

<template>

    <div id="app">

        <ejs-grid ref='grid' :load = 'load' :cellEdit="getCellEdit" gridLines='Both' :allowRowDragAndDrop="true" :toolbar='toolbar' :dataSource="data" :allowReordering='true' :dataBound='dataBound' :showColumnMenu='true' :allowResizing= 'true' :selectionSettings="selection" :filterSettings='filterSettings' :allowPaging="true" :allowSorting='true' :allowFiltering='true' :pageSettings='pageSettings' :editSettings='editSettings' >

          <e-columns>

              <e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Center' width=100></e-column>

              <e-column field='CustomerID' headerText='Customer ID' textAlign='Center' width=120></e-column>

              <e-column field='Freight' headerText='Freight' textAlign='Center' editType= 'numericedit' width=120></e-column>

              <e-column field='ShipCountry' headerText='Ship Country' textAlign='Center' editType= 'dropdownedit' width=150></e-column>

              <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" editType= 'datepickeredit'  type="date" textAlign='Center'></e-column>

          </e-columns>

        </ejs-grid>

    </div>

</template>

<script>

import Vue from "vue";

import { GridPlugin,Selection,Toolbar , ColumnMenu, Reorder, Resize, RowDD, Page, Sort, Filter, Group, Aggregate ,Edit } from "@syncfusion/ej2-vue-grids";

import { data } from './datasource.js';

import $ from 'jquery';

Vue.use(GridPlugin);

let elem;

export default {

  data() {

    return {

      data:data,

      selection: { type: 'Multiple' },

      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch'},

      pageSettings: { pageSizes:[5, 10, 20, 50], pageSize: 10 },

      toolbar: ["Search"],

      filterSettings: { type: 'Menu' },

      footerSum: function () {

        return  { template : Vue.component('sumTemplate', {

            template: `<span>Sum: {{data.Sum}}</span>`,

            data () {return { data: {data: {}}};}

            })

          }

      }

    };

  },

  provide: {

    grid: [Page, Selection, ColumnMenu, Toolbar, RowDD,Resize, Sort, Edit ,Filter, Group,Reorder, Aggregate]

  },

  methods: {

     load(args) {

      this.$refs.grid.$el.addEventListener('keydown', this.keyDownHandler);

    },

    keyDownHandler(e) {

      if(e.keyCode) {

        let gridIns = this.$refs.grid.ej2Instances;

        gridIns.addRecord();

      }

    },

    dataBound: function() {

        this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;

    },

    getCellEdit: function () {

      // getSelectedRecords

      console.log(this.$refs.grid.ej2Instances.getSelectedRecords())

    },

    //  columnMenuClick: function(args) {

    //     if(args.item.id === 'gridclearsorting'){

    //         this.$refs.grid.clearSorting();

    //     }

    // }

  }

}

</script>

<style lang="scss">

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

Attachment: edit_error_92e385b6.rar

[Thavasianand Sankaranarayanan]

Hi Michal, 

Greetings from Syncfusion. 

We have validated the provided information and checked with our end. We are able to reproduce the reported problem so we confirmed “Batch edit misbehaves when ‘allowDragAndDrop’ enabled” as a defect and logged a report for the same. We will include the defect fix in our March 13^th, 2019 patch release. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

Feedback link: https://www.syncfusion.com/feedback/4846/batch-edit-misbehaves-when-allowdraganddrop-enabled 

 

Regards, 

Thavasianand S. 

[Thavasianand Sankaranarayanan]

Hi Michal, 

 

Sorry for the inconvenience caused. 

  

When we fixing this we are facing some other functionality issue due to this complexity we are unable to include this in Volume 1 main release. So, we will include this fix for the issue “Batch edit misbehaves when allowDragAndDrop is enabled” in our Volume 1 Service Pack 1 release which is rolled out in the month end of April, 2019. 

  

Until then we appreciate your patience.  

 

Regards, 

Thavasianand S. 

[Thavasianand Sankaranarayanan]

Hi Stefan,  

 

Thanks for your patience.  

  

We are glad to announce that our Essential JavaScript 2 Volume 1 Beta release (17.1.48) has been rolled out successfully and in that release, we have added the fix for the issue “Batch edit misbehaves when allowDragAndDrop is enabled”. Here is the download link.  

  

Regards,  

Thavasianand S.