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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146885 Aug 23,2019 01:39 PM UTC Oct 4,2019 12:58 PM UTC Angular - EJ 2 5
loading
Tags: Grid
Marko Bezjak
Asked On August 23, 2019 01:39 PM UTC

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 [Syncfusion]
Replied On 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 


Marko Bezjak
Replied On 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

Dhivya Rajendran [Syncfusion]
Replied On 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  


Marko Bezjak
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


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