When adding a task using DataManager, it shows up at the top of root task above

[Jaya Simha]

I've implemented React Gantt with Data Manager using self-referential data. However, whenever a new task is added, it appears at the top of the order. Even though I'm providing the correct ParentId, the task initially shows as a top-level task. After refreshing the Gantt chart, it correctly appears as a child under its parent

Attachment: Task_Adding__91d70b1f.png

[Ajithkumar Gopalakrishnan]

Hi Jaya,

Greetings from Syncfusion Support,

We have reviewed the shared details and verified the behavior on our end. When a new record is added, the backend updates the parentId, but the newly added record appears at the top of the UI due to the default newRowPosition being set to 'Top'. As a result, the Gantt chart initially renders the new record at the top, even though the parentId is correctly updated in the backend. Only after a page refresh does the UI reflect the correct hierarchy, rendering the child record under its corresponding parent.

To achieve your requirement without needing a refresh, we suggest by setting newRowPosition as Child directly in Gantt editSettings  or else set dynamically through contextMenu features in the Gantt chart. Use anyone of the below suggestions to meet your requirement.

• Set newRowPosition to 'Child' so that when a record is selected and a new task is added, it is inserted as a child of the selected task.
• Alternatively, enable the context menu (enableContextMenu: true) to allow users to right-click a row and use the “Add Child” option to insert a child task directly.

We have attached a code snippet and sample for your reference.

<GanttComponent id='RemoteData' ref={gantt => ganttInstance = gantt}  enableContextMenu={true}  editSettings={editSettings} >

          ...

          <Inject services={[Selection, Edit,Toolbar,ContextMenu,RowDD]}/>

</GanttComponent>

const editSettings = {

  ...

  newRowPosition: 'Child'

};

Client sample link: https://stackblitz.com/edit/react-r7t123-bu4cuign?file=index.js,index.html

Backend sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebAPIAdaptor

Step’s To Connect Backend and Stack blitz sample

• Download both the sample and extract it
• Open back end server in visual studio and run it using ISS Express
• Open the sample link in web security disabled chrome (chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security) in run command
• Now you can able to load the data from the server.

For more information, you may refer to the following link:

https://ej2.syncfusion.com/react/documentation/gantt/managing-tasks/adding-new-tasks#context-menu
https://ej2.syncfusion.com/react/documentation/api/gantt/editsettingsmodel/#newrowposition

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G