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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Summary columns in gantt chart

Thread ID:





145810 Jul 9,2019 12:25 PM UTC Jul 10,2019 12:09 PM UTC jQuery 3
Tags: ejGantt
Ernst Thomas Kvadsheim SemJacobsen
Asked On July 9, 2019 12:25 PM UTC

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?

Pooja Priya Krishna Moorthy [Syncfusion]
Replied On 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 

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

Awesome thanks, that's exactly what I needed

Jesus Arockia Sankaran S [Syncfusion]
Replied On July 10, 2019 12:09 PM UTC

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon