Reduce ASP.NET Page size and complexity using JQuery-Part 1
You can download the solution code here
In web based application for displaying data developers generally used grid view. We can enchance gridview to support tooltip, mouseover, mouseout and click effect using ASP.NET Ajax/JQuery.
Below image will show this effect on page
the XHTML code for creating and populating GridView is shown in the grid.
<%@ Page Language="C#" EnableViewState="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Microsoft ASP.NET Ajax provided client side library to work with JavaScript. You can easily use it in your web page.
The following script I used to implement the mouseover, mouseout, click event and tooltip for each cell in GridView using ASP.NET Ajax
<script type="text/javascript"> function formatTable(gvID){ //get the gridview var gv = $get(gvID); //get numbers of column in grid view cols = gv.rows[0].cells.length - 1; //get numbers of rows in grid view rows = gv.rows.length -1; //intialized looping variables var i=0; var j=0; //loop for each row in gridview for(i=0;i<rows;i++){ //attach mouseover event for row $addHandler(gv.rows[i], "mouseover", mouseOver); //attach mouseout event for row $addHandler(gv.rows[i], "mouseout", mouseOut); //attach click event for row $addHandler(gv.rows[i], "click", onClick); //loop for each cell in row for(j=0;j<cols;j++){ //set tooltip for cells in row setTitle(gv.rows[i].cells[j]); } } } function setTitle(object){ //check browser type if(Sys.Browser.name =="Firefox"){ object.title = object.textContent; } else{ object.title = object.innerText; } } function mouseOver(objectEvent){ //is row already clicked if(! isClickedStyleSet(objectEvent.target.parentNode.className)) { //set class name objectEvent.target.parentNode.className = "row-over" ; //check browser type if(Sys.Browser.name !="Firefox"){ objectEvent.target.parentNode.style.cursor ="hand"; }} } function mouseOut(objectEvent){ //is row already clicked if(! isClickedStyleSet(objectEvent.target.parentNode.className)){ //set class name objectEvent.target.parentNode.className = "data-row" ; }} function onClick(objectEvent){ //set class name objectEvent.target.parentNode.className = "row-select" ; } function isClickedStyleSet(className){ //if row is already clicked return true if(className == "row-select"){ return true; } return false; }
</script>
For JQuery implementation, I removed the following line from xhtml
<asp:ScriptManager runat="server" />
<RowStyle CssClass="data-row" Wrap="false" VerticalAlign="middle" />The following script I used to implement the mouseover, mouseout, click event and tooltip for each cell in GridView using JQuery
<script type="text/javascript"> function formatTable(){ //get all row in gridview table and set style/event/attribute on them $("table#<%= this.gv.ClientID %> tr") .addClass("data-row") .mouseover(function(){ this.className = "row-over"; if(! jQuery.browser.mozilla){ this.style.cursor ="hand"; }}) .mouseout(function(){ this.className = "data-row" ; }) .click( function(){ this.className = "row-select" ; }); //get all cell in gridview table and set style/event/attribute on them $("table#<%= this.gv.ClientID %> td") .addClass("data-row") .css("white-space", "nowrap") .css("vertical-align", "middle") .mouseover(function(){ setTitle(this); }); } function setTitle(object){ //check browser type if(jQuery.browser.mozilla){ object.title = object.textContent; } else{ object.title = object.innerText; } }
</script>
Getting all object using id/tag/class is very easy in JQuery, In one line you can implement all the attribute, event,class using “.”
The following line give all row in gridview table
$("table#<%= this.gv.ClientID %> tr")
$("table#<%= this.gv.ClientID %> td")
For network monitoring, I used Firebug for FireFox 3
You can download FireBug from here
Below image for ASP.NET Ajax implementation related files
Below image show JQuery related implementation files
It clear from the figure that after JQuery implementation
- The aspx file size is reduce
- ASP.NET Ajax files are not required
- You can search/get DOM elements easily
- Loop is not required for setting attribute/event/css on array of element
- In one line you can set all attribute/event/css of elements using "."
I will discuss more JQuery feature in next post, If you also want the video cast of this article please reply/post your comment for this article.
Soultion files you can download here