JQuery and GridView in ASP.NET


INTRODUCTION
We all know how important GridView in asp.net web site or web application. DataGrid is used to display, Edit, Or delete data in asp.net.
Similarly JQuery now a days is playing very important role in web application whether it it asp.net website or asp.net web application, PHP, JSP etc.
In this article we are going to use GridView and Jquery and see what all we can do in asp.net using GridView and JQuery.
JQuery is javascript library so it will always execute in the client side where as GridView is asp.net server control. As We know that gridView when it renders in the client browser than it will be converted as HTML table with <TR> tag for row and <TD> tag for gridview cell and gridview header as <TH> tag
Now using this HTML table tag we are going to manipulate GridView using JQuery to give the flexibility to add remove these <TR>, <TD> tag highlight row etc. That means all thing we can do what we can using JavaScript in client side
In this tutorial we are going to use CSS also for giving user look and feel what he would like to do for eg. Highlight GridView Row or Gridview cell.
DOWNLOAD JQUERY LIBRARY
You can download the JQuery library from here
For validating the asp.net control you can visit this article.
For validating user name using twitter and other famous website style from Database you can refer this article. For calling Server side method using JQuery you can refer this article
ADD REFERENCE
1st add the reference of JQuery library in your asp.net web page inside <Head> tag like this
<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>
BIND GRIDVIEW TO DATASOURCE

Now lets Drag and drop GridView in your asp.net web form and it will be like this
<asp:GridView ID=”GridView1″ runat=”server”></asp:GridView>
But its up to you you can set the autogeneratecolumn property to off and can create your own template or bound column of the GridView
Now to bind this GridView we are going to create a datatable and going to bind this DataTable to own GridView. This Datatable you can write in to .cs file. You can bind the GridView with data from Database of SQL Server or MySQL or any other database. You can also bind DataSet also to gridView. Ultimately there should be some data bind to GridView.
private DataTable GetTable()

{

DataTable myTable = new DataTable();
myTable.Columns.Add(“ID”, typeof(int));
myTable.Columns.Add(“Hobby”, typeof(string));
myTable.Columns.Add(“Name”, typeof(string));
myTable.Columns.Add(“Date”, typeof(DateTime));
myTable.Rows.Add(1, “Reading”, “Pankaj”, DateTime.Now);
myTable.Rows.Add(2, “Playing”, “Nitin”, DateTime.Now);
myTable.Rows.Add(3, “Music”, “Matthew”, DateTime.Now);
myTable.Rows.Add(4, “Dancing”, “Jhon”, DateTime.Now);
myTable.Rows.Add(5, “Watching TV”, “Arun”, DateTime.Now);
return myTable;
}

Now I am going to Bind the above databale to our GridView in Page Load event in asp.cs page
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GridView1.DataSource = GetTable();
GridView1.DataBind();
}

}

Now we are going to write the JQuery script to do various activity on GridView
1. CHANGE THE BACKGROUND COLOR OF THE SELECTED GRIDVIEW ROW
This function can be used to change the GridView Background color of the row when user click on the row. you can change the color. In the below example I have used red

<head id=”Head1″ runat=”server”>
<title>GridView and JQuery in ASP.Net</title>
<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {

//To set the background color of gridview row

$(“#<%=GridView3.UniqueID%> tr”).click(function() {

$(this).css(“background-color”, “red”);

});
});

</script>

</head>

and you will see like this picture on your web page

2. CHANGE THE BACK COLOR OF THE GRIDVIEW SELECTED CELL
To change the background color of the GridView cell <TD> when user click on the cell. You can change the color depend upon your choice. I have used Red color in the below example
<head id=”Head1″ runat=”server”>

<title>GridView and JQuery in ASP.Net</title>

<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To set the back ground color of gridview cell

$(“#<%=GridView4.UniqueID%> td”).click(function() {

$(this).css(“background-color”, “red”);

});

});
</script>
</head>

and you will see the effect like this Image

