Formatting Gantt elements in Angular

1 min read

In Gantt, it is possible to format the user interfaces such as taskbar background, cell background and format the cell values for specific rows/cells using queryCellInfo and queryTaskbarInfo client side events. The queryCellInfo event will be triggered while rendering each cell in TreeGrid and the queryTaskbarInfo event will be triggered while rendering each taskbar in Gantt.

We can get the style attributes of the elements from the event arguments, we can either change the property value or directly apply CSS styles to the element.

//app.component.html
<ej-gantt id="GanttControl" [datasource]="ganttData" taskidmapping="taskID" tasknamemapping="TaskName" startdatemapping="startDate" enddatemapping="endDate" progressmapping="progress" durationmapping="duration"              [childmapping]="childMapping" [treecolumnindex]="treeColumnIndex" [editsettings]="editSettings" [toolbarsettings]="toolbarSettings" (load)="load($event)" (querycellinfo)="queryCellEvent($event)" (querytaskbarinfo)="queryTaskbar($event)"
              sizesettings.height="450px" sizesettings.width="100%">
</ej-gantt>

//app.component.ts
queryTaskbar(args) {
            var data = args.data.item;
            if (data.progress > 80) {
                args.progressbarBorder = args.progressbarBackground = "#6C3483";
                args.taskbarBorder = args.taskbarBackground = "#A569BD";
                $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none");
            }
            else if (data.progress < 20) {
                args.progressbarBorder = args.progressbarBackground = "#CD5C5C";
                args.taskbarBorder = args.taskbarBackground = "#F08080";
                $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none");
            }
            if (args.data.index == 6) {
                $(args.taskbar).css({ "backgroundColor": "#FFB2B2" });
            }
        }
 
        queryCellEvent(args) {
            var data = args.data.item,
                model = args.model;
            if (args.column.mappingName == model.progressMapping) {
                if (data.progress > 80) {
                    $(args.cellElement).css("background-color", "#A569BD");
                }
                else if (data.progress < 20) {
                    $(args.cellElement).css("background-color", "#F08080");
                }
            }
 
            if (args.data.index == 6)
                $(args.cellElement).css({ "backgroundColor": "#FFB2B2" });
        }

Format the taskbar background, cell background and format cell values for specific rows/cells.