Building a Custom ASP.NET Ajax Enabled Grid Using JavaScript: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Building a Custom ASP.NET Ajax Enabled Grid Using JavaScript

page 1 of 9

Published: 30 Jan 2009

Abstract
In this article Mudassar examines the creation of a custom AJAX enabled Grid using JavaScript. After providing a brief introduction, he provides detailed coverage of both the client and server side techniques with the help of complete source code. He makes use of XML HTTP for making AJAX calls to the ASP.NET Page and then parses the received XML and retrieves the HTML from the tags and binds it to a DIV using the INNERHTML property. He also adds Paging and Sorting functionality to the control with AJAX effects and wraps the HTML in XML to enable sending separate HTML content in separate tags.

by Mudassar Ahmed Khan
Feedback

Average Rating:

Views (Total / Last 10 Days): 43215/ 173

Article Contents:

Introduction

In this article I have described how to build your own Ajax Enabled Grid using JavaScript. The concept is that using simple HTML table designs a Grid like control with Ajax Paging and Sorting functionality without using any ASP.NET Controls.

Getting Started

We will start our Website by creating a New Website in Visual Studio 2005 and Name it as AJAXGrid.

Then in the App_Data Folder keep the NorthWind.MDF which will act as a Database for the project.

Now in the Web.Config add the following key.

Listing 1

<connectionStrings>
<add name ="conString" 
connectionString ="Data Source=.\SQLEXPRESS;database=Northwind;
AttachDbFileName=|DataDirectory|\NORTHWND.MDF;
Integrated Security=true"/>
</connectionStrings>

View Entire Article

(Page 2) »

AJAX Resource Center

User Comments

Title: wow
Name: Sue
Date: 2012-10-11 3:05:48 PM
Comment:
what a great code! Thanks

Title: m,n
Name: mn,mn
Date: 2012-08-31 8:55:59 AM
Comment:
mn,mn

Title: Excellent
Name: Soons
Date: 2010-02-13 12:45:27 AM
Comment:
The example was very simple and informative..
Thanks for the good work

Title: Small Problem
Name: IndSoft
Date: 2009-08-30 10:12:21 AM
Comment:
Good work, im also tried this it was work for me, but my problem is i need to edit the record using ajax (Not using UpdatePanel in VS)what is best way to do that.

note-when i click edit link, it should take particular record to separate web control (textboxes).

Title: RE i did upgrade it to 3.5
Name: Mudassar Khan
Date: 2009-03-15 1:00:13 AM
Comment:
Hi,
You ahould review the code after the upgrade. Since cannot say what has changed in that. You can checkout whether the data is assigned to div or not.

Title: ???
Name: ericnickus@roadrunner.com
Date: 2009-03-14 7:34:38 PM
Comment:
i did upgrade it to 3.5

Title: ???
Name: ericnickus@roadrunner.com
Date: 2009-03-14 7:34:04 PM
Comment:
I tried it in Visual Studio 2008 and it did compile, but didn't show any data in the latest version of firefox

??

Title: good work
Name: ajax helper
Date: 2009-02-06 5:16:16 PM
Comment:
http:// good work
ajaxnetforum.blogspot.com/

ajax forum

Title: Awesome!
Name: ajax learner
Date: 2009-02-06 5:15:12 PM
Comment:
super work!

Title: Good work
Name: Muhsin
Date: 2009-02-04 5:09:07 AM
Comment:
Excellent tutorial for people who wants to understand how things work behind the scenes

Title: Excellent Effort
Name: Raghav Khunger
Date: 2009-01-30 7:59:03 AM
Comment:
This Is A Excellent Control .The Most Beautiful thing i like that everything is without postback.
The Sorting Criteria as well as Paging is without postback.
U have Given windows programming like feeling.Wow!
Excellent.....

Title: RE: Why Should I use this way ?!!
Name: Mudassar Khan
Date: 2009-01-30 3:54:35 AM
Comment:
Reasons
1. Learn what goes behind the scenes in these controls
2. Customization - I can customize the grid as I want.
3. Also a brief idea on how to do the same using Javascript.

Title: Why Should I use this way ?!!
Name: .NET Developer
Date: 2009-01-30 3:23:42 AM
Comment:
really nice code, but why should we use that? we already have a gridview and ajax extensions!
In visual studio 2008, we have a new DataBound control called "ListView" and "DataPager" will do the work of this articel without the need to write any bit of code!