Code Master: GridView and JQuery In ASP.Net Tutorial

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

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

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

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.

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. You can donwload the sample asp.net website used in the above example by clicking the below download link.

Thanks to Pankaj my friend for the suggestion for IE Browser.

If you are using non IE browser you can use this gridview item template column

<ItemTemplate>

<%--<a href="#" id='<%# Eval("Id") %>' class="delbutton">--%>

<img id='<%# Eval("Id") %>' class="delbutton" border="0" src="IconStubs/delete.gif" alt="Delete" />

<%-- </a>--%>

</ItemTemplate>

Download
_634016905061772303_JQuerySample.zip

Code Master

Tuesday, 21 February 2012

GridView and JQuery In ASP.Net Tutorial