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 sign in to leave a comment