Summary columns in gantt chart

[Ernst Thomas Kvadsheim SemJacobsen]

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]

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. 

 

  <script> 

        var totRecords = []; 

 

        $(function () { 

            $("#GanttContainer").ejGantt({ 

                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; 

                        $(args.cellElement).text(updated_value); 

                        totRecords = []; 

                    } 

                }, 

                actionComplete: function (args) { 

                    if (args.requestType == "recordUpdate") { 

                        update(args.data.parentItem); 

                    } 

                    if (args.requestType == "save" && args.addedRecord) { 

                        update(args.addedRecord.parentItem); 

                    } 

                    if (args.requestType == "delete") { 

                        update(args.data.parentItem); 

                    } 

                } 

            }); 

 

        }); 

        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); 

                    else 

                        totRecords.push(record); 

                } 

            } 

            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"); 

                treeGridObj.refreshRow(treeGridObj.model.updatedRecords.indexOf(parentItem)); 

                return update(parentItem.parentItem); 

            } 

        } 

    </script> 

 

Please find the below sample link. 

https://jsplayground.syncfusion.com/cxuzih1y 

 

Regards, 

Pooja Priya K 

[Ernst Thomas Kvadsheim SemJacobsen]

Awesome thanks, that's exactly what I needed

[Jesus Arockia Sankaran S]

Hi Ernst,  

 

Thanks for your update. 

 

Regards, 

Jesus Arockia Sankaran S