We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team February 18, 2019 06:01 AM

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 13th, 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. 
 
Regards, 
Thavasianand S. 



TS Thavasianand Sankaranarayanan Syncfusion Team April 2, 2019 08:30 AM

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. 



TS Thavasianand Sankaranarayanan Syncfusion Team June 10, 2019 09:34 AM

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.  


Loader.
Live Chat Icon For mobile
Up arrow icon