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. Image for the cookie policy date

Reload Gantt Data source after AutoComplete.

Hi,

My implimentation of Gantt chart visualize many levels of tasks and sub tasks.
Task add/update functionality based on our business logic and the order/level and task information might change while storing. 
After Insert/update/delete a Task, DB updated according to business logic and the gantt data model has changed significantly.
So I want to update the gantt without reloading the page. 

I tried with "Action Complete", but it was called many times to complete the Add/Update task.
So I didn't find any event to reload data source to gantt.



I found a way like:
 var ganttObject = $("#gantt").data("ejGantt");
                if (ganttObject) {
                   ganttObject.setModel({ dataSource: result });
                }

But I am not sure in which event I can update Gantt data source.


Regards,
Renu

4 Replies

JS Jonesherine Stephen Syncfusion Team December 5, 2016 02:41 PM UTC

Hi Renu, 
We can perform CRUD operations in Gantt by using actionComplete and rowDragStop client side events. 
In actionComplete and rowDragStop events we can get the updated data on add/edit/delete/drag&drop actions. 
And we have updated the database with updated data by using ajax post. 
Please find the code example below: 
    @(Html.EJ().Gantt("Gantt"). 
       ClientSideEvents(eve => 
       { 
           eve.ActionComplete("actionComplete"); 
           eve.RowDragStop("rowDragStop"); 
       }). 
       Datasource(ViewBag.dataSource) 
    ) 
    @(Html.EJ().ScriptManager()) 
 
    <script type="text/javascript"> 
        function rowDragStop(args) {    
           //To update on drag&drop action        
            var cloneData = $.extend({}, args.draggedRow.item); 
            if (args.requestType == "insertAsChild") { 
                cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.taskIdMapping]; 
            } 
            if (args.requestType == "insertAbove" || args.requestType == "insertBelow")    { 
                cloneData[args.model.parentTaskIdMapping] = args.targetRow.item[args.model.parentTaskIdMapping]; 
            } 
            var data = cloneData; 
            $.ajax({ 
                type: "POST", 
                url: '/Gantt/Update', 
                data: data, 
                dataType: "json", 
            }); 
        };        function actionComplete(args) { 
            //To update on indent,outdent and taskbar editing action 
            if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate") { 
                var data = args.data.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Update', 
                    data: data, 
                    dataType: "json", 
                }) 
            } 
            //To update the database while adding new record 
            if (args.requestType == "save" && args.addedRecord) { 
                var data = args.addedRecord.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Add', 
                    data: data, 
                    dataType: "json", 
                    error: function () { 
                        alert("error") 
                    } 
                }); 
            } 
            //To update the database on delete action 
            if (args.requestType == "delete") { 
                var data = args.data.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Delete', 
                    data: data, 
                    dataType: "json", 
                }); 
                if (args.data.hasChildRecords) { 
                    deleteChildRecords(args.data); 
                } 
            } 
        } 
 
        //Delete inner level child records 
        function deleteChildRecords(record) { 
            var childRecords = record.childRecords, 
                length = childRecords.length, 
                count, currentRecord; 
            for (count = 0; count < length; count++) { 
                currentRecord = childRecords[count]; 
                var data = currentRecord.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Delete', 
                    data: data, 
                    dataType: "json", 
                }); 
                if (currentRecord.hasChildRecords) { 
                    deleteChildRecords(currentRecord); 
                } 
            } 
        } 
    </script> 
We have prepared the sample based on this. Please find the sample from below location 
 
Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ, Syncfusion.EJ.MVC dlls to render the Gantt control which is available in Essential Studio installed location.   
Please let us know if you require further assistance on this.
Regards, 
Jone sherine P S
  



RE Renu December 5, 2016 02:49 PM UTC

Hi Jone sherine,

I am not looking for CRUD operations.
I am looking for an event, after updating db with CRUD operation, where I can update gantt data source without reloading the page.


Regards,
Renu


RE Renu December 5, 2016 02:53 PM UTC

Hi Jone sherine,

My requirement is after I add/update/delete a task.
I get new data with changes and I want inject it into gantt as a data source.

simply, I want to update gantt data source dynamically.


Regards,
Renu


JS Jonesherine Stephen Syncfusion Team December 6, 2016 03:19 PM UTC

Hi Renu, 
Sorry for the inconvenience caused. 
Please find the response below: 
Client side event 
action 
Description 
actionComplete 
Add/Edit/Delete 
By using the actionComplete “requestType” argument we can peform any actions after add/edit/delete operations  
rowDragStop 
Drag/drop 
In rowDragStop event we can update the database on after drag and drop action 
We have prepared the work around and updated the Gantt on add/edit/delete actions by using ajax. In success action again we have used the ajax post to call the separate server side method to retrieve the updated datasource. In setModel we have refreshed the gantt data source with this updated data. 
Please find the code example below for add action: 
function actionComplete(args) {             
            //To update the database while adding new record 
            if (args.requestType == "save" && args.addedRecord) { 
                var data = args.addedRecord.item; 
                $.ajax({ 
                    type: "POST", 
                    url: '/Gantt/Add', 
                    data: data, 
                    dataType: "json", 
                    success: function (result) { 
                        ganttRefresh() 
                    } 
                }); 
            }            
 
        } 
function ganttRefresh() 
        { 
            $.ajax({ 
                type: "POST", 
                url: '/Gantt/GetUpdatedGanttdata', 
                contentType: 'application/json; charset=utf-8', 
                success: function (result) {                                
                    var updatedData = result, 
                    ganttObj = $("#Gantt").data("ejGantt"); 
                    ganttObj.setModel({ "dataSource": updatedData }); 
                } 
            });       
         
        } 
Please find the code example for add action on serverside 
public ActionResult Add(GanttData Task) 
        { 
     con.Open();            
            using (SqlCommand sqlCommand = new SqlCommand(cmdString, con)) 
            {                
   sqlCommand.Parameters.AddWithValue("@TaskName", "Name Modified" + Task.TaskId); 
            } 
            con.Close(); 
            return Json(Task, JsonRequestBehavior.AllowGet); 
        } 
We have also prepared the sample based on this, 
Please find the sample from below location 
 
Regards, 
Jone sherine P S 


Loader.
Up arrow icon