How to change GridView row color based on a column value using jQuery?

You want to change GridView row color based on column value using jQuery. In the below Gridview, rows whose Reorder Point value(3^rd column) less than 400 are highlighted with lavender color.

SideNote: I have used Production.Product table of AdventureWorks database(which comes with SQL Express 2012) for this example.

Few Facts First:

Before arriving at the logic for highlighting the gridview rows with different color, you need to understand couple of important facts.

Fact 1: jQuery, a javascript library, used for manipulation of web documents –  resides at browser side.

Fact 2: Browsers can understand only HTML, CSS and javascript. Because of this fact, Gridview(ASP.Net server control for displaying the table) would be converted to table(table html element), rows (tr html element) and columns (td html element) while sending it to client (browser).

So, if you want to process the GridView using jQuery, we should process the generated table html element with associated row and column elements. Browser does not what GridView is. It just knows about table (table html element), rows (tr html element), columns (td html element).

Logic:

The logic for changing the gridview row color based on column value is pretty simple and involves the below steps

1. Loop through all the rows on that particular column value. In the above case, we would be looping the 3^rd column (Reorder Point) in all the rows
2. Get the value of 3rd column(ReOrder Point) in that row and compare it with required value
3. If it’s less than the required value, change the background color to lavender

Let us discuss on how to achieve each of the above mentioned step in detail

1. Loop through all the rows on that particular column value:

We need couple of pieces of information for this.

There might be many GridView controls used in a Web Form. We need to uniquely identify that particular gridview on which rows have to be highlighted – so we need to have the id of the gridview. The id of the gridview would be id of the generated table element at client side.

We need to know on which column, the value has to be compared. In the above case, we are comparing the value to the values in ReOrder Point (3^rd column). So we need to have the column index.

We can use the below jQuery selector to select 3^rd column in all the rows, if you pass columnIndex as 3 and gridviewID

$("#" + gridviewID + " td:nth-child(" + columnIndex + ")")

To loop through all the n^th column values, we can use each iterator function of jQuery. Whatever function you pass here as parameter would be called for all the values.

$("#" + gridviewID + " td:nth-child(" + columnIndex + ")").each(function () {

    //This code which would be called for 3rd column values of all rows

});

2. Get the value of 3rd column(ReOrder Point) in that row and compare it with required value

As we have selected the 3^rd column already in Step 1, we just need to get the value and compare it with required value. But before comparing the value, we need to convert the value to integer that we can compare.

Here $(this) represents the current td element in the loop.

$(this).text() – this jQuery expression will get you the value. parseInt function converts the value to integer.

parseInt($(this).text()) – This expression will take the td value(column value) and converts to integer.i.e, 750 for first row in our example.

Below if conditional statement would compare the column value to required value.

if (parseInt($(this).text()) <= value) {

}

3. If it’s less than the required value, change the background color to lavender

We are currently lopping through the column values. If the column value is less than required value, I need to change the row background color. If you see the below generated html fragment for first row, td is the child of tr element. i.e, tr(row) element is the parent of td(column) element

<tr>

    <td>Adjustable Race</td>

    <td>AR-5381</td>

     <td>750</td>

</tr>

As mentioned above, $(this) represents the td element. $(this).parent(“tr”) jQuery expression selects the parent tr element of current element(which is td column element). And you can assign the background color by using css function.

Below is the complete expression for changing the row color to lavendar

$(this).parent("tr").css("background-color", "Lavender");  

Complete code for changing the row color of Gridview:

<script type="text/javascript">

$(document).ready(function () {
  HighLightRowsLessThanColumnValue('gvProducts', 3, 400);
});

function HighLightRowsLessThanColumnValue(gridviewID, columnIndex, value) {
  $("#" + gridviewID + " td:nth-child(" + columnIndex + ")").each(function () {
    if (parseInt($(this).text()) <= value) {
      $(this).parent("tr").css("background-color", "Lavender ");
    }
  });
}

</script>

HighLightRowsLessThanColumnValue : This function has 3 parameters – Id of gridview, column index and the value to be compared

This function would be called when the page DOM is loaded. Here we are passing gvProducts as grdviewID and 3 as column index and if the column value is less than 400- the row has to be highlighted.

The important point to note here is that the index starts from 1 in the nth-child jQuery selector. It does not starts with zero.

Thank you for reading the article. If you like this article, please subscribe in the below form.