Published: 31 May 2007
By: Kazi Manzur Rashid

Learn how to create a custom Ajax Grid and Pager with the Microsoft ASP.NET AJAX platform.

Introduction

This article will show you how to create an AJAX Grid and a generic pager, which mimics the built-in GridView control on the client side.

Features

The Control(s) Provides:

  • Able to bind to any web service call that returns an array.
  • A GridView like API on the client side.
  • Able to AutoGenerate Columns based upon the dataSource.
  • Support for Sorting and Paging where developer can spawn his/her own logic.
  • Full VS Design Time Support.
  • Supports Column Drag and Drop.
  • Compatible with all major browsers including IE, Firefox, Opera and Safari.

Prerequiste

This is not a beginner’s guide. If you are new to ASP.NET AJAX or not familiar with Client-Centric or Server-Centric Development model, I strongly recommend you visit http://ajax.asp.net. To run the solution you must have:

  1. Visual Studio 2005 or Visual Web Developer.
  2. Latest Version (v1.0) of ASP.NET AJAX.
  3. SQL Server 2005 (At least Express Edition) for running the sample.
  4. Northwind Database (You can download the sql script from here).

Background

ASP.NET AJAX is a great platform to develop rich user experience web applications. The most amazing part is that it replaces the traditional page postback refresh model. We can easily add an UpdatePanel (A Part of Server Centric Development model) in the updatable part of a page to remove the regular page postback. But the problem with an UpdatePanel is that it not only returns the updated data but also returns the HTML tags of that updated part. This is not an issue if you are developing small or mid size applications where performance and network bandwidth is not a concern. However if you are developing a large system where performance and network bandwidth matters, then definitely you want to send only the updated data without the unnecessary HTML tags.

When developing a database application it is a common requirement to show data in a tabular format with sorting and paging. ASP.NET has two first class controls for this purpose, the DataGrid and the GridView. But the problem with these controls there is no object model in the client side, which we can utilize with JavaScript. There is no way we can call a Web Service or Server side method and bind the result with it in the client side. Developers often have to write reparative DHTML code to render the tabular data.

The AJAX Grid

The provided AJAX Grid solves the above problem. Developer can easily bind the result of a Web Service or Server Side method calls in the client side. It also exposes a similar API like DataGrid/GridView in client side that most of the ASP.NET developers are already familiar with.

Data Binding

When binding data we set the DataSource of the target control and call the DataBind() method. The same steps are required for the AJAX Grid. The following lines show the Suppliers table records from the Northwind database.

Code Listing 1: JavaScript

Code Listing 2: AJAX

Figure 1: Output

This is a simple page, which uses a ScriptManager with a WebService reference and an AJAX Grid. In the pageLoad() (A special event which is fired by the ASP.NET AJAX Library every time the page is loaded) event we are getting the reference of the AJAX Grid by using the $find method (A shortcut method to find the Client Side Component, please do not confuse Client Side Component with regular DOM element, to get a DOM element reference use $get) statements and then we are setting the dataSource that the web service call returns and finally calls the dataBind() method. As you can see, the output is the same as we would set up a DataGrid/GridView with the default setting.

Styling

The above example shows the data in a plain vanilla style, certainly we do not want show the data in this way rather we would like to add some styling property. AJAX Grid similarly exposes CssClass, HeaderCssClass, RowCssClass, AlternatingRowCssClass and SelectedRowCssClass to do the same styling as the DataGid/GridView controls. Once we apply these styles the above example output looks like the following.

Figure 2: Output with Styles

The Supplier.aspx of the attached sample has full source code of the above two examples.

The Column Collection

When showing the tabular data we certainly like to add more control such as hiding a column, showing a different header text, alignment, allow sorting, setting column width etc. In AJAX Grid we can easily define the column collection in declarative model like the following:

Code Listing 3: AJAX Grid with Columns

The AJAX Gird Column contains the following important properties:

  1. HeaderText: Same as in the DataGrid/GridView.
  2. DataField: Same as in the DataGrid/GridView.
  3. Sortable: If true, the header text will be displayed as a hyperlink instead of text.
  4. SortField: Must be specified if SortField is different from DataField.
  5. FormatString: Same as in the DataGrid/GridView.

Sorting

The AJAX Grid also supports sorting in the same way as the DataGrid/GridView control. When a column header is clicked it raises the Sort event, which we have to subscribe. To show the current sort order we have to set the SortOrderAscendingImage and SortOrderDescendingImage property of AJAX Grid. In order to get the current sort column and order we can check the SortColumn and SortOrder property. The following shows how to add sorting support in the AJAX Grid which shows the Customers table of Northwind database.

