Formatting Gantt elements in Angular
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" }); }
A simple sample to highlight a row, cell and taskbar in Gantt is available here