Click here to Skip to main content
15,884,099 members
Please Sign up or sign in to vote.
0.00/5 (No votes)

I am creating a web page with collapsible grid, so my gridview is nested and can be expanded/collapsed when the plus sign is clicked.

Now, I need to highlight the row in line with the plus sign only (not including the expanded div)

I used client side onclick event for the gridview row which I assign the onclick value on datarowbound.

var prevRowIndex;

       function ChangeRowColor(row, rowIndex) {
           var parent = document.getElementById(row);
           var currentRowIndex = parseInt(rowIndex) + 1;

           if (prevRowIndex == currentRowIndex) {
           } else if (prevRowIndex != null) {
               parent.rows[prevRowIndex].style.backgroundColor = "#FFFFFF";

           parent.rows[currentRowIndex].style.backgroundColor = "#FFFFD6";
           prevRowIndex = currentRowIndex;

Here's the rowbound

protected void gvStudent_RowDataBound(object sender, GridViewRowEventArgs e)
            if (e.Row.RowType == DataControlRowType.DataRow)
                e.Row.Attributes.Add("onclick", string.Format("ChangeRowColor('{0}','{1}');", e.Row.ClientID, e.Row.RowIndex));

My problem is that when row index 0 is expanded and I click on the row index 1, the expanded div of row index 0 gets highlighted, I think because it is being read as a new row and becomes row index 1

What I have tried:

This idea I adapted from the link below

Highlight GridView Row On Click And Retain Selected Row On Postback[^]
Updated 15-Sep-20 16:05pm

1 solution

Worked it out by using this

var currentRowIndex = parseInt(rowIndex) + (parseInt(rowIndex) + 1);

           if (rowIndex == 0) {
               currentRowIndex = parseInt(rowIndex) + 1;
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900