How to highlight a row in gridview?

Question

My applications sends emails to users, with a hyperlink for an aspx page. There is a guid in the get string. The aspx page shows gridview with rows accross multiple pages. My requirement is when the link is clicked the user should be directed to appropriate page and the row with mapping to guid should be highlighted?

Please help, its urgent.

Answer 1

You can use JQuery for that.

$("a").click(function(){
$(this).effect("highlight", {}, 3000);

})

it would be something that simple. Hope it helps.

Answer 2

Canavar has a point, but for a simple thing, you can take the load of the RowDataBound method and perform the hightlight at the end of the rendering.

Let's imagine (cause you did not provided any information regarding it - BTW, please give us always the most detailed version of a question) :)

GridView had 30 rows displayed and we need to hightlight the Row ID 22.

follow this steps:

1 - Add an HiddenField with

<asp:HiddenField ID="rowID" CssClass="rowids" Value='<%# Eval("YourROWID") %>' />

2 - Now that we have the row, all we need is, when the DOM is ready, loop trough all rows and hightlight the one that has the same Value to the selectrow that you mention in a comment

Are you using jQuery?

var selectedRow = '<%= Request["selectrow"] %>';

$(document).ready(function(){

  $(".rowids").each( function() {  // Get and Loop through all class=rowids elements

   if( $(this).value() == selectedRow) {

     // we found it! lets find the TR and add the highlight class to it
      $(this)  // the INPUT ELEMENT
         .parent()   // the TD element
         .parent()   // the TR element
         .addClass("highlight");  // Add the class
   }
  });
});

if not using jQuery (you should though, cause I almost sure that you will re use it else where to improve more part in your code)

var selectedRow = '<%= Request["selectrow"] %>';
var arr = document.getElementsByTagName("input");

for (i = 0; i < arr.length; i++) {  // Loop through all input elements

    if( arr[i].className == "rowids" && arr[i].defaultValue == selectedRow ) {
           // it's a rowids element and the value is the one we are looking out

     var tableRow = arr[i].parentNode.parentNode; // get it's TR element
     tableRow.className = tableRow.className + ' hightlight'; // Add the class
     break; // no need to loop through more, we already found the one we are looking for
    }
}

REMEMBER to add this in a script before the BODY tag, so it will be called when all elements are rendered in the page (DOM ready trick)