Drag and Drop between rows doesn't work with api data

[Francesco Battista]

Hi, I'm facing issues with the Treegrid component.

I've tried a basic implementation of a Treegrid component that uses drag and drop between rows. Using a local JSON everything works fine but, when I switch to backend services, the grid crashes and the movement is uneven.

Is this related to the fact that I'm not using the DataManager component but I'm using anyway data retrieved from an external API instead of a local JSON?

In the docs, you've explained that to use data from an external source users should implement the DataManager to manage the data retrieving part.

The problem with that is that the API returns data related to the rest of the page too. By doing as you say, I'm forced to do at least two calls to the same endpoint to fetch the same data.

Furthermore, I'm managing the state with Redux, so letting the grid fetch data on its own, will bring a huge difference in how I store data in Redux's store.

The data retrieved by the call are the same that you find in the attached datasource.json file. Importing the file straightforward and using instead of the call to the redux's store works seamlessly.

I'm attaching a reproduction of the code and I hope you'll help me figure out what is going on.

Attachment: Components_9124bc08.zip

[Francesco Battista]

Attaching the screen recording to give more accurate info about the bug.

Attachment: screen_recording_bug.mov_b6c1aa8c.zip

[Jagadesh Ram Raajkumar]

Hi Francesco,


Thanks for using Syncfusion Products.  

We have analyzed your code snippets and we are not able to reproduce the issue on our end. We have prepared a sample based on your requirement and the same can be downloadable from the below link.

Sample: https://www.syncfusion.com/downloads/support/forum/167173/ze/React_sample-925093589

Please reproduce the issue in the above-attached sample or share with us the following details so that we could provide you the solution as early as possible from our end. 

1. Data fetching code or values from API itself for treegrid related data.
2. Treegrid package version or package.Json file.

Regards,
Jagadesh Ram 

[Jagadesh Ram Raajkumar]

Hi Francesco, 

Sorry for the inconvenience. 

  

In the previous update we have checked your query by preparing a sample without using redux as mentioned in your requirement. So we are preparing a sample based on your code example using redux concept to analyze the issue with high priority. We will update the further details on 19^th July 2021. 

Also from your code example we found that primaryKeyColumn is not defined in the columns property of TreeGrid. primaryKey column is mandatory when allowRowDragAndDrop is enabled. So could you please confirm us whether the issue is resolved when primaryKey column is defined. 

Refer the below documentation for more details on primarykey column.
https://ej2.syncfusion.com/react/documentation/api/treegrid/columnModel/#isprimarykey 

  

Regards,
Jagadesh Ram 

 

[Jagadesh Ram Raajkumar]

Hi Francesco,

We have prepared a sample based on your code example and the redux concept, but we are unable to reproduce the issue at our end. Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/directtrac/335989/ze/Redux-saga-Treegrid345167694 

 

If you still face this issue, kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  

  

1.       Try to reproduce the reported scenario in the provided sample. 

2.       Share the replication procedure for the reported scenario. 

3.       Share the details of your product version. 

  

The provided information will be helpful to provide you response as early as possible.  

Regards,
Jagadesh Ram