Development – Leet 4 Life

Software Development Code Samples and More

Skip to: Content | Sidebar | Footer

JQuery And ASP.NET Gridview

21 November, 2012 | ASP.NET, jQuery | By: Michael Adams

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.

Original Code Posted Here

Write a comment