I was in a situation where I was expanding the functionality of an existing ASP.NET Gridview and I needed to add on-click highlighting and double-click redirecting.  I was browsing the JQuery website for a general idea on what to implement when I eventually pieced this together:

The JQuery:

var selected = null;

$(document).ready(function () {
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").hover(function () {
      $(this).css('cursor', 'pointer');
   }, function () {
      $(this).css('cursor', 'default');
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").click(function () {
      $(selected).removeClass("selectedrowstyle"); // Removes the CSS class from the previously selected row
      $(this).addClass("selectedrowstyle");        // Assigns the CSS class to the newly selected row
      selected = this;                             // Set the global javascript variable to the newly selected row
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").dblclick(function (e) {
      var id = $(this).closest("tr").find("input[type=hidden][id*=HIDDENFIELDNAME]").val();
      window.location = "PAGENAME.aspx?id=" + id;
   });
});

In the click function I use JQuery to set a class that will change the row background and text color to help the user identify which row was selected.

In the dblclick function I use JQuery to look up an id that is stored in a template column in the gridview.  That template column contains a hidden control that stores a value that I want to pass as a query string to the new page.

The hover function is just there to give me the nice pointer cursor look when a user is hovering over a row.

Advertisements