jQuery in ASP.Net II - GridView

jQuery now become the major part of web development in current environment. In my
last post Getting started with jQuery in ASP.Net, we have started to explore jQuery methods with ASP.Net common controls. Now we are going one step further in jQuery use for our ASP.Net website.
We have already explored some most common tasks we encounter with asp.net controls in jQuery. Now we will discuss :

• Creating "Back to Top" link
• Highlight GridView's row or cell on mouseover
• Remove GridView's row on mouseclick
• Remove GridView's column on mouseclick
• Character limit validation in Multiline Textbox

Note that we are only discuss code segments here for jQuery, with assumptions that corresponding asp.net controls are already placed on the webpage. You will get cleared while we proceed further. The code segments we discussed would be placed inside the script segment required for jQuery(now it seems to become a convention for most of the developers), like:

<script type="text/javascript">
     $(document).ready(function () {
         
         // our jQuery code will goes here...

     });
    </script>

Creating "Back to Top" link

In lots of websites, we see the hyperlink "Back to Top". Let's use it in our webpage
with the help of jQuery.

$(".backtotoplink").attr("innerHTML", "Back to Top");
$(".backtotoplink").attr("title", "Back to Top");
$(".backtotoplink").attr("href", "#Top");

Assumption : You have large blocks of html content placed on the webpage, and at the end of each block, we placed a hyperlink with css class backtotoplink, which we have defined as :

.backtotoplink
    {
        color: Blue;
        cursor: hand;
    }

• $(".backtotoplink").attr("innerHTML", "Back to Top");
  selects our hyperlink which has css class backtotoplink, and place "Back to Top" text as its content by setting its innerHTML attribute.
• $(".backtotoplink").attr("title", "Back to Top"); sets "Back to Top" text in title attribute.
• $(".backtotoplink").attr("href", "#Top"); sets #Top anchor target for our hyperlink showing Back to Top text.

Highlight GridView's row or cell on mouseover

GridView is the control developers used more frequently because of its different capabilities. GridView is rendered in html as tree strcuture of table,tr,td. All we have to play with these html tags to build GridView attractive or response to mouseevents.

$("# ˸%=GridView1.ClientID% ˺ td").hover(
            function () {
                $(this).addClass("highlight");
            },
            function () {
                $(this).removeClass("highlight");
            });

Assumption : You have placed a GridView control on the form with ID = GridView1. And have a css class defined some where, we have :

.highlight
        {
            background-color: #34FF6D;
        }

• $("#<%=GridView1.ClientID%> tr").hover() attach a mouse hover event for GridView control, note that jQuery's hover
  method contains two function arguments, for mouseover and mouseleave.
  After GridView1.ClientID we place tr to select only rows (you can replace this with td to obtain same functionality with individual cell rather than row.)
• $(this).addClass("highlight"); in mouseover event function we add class highlight to current row (or cell if you are using td in jQuery selector).
• $(this).removeClass("highlight");in mouseleave event function we remove class highlight from current row (or cell if you specified that).

Remove GridView's row on mouseclick

Now capture click event for the row (tr) and remove all its cells (td) and itelself.

$(("#˸%=GridView1.ClientID %˺ tr(").click(function () {
                $(this).find(("td(").each(function () {
                    $(this).remove();// remove td
                });
                $(this).remove();// remove tr
            });

Assumption : You have placed a GridView control on the form with ID = GridView1.

• Attach click event for each row.
• Inside the click even, loop for each cell (ts) and remove it.
• Remove the row (tr) itself too.

Remove GridView's column on mouseclick

Now capture click event for the column (th) and remove all its cells (td) and itelself. We handle event only for th, so it only works when you click on columns headers.

$("#<%=GridView1.ClientID %> th").click(function () {
            var count = $(this).closest("th").prevAll("th").length;
            $(this).parents("#˸%=GridView1.ClientID %˺")
              .find("tr").each(function () {
                $(this).find("td:eq(" + count + ")").remove();
                $(this).find("th:eq(" + count + ")").remove();
            });
        });

Assumption : You have placed a GridView control on the form with ID = GridView1.

• Attach the click event for column headers (th).
• .closest() begins with the current element and searches up in DOM tree till it finds a matching element.
• .prevAll() finds all the predecessors for the current element in DOM tree. Place all founded elements length in the variable count.
• Loop through each row (tr) in the GridView
• Remove the td that founded with matching count.
• Also remove the header cell (th) that founded with matching count.

Character limit validation in Multiline Textbox

When use multiline textboxes in asp.net, sometimes we need to restrict number of characters entered. In this example we restrict our textbox to accept characters in limit of 5-100

var minCount = 5;
        var maxCount = 100;
        $("#˸%=txtComments.ClientID%˺").bind("cut copy paste", function (e) {
            e.preventDefault();
        });

        $("#˸%=txtComments.ClientID%˺").keypress(function (e) {
            var strCount = $("#˸%=txtComments.ClientID%˺").val().length;
            $("#˸%=txtNumber.ClientID%˺").val(strCount);
            if ((strCount ˸ minCount) || (strCount ˺ maxCount)) {
                $("#message").text("Please enter characters in the range 5 - 100");

                if (strCount ˺ maxCount) {
                    e.preventDefault();
                }
            }
            else {
                $("#message").text("");
            }
        });

Assumption : You have placed a comments textbox control with ID = txtComments, and another textbox with ID = txtNumber to display number of characters entered.

• Bind the event hander for cut/copy/paste operations for textbox, and disable these operations so that we could capture keypress event in order to update the character count.
• Set txtComments value's length in the variable strCount.
  
• Set this count in txtNumber text to display.
• Check if strCount is less than minCount or strCount is greater than maxCount, then display message for user to enter characters in correct range.
• e.preventDefault(), Finally disable the default behaviour for keypress event, to further accept any input character.

References

ASP.Net jQuery Cookbook by Sonal Aneel Allana

We did some interesting things with GridView control at runtime by capturing mouse events. Then we restrict our comments textbox to accept a predefined number of characters, and notify user to input in valid range. Definitely, we can all do these tricks with traditional javascript techniques, but you see how easier it becomes with the help of jQuery.

You could download the working copy for these code samples from my CodeProject post
jQuery in ASP.NET: Part II - GridView