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

Summary columns in gantt chart

Is there a way to create a summary column in the gantt chart which sums all child values.
If we have a parent row with an "hours" column, is there a way for its value to be the sum of all of its children and grandchildren etc, "hours" values?

3 Replies

PP Pooja Priya Krishna Moorthy Syncfusion Team July 9, 2019 04:43 PM UTC

Hi Ernst, 
Greetings from Syncfusion support. 
We can sum all the child values and display in a custom column of parent row by using queryCellInfo event. We can update the custom column values on CRUD operations by using actionComplete event. 
Please find the code example below. 
        var totRecords = []; 
        $(function () { 
                queryCellInfo: function (args) { 
                    if ((args.column.field == "Totalvalue") && args.data.hasChildRecords == true) { 
                        var records = getChildRecords(args.data, args.model.updatedRecords); 
                        var updated_value = ej.sum(records, "Totalvalue"); 
                        args.cellValue = updated_value; 
                        totRecords = []; 
                actionComplete: function (args) { 
                    if (args.requestType == "recordUpdate") { 
                    if (args.requestType == "save" && args.addedRecord) { 
                    if (args.requestType == "delete") { 
        function getChildRecords(parentRecord, updatedRecords) { 
            var recordLength = updatedRecords.length, record; 
            for (var length = 0; length < recordLength; length++) { 
                record = updatedRecords[length]; 
                if (parentRecord == record.parentItem) { 
                    if (record.hasChildRecords) 
                        getChildRecords(record, updatedRecords); 
            return totRecords; 
        function update(parentItem) { 
            var totValue = 0; 
            if (parentItem != null) { 
                childRecords = parentItem.childRecords, 
                    len = childRecords.length; 
                for (var i = 0; i < len; i++) { 
                    var totalvalue = parentItem.childRecords[i].Totalvalue; 
                    if (totalvalue) 
                        totValue = totValue + totalvalue; 
                    parentItem.Totalvalue = totValue; 
                var ganttObj = $("#GanttContainer").data("ejGantt"); 
                treeGridObj = ganttObj._$treegridHelper.data("ejTreeGrid"); 
                return update(parentItem.parentItem); 
Please find the below sample link. 
Pooja Priya K 

ET Ernst Thomas Kvadsheim SemJacobsen July 10, 2019 11:40 AM UTC

Awesome thanks, that's exactly what I needed

JA Jesus Arockia Sankaran S Syncfusion Team July 10, 2019 12:09 PM UTC

Hi Ernst,  
Thanks for your update. 
Jesus Arockia Sankaran S 

Live Chat Icon For mobile
Up arrow icon