How to select or highlight rows based on data?

Solution

You can select or highlight rows based on data using the queryCellInfo event or can also select a row using an external button click event.

The queryCellInfo is triggered every time a request is made to access particular cell information, element and data.

In the argument of the queryCellInfo event, you can obtain the following details.

By comparing the value obtained from the argument of the queryCellInfo event, you can select the corresponding data rows using the selectRows() method of the Grid.

Example:

In the following example, the records based on the field EmployeeID are highlighted/selected.

1. Render the Grid.

JS

MVC

ASP.NET

2. In the queryCellInfo event, custom Css to the rows with EmployeeID greaterThan 3 and lessThan 6 is applied.

JS

3. In order to select the rows based on the value/data in the Grid, you can use the selectRows method and pass the index of the row as argument.

JS

4. In order to select the rows based on a data externally using a button, you can use the selectRows method within the click event of the button.

JS

Figure 1: Select/ highlight rows based on the data on row/grid

Figure 2: Select rows dynamically based on data on row/grid