Articles in this section
Category / Section

How to format rows and cells in TreeGrid

1 min read

In TreeGrid it is possible to format a specific row or a cell using the queryCellInfo client side event. This event will be triggered while rendering each cell in TreeGrid.


The below code example explains how to highlight a specific row and cell in TreeGrid:

<div id="TreeGridContainer" style="height:400px;width:100%"></div>    
<script type="text/javascript">
$(function () {
                dataSource: projectData,
                queryCellInfo: function (args) {
                    //To Highlight a row
                    if ( == 4)
                        $(args.cellElement).css({ "backgroundColor": "yellow" });
                    //To Highlight a cell
                    if (( == 7 && args.column.field == "taskName") || ( == 2 && args.column.field == "startDate"))
                        $(args.cellElement).css({ "backgroundColor": "Green" });


Highlight the row and cell for specific task.

A simple sample to highlight a row and cell, is available in the following link,


Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied