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

[Marko Bezjak]

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.

[Dhivya Rajendran]

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; 

} 

} 

Sample : https://stackblitz.com/edit/angular-pu18bo-nhlxxf?file=app.component.ts   

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 

[Marko Bezjak]

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

[Dhivya Rajendran]

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. 

https://ej2.syncfusion.com/documentation/grid/row/?no-cache=1#drag-and-drop-within-grid 

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 

} 

Sample : https://stackblitz.com/edit/angular-h5bnog-n7r2s2?file=app.component.html 

Regards, 

R.Dhivya  

[Marko Bezjak]

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

[Thavasianand Sankaranarayanan]

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

                } 

            } 

        } 

    } 

Sample Link : https://stackblitz.com/edit/angular-djawts-rowdrag-ufvklu?file=app.component.ts 

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

 

Regards, 

Thavasianand S. 

[Adriano Dezulian]

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?

[Joseph Christ Nithin Issack]

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.