Refresh Gantt Chart after modifying data in datasource + Store OrderID for each task

Question

I have just started using the Gantt chart but am coming up with a few issues. v22.1.38.01) My dataManager url is called twice when the page loads. e.g. a full list of tasks is requested multiple times. 2) When using the context menu "add >Above or Below" the row is displayed above original task. It appears that the task that was right clicked on has the details copied (TaskName, StartDate, Duration etc). It is then immediately posted to the server, but there is no indication of direction (below or above) so we can't modify the OrderID at the server so save the position of the task.is there a built in OrderID I should be using? If not how do we save the Order of each row?3) When drag/dropping a row the row is visually displayed correctly in the dropped position. The gantt chart fires off a save to the server with one task to be updated. Should multiple tasks be updated when moving a row? I would assume moving a row would cause an update to many tasks row order?is there a built in OrderID I should be using? If not how do we save the Order of each row?4) I would like to create my own edit modal popup. If I modify the datasource via javascript how can I refresh the grid to display the new changes without calling the server for a full refresh?

document.getElementById('Gantt').ej2_instances[0].flatData[48].GanttDuration = 50;calling

Udhayakumar Anand · Answer

Tim,Greetings from SyncfusionYou can find the query response below

Query 1:
  Data manager is calling twice

Due to the uniqueness of this particular query, we have
  separated it into a distinct issue for more effective follow-up. For
  additional details regarding this inquiry, kindly refer to the following
  link.
   
  Ticket Link : https://support.syncfusion.com/support/tickets/487527

Query 2 : 
  When using the context menu "add >Above or
  Below"

We have reviewed your query and you can achieve your
  requirement by using actionBegin
  event inside the actionBegin event you can take the instance of the gantt,
  and pass the required param as a query, you can assess the query in the
  controller file by using batchmodel.ej2Gantt.position

You can find the code snippet
  and sample link below

Code Snippet:
    /*index.cshtml*/
    function ActionBegin() {
            var
    ganttChart = document.getElementsByClassName('e-gantt')[0].ej2_instances[0]
           
    ganttChart.query = new ej.data.Query();
           
    rowPosition.index =
    this.currentViewData.indexOf(this.editModule.newlyAddedRecordBackup);
           
    rowPosition.position = document.activeElement.innerText;
            ganttChart.query
    = new ej.data.Query();
           
    ganttChart.query.addParams('ej2Gantt', rowPosition);
        }
    ….////
    /*HomeController.cs*/
    public class Test : DataManagerRequest
            {
               
    public string position { get; set; }
               
    public int index { get; set; }
            }
    …../////
    public class CRUDModel {
      public Test ej2Gantt { get; set; }
    }
    ….////
    public ActionResult BatchUpdate(CRUDModel batchmodel) {
        var position = 
    batchmodel.ej2Gantt.position;  // you can access the position by using
    this
    }

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/alert_msg_mvc-1700235609-309594731
   
  UG LINK : https://ej2.syncfusion.com/aspnetmvc/documentation/gantt/data-binding#sending-additional-parameters-to-the-server

Query 3:
  When drag/dropping a row the row is visually displayed
  correctly in the dropped position

The Gantt chart can preserve the index position of a
  dropped record by modifying the database table's index position through the
  utilization of the "rowDrop" event. For comprehensive information
  regarding the implementation process, please refer to the User Guide (UG)
  link provided below, which contains detailed instructions and guidelines.
   
  UG LINK: https://ej2.syncfusion.com/aspnetmvc/documentation/gantt/how-to/maintainrecordindex

Query 4: 
  I would like to create my own edit modal popup

We have reviewed your query and you can achieve your
  requirement by using updateRecordByID
  method by using this you can update the particular data without refreshing
  it, you can find the code snippet and sample link below

Code Snippet:
    /*index.cshtml*/
    document.getElementById('primarybtn').onclick = function
    () {
            var
    ganttChart = document.getElementsByClassName('e-gantt')[0].ej2_instances[0]
            var data = {
               
    taskId: 3,
               
    taskName: 'Updated by index value',
               
    startDate: new Date('04/02/2019'),
               
    duration: 4,
               
    progress: 50
            };
            ganttChart.updateRecordByID(data);
        };

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/alert_msg_mvc-1700235609-309594731

Regards,Udhayakumar