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 2 of 9

by Mudassar Ahmed Khan
Feedback

Average Rating:

Views (Total / Last 10 Days): 43228/ 180

Article Contents:

Creating the HTML Table

Now we will create the structure of the Grid. We will start with the Header of the Grid.

Note that I have already created a CSS File which you will find the same in the sample code.

Listing 2

<div id = "dvHeader">
<table id = 'tblHeader' cellpadding = "0" cellspacing = "0"   width = '800px'>
<tr class = 'header'>
<td class = "headercell">Customer ID</td>
<td class = "headercell">Company Name</td>
<td class = "headercell">Contact Name</td>
<td class = "headercell">Contact Title</td>
<td class = "headercell">City</td>
</tr>
</table>
</div>

Then we will create the div with runat = "server" tag which will act as content. The runat = "server" tag will allow the div to be accessed server side. Since first time when the page loads the HTML markup will be binded using the innerHTML property of DIV.

Listing 3

<div id = "dvContent" runat ="server" >
</div>

Finally, the third and the last part will act as a Pager for the Grid.

Listing 4

<div id = "dvPager" runat = "server" style =" text-align:right; width:800px" >
</div>

« (Page 1)

View Entire Article

(Page 3) »

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!