Category / Section
How to perform conditional formatting on JavaScript tree grid cells?
1 min read
In JavaScript tree grid, using the queryCellInfo client-side event, the cells can be customized at the initial load. This event contains cell value, HTML cell element, column value and row data as event arguments. Using these information, the cell can be customized. The below code snippet explains how to highlight the cell of duration field with a specific value.
$(function () {
$("#TreeGridContainer").ejTreeGrid({
dataSource: data,
//. . .
//. . .
queryCellInfo: "queryCellInfo",
});
});
function queryCellInfo(args) {
if (args.column.field == "duration") {
var cellValue = args.data.item.duration;
if (cellValue == 5)
args.cellElement.bgColor = "#FA7F7F";
}
}
The below screenshot depicts the above code example for highlighting cells based on a condition.
A sample with customized tree grid cell is available here
