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: November 16, 2018).
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:

142824 Feb 21,2019 03:59 AM UTC Feb 22,2019 10:13 AM UTC Vue 3
loading
Tags: Data Grid
Stefan Tmusic
Asked On February 21, 2019 03:59 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..

Pavithra Subramaniyam [Syncfusion]
Replied On February 21, 2019 12:27 PM 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 12:34 PM UTC

Thanks.

But it doesn't work within the same group.


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

Hi Michal, 
 
Greetings from the Syncfusion, 
 
As per your query, we have modified the sample to row drag and drop within the same group also. In below sample, you can achieve the drag and drop in the same group in the Essential JavaScript 2 Grid UI end otherwise the EJ2 Grid data source as update based on row drag and drop on the grouped rows. 
 
  let grid: Grid = new Grid( 
        { 
            .   .    .    . 
            allowGrouping:true, 
            rowDrop:rowDrop, 
            allowPaging:true,             
            .   .   .   .  
    grid.appendTo('#Grid'); 
 
function rowDrop(arg) {   
  let gObj: any = (<any>document.getElementById('Grid')).ej2_instances[0]; 
  if ((gObj as any).groupSettings.columns.length > 0) { 
    .   .   .   . 
    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]]; 
      let dragStartColData: any = this.currentViewData["records"][startRowIndex][groupedCol[i]]; 
      if (dragStartColData === value) {         
        let dragRow: any = [].slice.call(this.getContentTable().querySelectorAll('tbody .e-row')).filter(item => item.getAttribute("data-uid") == startedRow.getAttribute("data-uid")); 
        let cloneRow: any = dragRow[0].cloneNode(true); 
        dragRow[0].remove(); 
        gObj.getContentTable().querySelector('tbody').insertBefore(cloneRow, targetRow); 
        this.clearSelection(); 
        let dragborderEle:any = cloneRow.querySelector('.e-dragborder'); 
        if (dragborderEle) { 
          dragborderEle.classList.remove("e-dragborder"); 
        } 
 
 
 
Please get back to us, you need further assistance. 
 
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

;