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

refreshRow problem


I have the following function in my Angular2 code:

let ganttObj = $("#gantt").ejGantt("instance");
let item = ganttObj.model.updatedRecords[1];
item.taskName = "New text";
console.log("Refresh row " + item.index);

This function is called on click event. After click I get gantt instance data and "Refresh row 1" in console but text in gantt stay same as before and it is not changed to "New text". After any other change e.q. inline edit at any line, it also change shown task name to "New text" on task with index 1.
So I wonder what is the proper way to update values in a gantt without having to reload the whole gantt?

In advence thank you for your answer,

9 Replies

JD Jayakumar Duraisamy Syncfusion Team July 10, 2017 12:59 PM UTC

Hi Marko, 
We have analyzed your code snippet and found that refreshRow method is used to refresh an updated record, it is not a valid method to update an existing Gantt record. Hence, we would like to suggest you that use a public method called “updateRecordByTaskId” with an argument of existing record.item.  
Please refer following code snippet, 
click = function(){ 
        let ganttObj = $("#GanttControl").ejGantt("instance");             
        let record = ganttObj.model.updatedRecords[1]; 
        record.item.taskName = "New text";        // item of taskName mapping 
This method will be properly update the existing record. But, this pubic method has been introduced in the release version Hence, please use or any of later version. 
Note: Record of index is not always same as updatedRecord/currentViewData collection index. Hence, use updatedRecord collection index value and it is advisable to get the proper Gantt record. 
We have also prepared a sample for your reference. Please find the sample location as below, 
Please let us know, if you require any other assistance. 
Jayakumar D 

MA Marko July 11, 2017 07:58 PM UTC


thank you for your answer. Given example works grate on changing text, but it dosen't work on changing parent. I have Self Reference Gantt with [parentTaskIdMapping] ="parent" and when I change record.item.parent and then calling ganttObj.updateRecordByTaskId(record.item); it dosen't indent/outdent to right level.

Does exist any solution for that?


JS Jonesherine Stephen Syncfusion Team July 12, 2017 06:03 PM UTC

Hi Marko, 
As many of the Gantt actions and validations are based on task id and parent id value. And currently we can’t modify the task id and parent id value using “updateRecordByTaskId”. 
But we can modify the parent child relationship by using drag and drop and indent/outdent action. 
Please find the code example below: 
<ej-gantt id="GanttControl 
export class GanttComponent {     
    public childMapping: any;        
    public editsettings: any; 
    public toolbar: any; 
    constructor() {    
        this.editsettings = { 
            allowAdding: true, 
            allowEditing: true, 
            allowDeleting: true, 
            editMode: 'cellEditing' 
        this.toolbar = { 
            showToolbar: true, 
            toolbarItems: ['add', 'edit', 'delete', 'update', 'cancel','indent','outdent', 'expandAll', 'collapseAll'] 
We have also prepared the sample based on this, please find the sample from below location 
And also we can perform indent/outdent action by using public methods, please refer the following links. 
Jone sherine P S 

MA Marko July 14, 2017 02:02 PM UTC


if I can not change task id with updateRecordByTaskId, is there any other way to change it?

I have to change it when I first time creating task in my DB. Curently is this on event actionComplete with requestType = save and it has any addedRecord and in my database is created new item with different id that gantt has genereted. So when I get response I would need to change this task id.
Or is there any better way to do all this?

In advence thank you for your answer,

JD Jayakumar Duraisamy Syncfusion Team July 17, 2017 04:30 PM UTC

Hi Marko, 
We have understood that you have auto_increament column in your table and want to change taskId once a new record inserted into table with generated ID. At present, we can’t change the taskIdMapping value once the record has been created but we can achieve requirement with Gantt client side events. 
At the load time, we will get the value of last generated auto_increment value of table with SQL query by using async ajax post request and assign to the global variable for the further operations.  
public ActionResult Index()        {  
            var data = GetGanttdata();  
public int GetCurrentIncValue()  
            int Id;  
            SqlConnection con = newSqlConnection(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);//connectionString  
            SqlCommand comm = new SqlCommand("SELECT IDENT_CURRENT ('GanttData1')", con);  
            Id = Convert.ToInt32(comm.ExecuteScalar());  
            return Id;  
In Gantt “actionBegin” event will be triggered with request type as “beforeOpenAddDialog” and argument of selected data. It will be triggered before opening of add dialog. In this event we can replace the TaskId value with global Id value with increment one. While inserting new record auto_increment value in table is always same as TaskId value. 
Please refer following code snippet, 
function actionBegin(args) {              
            if (args.requestType == "beforeOpenAddDialog") {  
                var data = args.data, model = args.model,  
                    ids = model.ids, taskName = "New Task";                  
                var maxId = Id + 1;  
                data.TaskId = maxId;  
                data.TaskName = taskName + " " + maxId;  
function actionComplete(args) {    
if (args.requestType == "save" && args.addedRecord) {  
                var data = args.addedRecord.item;  
                    type: "POST",  
                    url: '/Gantt/Add',  
                    contentType: "application/json; charset=utf-8",  
                    data: JSON.stringify(data),  
                    dataType: "json",  
                    success: function(data){  
                        data.Id = ++Id;                          
Please let us know, if the given solution doesn’t meet your exact requirement. 
Jayakumar D 

MA Marko July 18, 2017 09:26 PM UTC


If I get  auto_increment value at the load time, this would not work when two or more users are adding tasks in Gantt, beacuse they would owerwrite each other tasks. I also can not async get AI number at actionBegin event beacuse in there I can not wait Obsorvable to complete. Also actionBegin is not called when in context menu is selected add new task > above / below
In my case I have one table in my DB for more Gantts, so even therefore this example would not work on multiple users and different Gantts at the same time.

Currently I create tasks with negative task Id, so first new get -1 then -2 etc. and on actionComplete request type=save I call my service to save task. Because ID is below zero service know that this is new task, therefore service save it to db and returns new task ID. At Angular side I subscribe to service and when I get response I set args.addedRecord.taskId and args.addedRecord.item.id to new ID. If i then call updateRecordByTaskId(args.addedRecord.item) it does not have effect on shown ID.

In Gantt then all works well, just negative task ID is shown (even after addedRecord.taskId and addedRecord.item.id is changed). But if I change some thing on new created task (for example some inline edit), then even shown ID is changed to corect value.

So is there any better way to do handel ID and suport multiple users? Is there any commodity condition where my solution would not work? (I know it would not work properly for predecessors if ID is chaning, but I think that betwen task created, task saved and task new task id setted is maximal 5 seconds and in this time no one can not create new connection)

I look forward to hearing from you,


JD Jayakumar Duraisamy Syncfusion Team July 19, 2017 12:30 PM UTC

Hi Marko, 
At present, we don’t have support to update taskId value once after the record has been created. Hence, we have logged feature report as “Implement public method to change taskId value in Gantt”. By using this method, you can change the taskId value with new generated Id. 
This public method support will be included in our upcoming volume 3 SP1 release,  which will be expected to out at the end of August 2017. 
Jayakumar D 

MA Marko August 9, 2017 12:24 AM UTC


I have one more question about refreshing data in gantt.

ganttObj.updateRecordByTaskId(record.item); works well in most cases, but if I wantt with one click update more than 10 datas, this become slow.

So I wonder if there is also a way to update one column or if this is not possible, how to update whole shown gantt data without consequences on expand and collpse?



JD Jayakumar Duraisamy Syncfusion Team August 9, 2017 01:12 PM UTC

Hi Marko, 
In Gantt, “updateRecordByTaskId” method is used to dynamically update the record value and update the values of its dependent columns and parent records.  
Query 1:  if there is also a way to update one column or if this is not possible 
Answer: We have a public method called “refershGanttRecord” to refresh Gantt record without update other dependent values. By using this method, we can update specific column value without much delay. 
Query 2: how to update whole shown gantt data without consequences on expand and collpse? 
Answer:  To update bulk Gantt data, we would like to suggest you that modify the existing data source and dynamically update the modified data source by using “setModel“ method. In this method, dependent values also updated properly. 
Please refer following code snippet, 
<button id="columnUpdate" (click)="clickme($event)">Column Update</button> 
<button id="updateData" (click)="clickme($event)">Update New Data</button> 
clickme(e) {     
            var ganttObj = $("#GanttControl").ejGantt("instance"), 
                ganttModel = ganttObj.model; 
            var action = e.currentTarget.id; 
            switch (action) { 
                case "columnUpdate": 
                    var ids = ganttModel.ids, 
                        updatedRecords = ganttModel.updatedRecords; 
                    for (var i = 0; i < this.columnData.length; i++) { 
                        var index = -1, 
                            newData = this.columnData[i]; 
                        index = ids.indexOf(newData[ganttModel.taskIdMapping].toString()); 
                        var temp = updatedRecords[index]; 
                        temp["taskName"] = temp.item[ganttModel.taskNameMapping] = newData[ganttModel.taskNameMapping]; 
                case "updateData":                     
                    ganttObj.setModel({ "dataSource": this.newGanttData }); 
We have also prepared an angular 2 sample for your reference, please find the sample location as below, 
Please let us know, if you required any other assistance. 
Jayakumar D 

Live Chat Icon For mobile
Up arrow icon