Code Listing 4: AJAX Grid with Columns

Figure 3: AJAX Grid Sorted

The Customer.aspx of the attached sample has the full source code of the sorting example.

Selecting/Deleting Rows

To show the Select and Delete link like in the DataGrid/GridView we have set the ShowSelectLink and ShowDeleteLink property to true. Once a row is selected it will raise the SelectedIndexChange event. The same thing happens when the delete link is clicked; it raises the RowDelete event. Both of these events pass the CommandName and CommandArgument but for this the DataKeyName must to be set. For example if we set the DataKeyName to the primary key of a table in these events it will have the primary key value as CommandArgument. You can also select a row by using the SelectedIndex property or the Select() method. To deselect a row use the ResetSelection() method.

The RowDataBound Event

In the RowDataBound event we can do some special processing before the data is bound. For example when showing the Products table of Northwind database we can change the background color to red that Unit in Stock is less than 10. Another example could be that our Web Service returns the Product's CategoryID but we want to show the category name instead of that CategoryID. These kinds of changes can be done in this event. This event passes the binding row and the current data item that it is binding. The following shows how to bind this event and do the special processing.

Code Listing 5: RowDataBound

Figure 4: RowDataBound

The Product.aspx of the attached sample has the full source code of the RowDataBound event example.

Paging

When working with large tables we often required to use paging. Although the DataGrid/GridView has built-in support for paging they are pretty much useless. Most developers often refuse to use the built-in functionality and use their own custom logic which usually takes a start index, page size and other additional parameters and in turn returns only the paged records with the total number of records. The sample DataService.asmx contains some of the methods (GetCustomerList, GetProductList) which contain the custom paging logic. Usually a Pager shows the page numbers, next/previous, first/last page links. The following shows how to implement a pager control.

Code Listing 6: AJAX Grid Pager JavaScript

Code Listing 7: AJAX Grid Pager ASPX

Figure 5: AJAX Grid Pager

The followings are some of the important properties of the AJAX Pager:

  • ShowInfo: When true, shows the info such as Page 1 of 10. The default value is false.
  • ShowFirstAndLast: When true, shows the first and last Link. The default value is true.
  • FirstText: The text which will be displayed as link for the first page. The Default value is <<
  • LastText: The text which will be displayed as link for the last page. The Default value is >>
  • ShowPreviousAndNext: When true, shows the Previous and Next Link. The default value is false.
  • ShowNumbers: When true, shows the page numbers as link. The default value is true.
  • RowPerPage: The Number of row that each page contains. The default value is 10.
  • CurrentPage: The currentpage that the pager is showing.
  • HideOnSinglePage: The control will not be rendered if it founds there is only one page.
  • ShowTip: When true, a tooltip will appears on hovering on any of the links.
  • InfoCssClass: Styling property for the info part.
  • CurrentPageCssClass: Styling property for the current page.
  • OtherPageCssClass: Styling property for other pages.

The AJAX Pager contains only one event PageChange that the developers have to subscribe to load the new page data. I have excluded the Pager from the Grid so that it can be utilize in with other controls that show tabular data.

Both the Customer.aspx and Product.aspx of the attached sample has full source code of the Paging example.

Drag and Drop

Drag and Drop is an essential part of any Rich Web Application and thus it has become a common feature for Web 2.0 applications. Certianly Pageflakes is one of the best candidates for utlizing drag and drop. The Ajax Grid has built-in support for column drag and drap. Just set the AllowDragAndDrop property for any Column to true and it will be drag and dropable. The following screenshot shows the implemented version of a drag and drop in the Customers table of the Northwind database:

Figure 5: AJAX Grid Drag and Drop

AJAX Grid Drag and Drop

The Ajax Grid raises the ColumnDragStarted when the column drag started and ColumnDropped upon dropping the column. The following code shows how to track the column and drag and drop in these events.

Code Listing 8: AJAX Grid Drag and Drop

We can also use the built-in ProfileService to persist the columns position, so that in the next visit the columns positioning is same as the user left it in the last visit.

Summary

Microsoft ASP.NET AJAX is great platform to develop web application but currently it is lacking of Client Side Components especially which works with data. Although you will find 30+ controls in ASP.NET Ajax ToolKit but most of them are mainly extender, which extends existing server side ASP.NET Controls. Certainly we can develop these kinds of controls to enrich it.

Downloads

