Total votes: 45
Print: Print Article
Please login to rate or to leave a comment.
Published: 31 May 2007
Learn how to create a custom Ajax Grid and Pager with the Microsoft ASP.NET AJAX platform.
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.
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.
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:
- Visual Studio 2005 or Visual Web Developer.
- Latest Version (v1.0) of ASP.NET
- SQL Server 2005 (At least Express Edition) for running the sample.
- Northwind Database (You can download the sql script from here).
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
But the problem with these controls there is no object model in the client side, which we can utilize with
client side. Developers often have to write reparative DHTML code to render the tabular data.
The AJAX Grid
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
client side that most of the ASP.NET developers are already familiar with.
When binding data we set the
DataSource of the target control and call the
method. The same steps are required for the
AJAX Grid. The following lines show the
records from the Northwind database.
Code Listing 2: AJAX
Figure 1: Output
This is a simple page, which uses a
ScriptManager with a WebService reference and an
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
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.
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
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
AJAX Gird Column contains the following important properties:
HeaderText: Same as in the
DataField: Same as in the
true, the header text will be displayed as a hyperlink instead of
SortField: Must be specified if
SortField is different from
FormatString: Same as in the
AJAX Grid also supports sorting in the same way as the
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
AJAX Grid. In order to get the current sort column and order we can check the
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.
To show the
Delete link like in the
DataGrid/GridView we have
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
CommandArgument but for
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
SelectedIndex property or the
Select() method. To deselect a row use the
The RowDataBound Event
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
that Unit in Stock is less than 10. Another example could be that our Web Service returns the
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
When working with large tables we often required to use paging. Although the
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
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
Code Listing 7: AJAX Grid Pager ASPX
Figure 5: AJAX Grid Pager
The followings are some of the important properties of the
true, shows the info such as Page 1 of 10. The default value is
true, shows the first and last Link. The default value is
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
true, shows the Previous and Next Link. The default value
true, shows the page numbers as link. The default value is
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.
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.
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
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 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.
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.
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.
Please login to rate or to leave a comment.