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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Not working drag and drop by group on the Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

142751 Feb 18,2019 07:50 AM UTC Jun 10,2019 06:26 PM UTC JavaScript - EJ 2 8
loading
Tags: Grid
Stefan Tmusic
Asked On February 18, 2019 07:50 AM UTC

Hi.
Drag and Drop function doesn't work on the DataGrid that made by Group.
It works in a regular Grid well, but if I group the grid, it doesn't work.
Help me..


Attachment: fwatdi.run_ce593109.zip

Pavithra Subramaniyam [Syncfusion]
Replied On February 21, 2019 03:30 AM UTC

Hi Michal, 
 
Greetings from Syncfusion, 
 
We have validated your query and the support for row drag and drop with Grouping is not feasible in the Essential JavaScript 2 Grid. So We have prepared a workaround sample based on the Grouping with Row drag and drop support. you can achieve that requirement by using rowDrop event and you can update the grid data source based on the row dragging to grouped column. Please refer to the below code example, documentation link and sample link for more information. 
 
[index.ts] 
let grid: Grid = new Grid( 
        { 
            dataSource: orderDetails, 
            allowRowDragAndDrop: true, 
            selectionSettings: { type: 'Multiple' }, 
            allowGrouping:true, 
            rowDrop:rowDrop, 
            allowPaging:true,             
            columns: [ 
                . . . . 
            ] 
        }); 
    grid.appendTo('#Grid'); 
 
function rowDrop(arg){   
  let gObj: any = (<any>document.getElementById('Grid')).ej2_instances[0]; 
  let startedRow:any = arg.rows[0]; 
  let targetRow:any = arg.target.closest('tr');   
  if(targetRow.classList.contains('e-row') && targetRow.classList.length ){ 
     targetRow = targetRow; 
  } else{ 
    targetRow = arg.target.closest('tr').nextSibling; 
  } 
  let startRowIndex: number = parseInt(startedRow.getAttribute("aria-rowindex"),10); 
  let targetRowIndex: number = parseInt(targetRow.getAttribute("aria-rowindex"),10); 
  if(startRowIndex === targetRowIndex){ 
    return; 
  } 
  let groupedCol:any = (gObj as any).groupSettings.columns; 
  for(let i:number=0,len:number=groupedCol.length;i< len; i++){ 
  let dataIndex: number = this.dataSource.indexOf(arg.data); 
  let value: any = this.currentViewData["records"][targetRowIndex][groupedCol[i]]; //update the group column value to dragging row data 
  this.currentViewData["records"][startRowIndex][groupedCol[i]] = value;    
} 
  gObj.refreshColumns();  
  arg.cancel =true;  // prevent default action of rowDrop event  
} 
 
 
                                      
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S.  


Stefan Tmusic
Replied On February 21, 2019 03:34 AM UTC

thanks.

Pavithra Subramaniyam [Syncfusion]
Replied On February 21, 2019 03:48 AM UTC

Hi Michal,  

Thanks for your update. 

Please contact us if you need any further assistance on this. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


Stefan Tmusic
Replied On February 21, 2019 03:52 AM UTC

ok..
Could you solve the following issue?

Edit error when I use drag and drop on the 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>


Pavithra Subramaniyam [Syncfusion]
Replied On February 22, 2019 10:36 AM UTC

Hi Michal, 
 
Greetings from the Syncfusion. 
 
We have validated the defect you have initiated with us. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our subsequent Patch release which will be rolled on 1st week of March 2019. If you wish to receive this fix in a specific prior release product version please contact Syncfusion Support (backwards compatibility subject to technological feasibility and our Support SLA) 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 https://www.syncfusion.com/feedback/4846/batch-edit-misbehaves-when-allowdraganddrop-enabled  
 
Regards, 
Pavithra S.  


Stefan Tmusic
Replied On February 22, 2019 10:39 AM UTC

Thanks..
But would you give the answer now?
I need it asap.


Pavithra Subramaniyam [Syncfusion]
Replied On February 27, 2019 12:14 PM UTC

Hi Michal, 
 
Based on your query we have prepared a sample with batch editing and row drag and drop features in the Essential JavaScript 2 Grid component. You can achieve the batch editing with row drag and drop by using cellSave event of Grid. Please refer the below code example for more information. 
 
[index.js] 
var grid = new ej.grids.Grid({ 
        dataSource: window.orderDatas, 
        allowRowDragAndDrop: true, 
        selectionSettings: { type: 'Multiple' }, 
        editSettings: {allowEditing: true, allowDeleting: true, mode: "Batch", allowAdding: true}, 
        toolbar: ["Add", "Edit", "Delete", "Update"], 
        height: 400, 
        cellSave: function (args) { 
var tr = ej.grids.parentsUntil(args.cell, "e-row"); 
var cell = this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells; 
if(this.columns.length < cell.length){ 
this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells = this.getRowObjectFromUID(tr.getAttribute('data-uid')).cells.slice(1); 
} 
}, 
        columns: [ 
        .  .  .   . 
        ] 
    }); 
    grid.appendTo('#Grid'); 
 
 
 
Sample               : https://stackblitz.com/edit/ctqe4v?file=index.js 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Pavithra S. 


Pavithra Subramaniyam [Syncfusion]
Replied On June 10, 2019 06:26 PM UTC

Hi  Michal, 

Thanks for your patience. 

We are glad to announce that  we have included the fix  for the issue “Batch edit misbehaves when "allowDragAndDrop" enabled” in our Volume 1, SP1 2019 release (v17.1.48).  
 
Regards, 
Pavithra S. 


CONFIRMATION

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