jQuery in ASP.NET: Part II - GridView

• Download source - 143 KB

Introduction

jQuery has now become very popular in web develoment. In my last post Getting started with jQuery in ASP.NET, we started to explore jQuery methods with ASP.NET common controls. Now we are going one step further in jQuery with the use for our ASP.NET website.

Background

We have already explored the most common tasks we encounter with ASP.NET controls in jQuery. Now we will discuss:

• Creating a "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 discussing code segments here for jQuery, with the assumption that the corresponding ASP.NET controls are already placed on the webpage. You will get cleared while we proceed further. The code segments we discuss would be placed inside the script segment required for jQuery (now it seems to have become a convention for most developers), like:

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

     });
</script>

Creating a "Back to Top" link

In lots of websites, we see a 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 place a hyperlink with the CSS class backtotoplink, which we have defined as:

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

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

Highlight GridView's row or cell on mouseover

GridView is a control developers use frequently because of its different capabilities. GridView is rendered in HTML as a tree structure of table, tr, and td tags. We play with these HTML tags to build a GridView that is attractive and responds to mouse events.

$("# ?%=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:

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

• $("# ?%=GridView1.ClientID% ? tr").hover() attaches a mouse hover event for the 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 the same functionality with individual cells rather than rows).
• $(this).addClass("highlight");: In the mouseover event function, we add class highlight to current row (or cell if you are using td in jQuery selector).
• $(this).removeClass("highlight");: In the mouseleave event function, we remove class highlight from the current row (or cell if you specified that).

Remove GridView's row on mouseclick

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

$(("#?%=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 event, loop for each cell (ts) and remove it.
• Remove the row (tr) itself.

Remove GridView's column on mouseclick

Now capture the click event for the column (th) and remove all its cells (td) and itself. We handle the event only for th, so it only works when you click on column 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 the DOM tree till it finds a matching element.
• .prevAll() finds all the predecessors for the current element in the DOM tree. Place all found elements' length in the variable count.
• Loop through each row (tr) in the GridView.
• Remove the td that was found with the matching count.
• Also remove the header cell (th) that was found with the matching count.

Character limit validation in multiline textbox

When you use multiline textboxes in ASP.NET, sometimes we need to restrict the 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 the 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 events in order to update the character count.
• Set txtComments value's length in the variable strCount.
• Set this count in the txtNumber text to display.
• Check if strCount is less than minCount or strCount is greater than maxCount, then display message for the user to enter characters in the correct range.
• e.preventDefault(), finally disable the default behaviour for the keypress event, to further accept any input character.

References

ASP.NET jQuery Cookbook by Sonal Aneel Allana

Points of interest

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