References

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Kazi Manzur Rashid

Kazi Manzur Rashid, Nickname Amit is a Diehard fan of Microsoft Technology. He started programming with Visual Basic 5.0 back in 1996. Since then he has developed many diversified solutions in his professional career, which spans from Anti-Spyware Tool to Personalized Start Page. Currently He is wor...

This author has published 10 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Animating a Web Form using ASP.NET AJAX
In this article you will learn how to animate a webform using asp.net ajax.
Jquery Ajax
JQuery makes communicating with the server very, very easy. JQuery uses get(), getJSON(), and post(...
jQuery Deferred Objects Promise Callbacks
jQuery Deferred/Promise objects untangle spaghetti-like asynchronous code.
jQuery in Action 2nd edition: Queuing functions for execution
This article is taken from the book jQuery in Action, second edition. This segment shows how you can...
Test120Jan
This is my custom article

You might also be interested in the following related blog posts


VS 2010 Code Intellisense Improvements (VS 2010 and .NET 4.0 Series) read more
Gaia Ajax 3.6 Beta Released! Free download of new Ajax GridView, 35++ Ajax Components and 100++ New Samples read more
DevReach Follow-up, Part I read more
RadControls for WPF/Silverlight Q3 Beta 2 release is live! read more
Changing DatePicker in Silverlight to show current date read more
Make SharePoint 2007 Act Like SharePoint 2010, Updated read more
Gaia Ajax 3.6 Alpha released: Ajax GridView and Adaptive Rendering ++ read more
Take Caution with WinForms DataGridView RowPrePaint read more
Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Triggering Full Page Postbacks From An UpdatePanel read more
Pie Chart Easy AS. read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Re: Really like this idea Kazi Manzur Rashid 5/31/2007 3:46 PM
I've completed the code for Script# Muhammad Mosa 5/31/2007 7:30 PM
placeholder Cool Idea! Monjurul Alam 6/3/2007 6:49 AM
Script# to buid AjaxGrid Bossjantu Jantu 6/3/2007 1:54 PM
placeholder Faisal Faisal Khan 6/3/2007 6:20 PM
How to add editable columns or cells? Praveen Bhosage 9/9/2009 1:22 AM
placeholder Nice Job Kabirul Islam 6/5/2007 2:46 PM
A very helpful article. Nazmul Karim 6/6/2007 4:54 AM
placeholder Re: A very helpful article., Kazi Manzur Rashid 6/6/2007 4:38 PM
Drag and Drop support added Kazi Manzur Rashid 6/6/2007 4:40 PM
placeholder Can i add a template column/item template column to ajax gridview Prabasini Hota 12/21/2009 5:21 AM
A very smart article Altaf Hussain 6/11/2007 2:13 AM
placeholder SelectedIndexChange event not firing Patrick Harren 6/17/2010 9:51 AM
RE: SelectedIndexChange event not firing Sonu Kapoor 6/17/2010 9:54 AM
placeholder RE: RE: SelectedIndexChange event not firing Patrick Harren 6/18/2010 8:54 AM
RE: RE: RE: SelectedIndexChange event not firing Sonu Kapoor 6/18/2010 9:36 AM
placeholder Very helpful Awnik Raihan 6/13/2007 9:20 AM
Good job Josh Stodola 6/13/2007 9:23 AM
placeholder Please help with error Mohan Das 9/21/2010 2:36 AM
RE: Please help with error Mohan Das 9/21/2010 11:47 PM
placeholder Grid.js not being called in WCF project Sri Reddy 9/21/2010 1:25 PM
RE: Grid.js not being called in WCF project Sonu Kapoor 9/21/2010 2:55 PM
placeholder RE: RE: Grid.js not being called in WCF project Sri Reddy 9/21/2010 3:27 PM
RE: RE: RE: Grid.js not being called in WCF project Sonu Kapoor 9/22/2010 9:53 AM
placeholder RE: RE: RE: RE: Grid.js not being called in WCF project Sri Reddy 9/22/2010 1:24 PM
RE: RE: RE: RE: RE: Grid.js not being called in WCF project Sonu Kapoor 9/22/2010 1:28 PM
placeholder RE: RE: RE: RE: RE: RE: Grid.js not being called in WCF project Sri Reddy 9/22/2010 2:16 PM
How can i add checkbox into the Grid? Mohan Das 9/22/2010 2:35 AM
placeholder Stored Procedure Vijay Anand 9/30/2010 4:35 AM
RE: Stored Procedure Sonu Kapoor 9/30/2010 9:49 AM
placeholder Template fields Vijay Anand 10/1/2010 1:37 AM
RE: Template fields Sonu Kapoor 10/1/2010 10:39 AM
placeholder Nicely Written Article! Rediff Mail 6/15/2007 10:20 AM
Selected Index Changed Vijay Anand 10/4/2010 8:22 AM
placeholder RE: Selected Index Changed Sonu Kapoor 10/4/2010 10:08 AM
Row command event Vijay Anand 10/7/2010 3:00 AM
placeholder PostBack Issue CARLOS AGUSTÍN 6/20/2007 5:06 AM
Re: PostBack Issue Kazi Manzur Rashid 6/20/2007 5:30 AM
placeholder Error in Mozilla Firefox 2.0.0.4 Luke Cloudsdale 6/26/2007 6:57 PM
Re:Error in Mozilla Firefox Kazi Manzur Rashid 6/27/2007 3:55 AM
placeholder How to Add Child Panel for individual row for editing Ajax.Data.Grid Shahnawaz Ansari 2/13/2012 2:31 AM
RE: How to Add Child Panel for individual row for editing Ajax.Data.Grid Sonu Kapoor 2/13/2012 12:55 PM
placeholder RE: RE: How to Add Child Panel for individual row for editing Ajax.Data.Grid Shahnawaz Ansari 3/7/2012 12:49 AM
How to Add Child Panel for individual row for editing Ajax.Data.Grid Shahnawaz Ansari 3/8/2012 1:18 AM
placeholder 'DataService' is undefined Shams Shams 7/9/2007 9:50 AM
Re: 'DataService' is undefined Kazi Manzur Rashid 7/9/2007 1:52 PM
placeholder Decryption in Client side Chinnappan Chandrasekaran 7/12/2007 5:49 AM
Initiating from client side (non post back event) Mel Combs 7/20/2007 4:52 AM
placeholder VWD Express Franco Pizzinini 7/24/2007 3:36 AM
Re: VWD Express Kazi Manzur Rashid 7/24/2007 5:36 AM
placeholder thanks Franco Pizzinini 7/26/2007 1:19 PM
Re: thanks Kazi Manzur Rashid 7/26/2007 3:13 PM
placeholder good article Sudarat Bunritthikan 10/8/2007 11:30 PM
Hiiiiiiiiiii Kazi Ashfaq Shaikh 10/20/2007 1:03 AM
placeholder Great Stuff Doug Smerchek 11/7/2007 10:41 AM
RE: Great Stuff Kazi Manzur Rashid 11/7/2007 2:23 PM
placeholder tony Tony Rr 11/28/2007 8:10 PM
Adding new line Eddie Adl 2/29/2008 7:12 AM
placeholder Another question Eddie Adl 2/29/2008 7:25 AM
How to get this ajax:Grid control Sandhya Sandhya 5/8/2008 3:16 AM
placeholder RE: How to get this ajax:Grid control Sonu Kapoor 5/8/2008 9:17 AM
article is too good. good idea Upendrasai P 6/20/2008 1:51 PM
placeholder 'DataService' is undefined. Client Side Script Error Gokhan Mamaci 7/6/2008 6:12 PM
RE: 'DataService' is undefined. Client Side Script Error Sonu Kapoor 7/6/2008 9:28 PM
placeholder great post Venkat Yetrintala 7/9/2008 10:58 AM
RE: great post Sonu Kapoor 7/9/2008 11:01 AM
placeholder Columns could not be added to the collection. Details: Object does not match target. Naresh Karn 8/13/2008 5:23 PM
RE: Columns could not be added to the collection. Details: Object does not match target. Sonu Kapoor 8/14/2008 8:54 AM
placeholder html tags Marco Bianchini 12/16/2008 4:19 AM
Help Needed Arjun Raju 12/17/2008 9:38 AM
placeholder hi s m 3/6/2009 6:37 AM
RE: hi Sonu Kapoor 3/6/2009 7:21 AM
placeholder Really I like it Muhammad Mosa 5/31/2007 4:32 AM
Re: Really I like it Kazi Manzur Rashid 5/31/2007 6:36 AM
placeholder Script# to buid AjaxGrid Muhammad Mosa 5/31/2007 8:22 AM
Really like this idea Mohammad Sayeed Ahmed 5/31/2007 9:42 AM
placeholder Re: Script# to buid AjaxGrid Kazi Manzur Rashid 5/31/2007 3:38 PM

Please login to rate or to leave a comment.