3. REMOVE ROW FROM A GRIDVIEW WHEN USER CLICK ON A ROW.
below JQuery function will remove the row from GridView when user click once in the gridview. Similarly you can hide the Row using Hide() method just replace remove() with hide() function.
<head id=”Head1″ runat=”server”>

<title>GridView and JQuery in ASP.Net</title>

<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To remove the row on click on click of the row
$(“#<%=GridView1.UniqueID%> tr”).click(function() {
//Change the backgroupd color while removing the GridView row and fade out feel to the user
$(this).css(“background-color”, “green”);
$(this).fadeOut(500, function() {
$(this).remove();
});
});
});

</script>

</head>

and you will see this kind of effect in your GridView

4. REMOVE GRIDVIEW CELL ON CLICK OF THE CELL

This JQuery function will remove the GridView cell ie. <td> tag from the GridView when user lick on the particular cell. This function can also be used to remove TD tag from HTML table. Similarly you can hide the Cell using Hide() method.
<head id=”Head1″ runat=”server”>

<title>GridView and JQuery in ASP.Net</title>

<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To remove the gridview cell on click

$(“#<%=GridView2.UniqueID%> td”).click(function() {
//Change the backgroupd color while removing the GridView td and fade out feel to the user

$(this).css(“background-color”, “navy”);

$(this).fadeOut(400, function() {

$(this).remove();

});

});
});
</script>
</head>

5. REMOVE COLUMN FROM GRIDVIEW WHEN USER CLICK ON GRIDVIEW HEADER
This function will remove the column once user click on the header of the gridview.
<head id=”Head1″ runat=”server”>

<title>GridView and JQuery in ASP.Net</title>

<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To remove full column if user click on the header of the GridView

$(“#<%=GridView3.UniqueID%> th”).click(function() {

var count = $(this).closest(“th”).prevAll(“th”).length;

$(this).parents(“#<%=GridView3.UniqueID%>”).find(“tr”).each(function() {

$(this).find(“td:eq(” + count + “)”).remove();

$(this).find(“th:eq(” + count + “)”).remove(); //Remove header

});

});

});
</script>

</head>

6. CHANGE THE BACKGROUD COLOR OF THE ROW ON MOUSE HOVER EVENT.
This function will change the background color of the row when user place the cursor in a particular GridView row. When user move out the mouse from row it will change back or retain the original color. You can change the color depend upon your choice.

 

<head id=”Head1″ runat=”server”>
<title>GridView and JQuery in ASP.Net</title>
<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To set the background color of gridview row on mouse hover event

$(“#<%=GridView5.UniqueID%> tr”).hover(

function() { $(this).css({ “background-color”: “lightgreen” }); },

function() { $(this).css({ “background-color”: “white” });

});

});

</script>

</head>

7. CHANGE THE CURSOR STYLE TO HAND IN A GRIDVIEW

To change the cursor style of a grid View you can use below function. This will change the Mouse pointer from arrow to hand. In this example I have used css to change the cursor style. Similarly you can change the cursor style of your own choice.
<head id=”Head1″ runat=”server”>

<title>GridView and JQuery in ASP.Net</title>
<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//To Change the cursor to hand on mouse hover

$(“#<%=GridView4.UniqueID%> tr”).hover(

function() {

$(this).css({ “cursor”: “hand” });
});
});
</script>
</head>

8. ADD A NEW ROW AT THE LAST OF THE GRIDVIEW.

Actully we are cloning the last row of the GridView in this example on button click event. Similarly you can add the last row at the footer position.
<head id=”Head1″ runat=”server”>
<title>GridView and JQuery in ASP.Net</title>
<script src=”Script/jquery-1.4.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(document).ready(function() {

//Add Row in a GridView at the last in button click
$(‘#btnAddRow’).click(function() {

$(‘#<%=GridView4.UniqueID%> tbody>tr:last’).clone(true).insertAfter(‘#<%=GridView4.UniqueID%> tbody>tr:last’);
});

});
</script>
</head>
Hope this will help all who want to manipulate the GriView using JQuery. Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s