.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

tag for row and ,
Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

GridView and JQuery In ASP.Net Tutorial

Posted By:Pankaj Mishra       Posted Date: February 13, 2010    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

In This tutorial we will see how we can perform various activity perform using asp.net gridView and JQuery like HighLight Row, Column, Remove hide Row, Column, change cursor style and more
 

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

tag for gridview cell and gridview header as tag

Now using this HTML table tag we are going to manipulate GridView using JQuery to give the flexibility to add remove these

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 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

 


    GridView and JQuery in ASP.Net
    
    
     

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

when user click on the cell. You can change the color depend upon your choice. I have used Red color in the below example

 


    GridView and JQuery in ASP.Net
    
    
     

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.

 


    GridView and JQuery in ASP.Net

    

     

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.

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.
 


    GridView and JQuery in ASP.Net

    
    
     

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.


    GridView and JQuery in ASP.Net
    
    
     


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.


    GridView and JQuery in ASP.Net
    
    
     

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.


    GridView and JQuery in ASP.Net
    
    
     


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.


    GridView and JQuery in ASP.Net
    
    
     

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 apondu for the suggestion.

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


<%----%>
Delete
<%-- --%>

 


 Subscribe to Articles

     

Further Readings:

Responses
Author: apondu         Company URL: http://www.dotnetspark.com
Posted Date: May 14, 2010

Hello Pankaj,

Very Nice article, this is very useful but this might raise a problem in Non IE browsers, a slight modification in the gridview template would correct it.

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

This Change should solve the problem..

Thanks for sharing this article..

Govardhana Reddy
www.gyaansolutions.com
Author: Pankaj Mishra         Company URL: http://www.dotnetspark.com
Posted Date: May 14, 2010

Hello Apondu,

I have modified the article and appened your suggestion.

Thanks a lot.

Regards,
Pankaj Mishra
Author: Bob Jones         Company URL: http://www.dotnetspark.com
Posted Date: March 27, 2013

I would like to read your article, but the HTML layout is so whacky that I cannot even see parts of it. Please clean it up and let me know when you have done so.

Bob


Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend