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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





142741 Feb 18,2019 03:25 AM UTC Jun 10,2019 01:34 PM UTC Vue 3
Tags: Data Grid
Stefan Tmusic
Asked On February 18, 2019 03:25 AM UTC

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.

    <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-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>
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';

let elem;

export default {
  data() {
    return {
      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;
    dataBound: function() {
        this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true;
    getCellEdit: function () {
      // getSelectedRecords
    //  columnMenuClick: function(args) {
    //     if(args.item.id === 'gridclearsorting'){
    //         this.$refs.grid.clearSorting();
    //     }
    // }


<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";

Attachment: edit_error_92e385b6.rar

Thavasianand Sankaranarayanan [Syncfusion]
Replied On February 18, 2019 11:01 AM UTC

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. 
Thavasianand S. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 2, 2019 12:30 PM UTC

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.  
Thavasianand S. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 10, 2019 01:34 PM UTC

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.  
Thavasianand S.  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon