Changing order datasource items in grid via drag and drop feature

Question

Hello.I have a question about RowDD feature in grid.Here is my sample code (link).I intend to update 'order' propertyin datasourcefrom row index after [drag and drop] in grid.But [drag and drop] doesn't triggers actionBegin or actionComplete, neither datasource changes.I've thought about implementation in many ways as you can see, but nothing worked out properly.So I need help, and I want to implement1. Some fields in datasource need to updated, for instance, 'orders' property from each row index.2. Need to activated 'Update' toolbar button After (1) for sending changes to my API server.Regards.

Balaji Sekar · Accepted Answer

Hi Minkyu, 
 
Greetings from the Syncfusion support. 
 
Based on your query with provided the information and we understand that you want update  index of a row in the “order” column while drag and drop action. We have stored the from and drop index in global variable(dropObj) and once dropped the dragging row it will triggering on actionComplete event. In this event we have update the order column cell using updateCell method and enabled the batch editing. 
 
Please refer the below code example and sample for more information. 
 




[App.Vue] 
rowDrop(args) { 
      this.isDragged = true; 
      this.dropObj = Object.assign(args, {});  // Store drop action arguments 
    } 
actionComplete(args) { 
      console.log("actionComplete"); 
      if (this.isDragged) { 
        this.isDragged = false; 
        this.$refs.grid.ej2Instances.updateCell( 
          this.dropObj.fromIndex, 
          "order", 
          this.dropObj.fromIndex + 1 
        ); 
        this.$refs.grid.ej2Instances.updateCell( 
          this.dropObj.dropIndex, 
          "order", 
          this.dropObj.dropIndex + 1 
        ); 
      } 
} 
 
Sample link: https://codesandbox.io/s/geurideu-nae-deuraegeuaendeurob-sunseobyeongyeong-forked-4yhg5 
 
Help Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#updatecell 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar

Minkyu · Answer

Hi, Balaji Sekar.

Thanks for your answer.

I'm glad that the intention was imparted well.

I tested sample code you gived, it looks good. Thank you.

However, I applied it to in my code, not sample, actionComplete does't triggered.

So I checked via codesandbox, It doesn't triggered in both version 18.3.x and 18.4.x.

I would be grateful if you could check this.

By the way, I just wonder why there's no feature sorting datasource after drop.

Do you have any plans to implement this feature?

It would be much wonderful if this feature provided.

Regards.

Balaji Sekar · Answer

Hi Minkyu, 

In Grid row drag and drop feature, we can drag and drop the Grid’s row position in UI alone it is not update to Grid’s dataSource by default behaviour(if bind remote data) but, In the sort feature we can sort Grid column based on Grid’s dataSource. Since it is not valid feature request. 

In Grid’s latest package, actionComplete event is not trigger after dropped row in the Grid. Since we suggest you to call the refresh method in drop event of Grid it will trigger on actionComplete event and you can achieve your requirement in this event. 





[App.Vue] 
rowDrop(args) { 
      this.isDragged = true; 
      this.dropObj = Object.assign(args, {}); 
      this.$refs.grid.refresh(); 
} 

Sample link: https://codesandbox.io/s/geurideu-nae-deuraegeuaendeurob-sunseobyeongyeong-forked-5rxec 

Regards, 
Balaji Sekar