Category / Section
Render and update remote data using ODataV4Adaptor in Gantt
2 mins read
In Gantt, using the ODataV4Adaptor, it is possible to fetch the remote data from the Odata (V4) data source. Also, it is possible to perform CRUD actions and update the remote data from the Gantt chart by using the actionComplete client-side event.
Using the AJAX method, you can update the remote data from client side.
function ActionComplete(args) { //To update on indent,outdent,taskbar editing and predecessor drawn action if (args.requestType == "indent" || args.requestType == "outdent" || args.requestType == "recordUpdate" || (args.requestType === 'save' && args.modifiedRecord)) { //... updateModifiedGanttRecords(ganttRec); } //Newly Added Record is obtained here, which can be updated to database else if (args.requestType == "save" && args.addedRecord) { //... $.ajax({ type: "Post", url: '/odata/Orders', data: data, dataType: 'json' }); } else if (args.requestType == "dragAndDrop") { //... updateModifiedGanttRecords(ganttRec); } //To update the database on delete action else if (args.requestType == "delete") { var data = args.data.item; $.ajax({ url: '/odata/Orders(' + data.Id + ')', type: "Delete", data: data }); } } // To update the multiple modified Gantt records in single request. function updateModifiedGanttRecords(records) { var modifiedRecord = {}; if (records && records.length) { var length = records.length; for (var i = 0; i < length; i++) { //... $.ajax({ url: '/odata/Orders(' + modifiedRecord.Id + ')', type: "PUT", data: modifiedRecord }); } } }
Refer here to find the sample for CRUD actions using the OData adaptor in Gantt.