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

Drag And Drop with more then 2 grids. Drag And Drop between column groups.

Hello.

Query 1: Is it possible to drag and drop items between more then two grids?

Query 2: Is it possible to drag and drop items when I group data by column? So that if I move an item in another group the item would get updated to the value of that group.

Best regards.  Marko.

7 Replies

DR Dhivya Rajendran Syncfusion Team August 26, 2019 01:46 PM UTC

Hi Marko, 

Thanks for contacting Syncfusion support. 

Query:  Is it possible to drag and drop items between more then two grids? 
 
By default, we have provided drag and drop support for the two grids(source and destination) only. However, we have achieved your requirement by using the below way. In the below sample, we have override the default functionality.  

Please refer the below code example and sample for more information. 

rowDragStart(args){ 
  this.flag_fg=true; 
} 
rowDrop(args){ 
 
   if(this.flag_fg){ 
    this.IterateGridRDD(args,"Grid",this.grid); 
    this.flag_fg = !this.flag_fg; 
   } 
} 
. . . . . 
IterateGridRDD(args,targetGrid,gridObj){ 
  let targetId = "";       
  if(!args.target.closest(".e-grid")){ 
    return 
  } 
  targetGrid = args.target.closest(".e-grid").id; 
  let gridSearch = parentsUntil(args.target, targetGrid, true);   
  let gridInstances:Object ={Grid:this.grid,DestGrid: this.DestGrid,DestGrid2:this.DestGrid2}; 
  let destGrid = gridInstances[targetGrid]; 
  targetId = targetGrid; 
  if( gridObj.element.id === targetGrid){return;} 
  if (destGrid) {                   
      const origGrid = gridObj; 
      origGrid.rowDropSettings.targetID = targetId; 
      origGrid.notify('rows-removed', { records: args.data }); // remove from source grid  
      origGrid.notify('model-changed', { 
          type: 'actionComplete', requestType: 'rowdraganddrop', 
      });            
      destGrid.trigger('rowDrop', args); 
      destGrid.notify('rows-added', { records: args.data }); 
      destGrid.notify('model-changed', { 
          type: 'actionBegin', requestType: 'rowdraganddrop', // added to destination grid 
      }); 
  } 
  args["cancel"]=true; 
} 
} 



Query: Is it possible to drag and drop items when I group data by column? So that if I move an item in another group the item would get updated to the value of that group 

Yes, you can perform row drag and drop(outside grid) after perform grouping in Grid. Please get back to us if you need further assistance on this. 

Regards, 
R.Dhivya 



MB Marko Bezjak August 27, 2019 07:41 AM UTC

Hello.

Thank you very much for the example for 1. question. It works nice! However we didn't understand each other at the 2. question. I was asking for the single grid. So if i have one grid where I have items grouped lets say by column "color" and then i want to drag-drop items between groups.

Example: 

Group "green"
- item 1
- item 2
Group "blue"
- item 3

Now i want to drag an item from group "green" to "blue". and grid would change the value  (lets say we drag item 2) from green to blue for this items attr.

Thank you again. And I am looking forward to hear from you.
Br. Marko


DR Dhivya Rajendran Syncfusion Team August 28, 2019 12:09 PM UTC

Hi Marko, 

Thanks for sharing the details. 

Query: Now i want to drag an item from group "green" to "blue". and grid would change the value  (lets say we drag item 2) from green to blue for this items attr. 
 
By default, Row drag and drop(within grid) is not having the built in support for grouping. Please refer the below documentation for more information. 


However, you can achieve your requirement by using the below way. In the below sample, we have bind the rowDrop event for Grid and update the value using updateRow method.  

Please refer the below code example and sample for more information. 

rowDrop(args) { 
  var rowElement = parentsUntil(args.target, 'e-row') // get corresponding drop row element 
  args.data['ShipCountry'] = this.grid.getCurrentViewRecords()[parseInt(rowElement.getAttribute('aria-rowindex'))]['ShipCountry'] // change the row drag data value based on the drop value 
  this.grid.editModule.updateRow(args.fromIndex, args.data); // and then update the data 
} 



Regards, 
R.Dhivya  



MB Marko Bezjak October 3, 2019 08:15 AM UTC

Hello.

drag and drop between 2+ grids works fine now. But is it possible to trigger the same DnD animation in target grid? when you DnD in one grid there is this nice animation where the row will get positioned (red border appears) but when I drag row into another grid this animation doesn't appear... Please provide me with an example how to achieve this.

Regards,

Marko


TS Thavasianand Sankaranarayanan Syncfusion Team October 4, 2019 12:58 PM UTC

Hi Marko, 

Thanks for your update. 

We have validated the reported query and achieved using  mouseover events.  Please refer the below code example and sample for more information. 

 
[app.component.ts] 
 
mouseover(args) { 
        if (this.flag && this.destGrid.currentViewData.length > 0) { 
            let row = this.destGrid.element.querySelectorAll('.e-dragborder'); 
            for (let i = 0; i < row.length; i++) { 
                row[i].classList.remove('e-dragborder'); 
            } 
            var elem = args.target.classList.contains('e-rowcell') ? args.target.parentElement : parentsUntil(args.target as any, 'e-row'); 
            if (elem && parseInt(elem.getAttribute('aria-rowindex')) >= 0) { 
                for (let i = 0; i < elem.childNodes.length; i++) { 
                    elem.childNodes[i].classList.add('e-dragborder'); 
                } 
            } 
        } 
    } 



Please get back to us, if u need any further assistances. 
 
Regards, 
Thavasianand S. 



AD Adriano Dezulian March 14, 2023 02:17 PM UTC

Wonderful to have the chance to drag and drop with multiple grids.

It's possible to have also a version of the code in React?



JC Joseph Christ Nithin Issack Syncfusion Team March 15, 2023 05:29 PM UTC

Hi Adriano,


  Greetings from Syncfusion support.


  We have discussed row drag and drop within the grid and inbetween grids in the below documentation and sample in detail. Please refer the below documentation for more details.


  Documentation: https://ej2.syncfusion.com/react/documentation/grid/row/row-drag-and-drop


  Sample: https://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/row-drag-drop


Regards,

Joseph I.


Loader.
Live Chat Icon For mobile
Up arrow icon