7 simple steps to ajax-enable your ASP GridView

I recently used the AJAX.NET framework in a project and I was impressed with how easy it was to implement and how much it improved the usability of our pages.  Our project had quite a few advanced search pages where users can enter in a number of different filters and then hit the search button (usually iteratively - filter/search; filter/search; etc...).  Before the Ajax framework and Ajax Control Toolkit were applied to the pages, each time the user would tweak a filter or request a different column sort, the complete page would refresh.  After adding Ajax to the pages, just the GridView is re-rendered giving the user the much nicer web 2.0 user experience.  Anyway, here are the steps I followed for adding these features to our project ...

Download code | View live demo

kick it on DotNetKicks.com

Step 1: Download and install the official ASP.NET Ajax Framework

Microsoft released the RTM version of the Ajax framework (previously named Atlas) for .Net 2.0 a few months ago. You can download from http://ajax.asp.net/. The installation is straight forward, but in case you get lost they also provide a video that walks you through the process.

Step 2: Download and install the ajax control toolkit

The toolkit consists of a collection of community developed controls that provide extensions (mostly client side) to the existing controls. The project was started by a group of Microsoft developers, but has since moved to Microsoft’s open source project page (codeplex) and is now community owned. The download is just a zip file so you can unpack it to whatever location you want. Part of the toolkit includes a showcase website that contains interactive pages that you can use to play with the different controls - it is identical to the 'live' demo of the controls that is available at http://ajax.asp.net/ajaxtoolkit/

Step 3: Add the Ajax entries to your web sites web.config

This is the messiest step. Before you can leverage the Ajax features, you have to add a number of entries to you web.config. I have found the easiest way to do this is to start from a template version of the web.config and then add in any additional settings that are specific to your application. To obtain a template version of the web.config you can navigate to the installation directory of the ASP.NET Ajax Framework (it is located at C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025 on my machine) and use this as your template.   Alternatively, if you are building a new site from scratch you can create a new Web Site based on the ASP.NET Ajax-Enabled Web Site template that is installed as part of Step 1. This will automatically add the required settings into the web.config

Step 4: Add a reference to the AjaxControlToolkit.dll to your web site

1. Create a new tab in the designer toolbox by right clicking and selecting 'Add Tab'.  Name the tab ‘Ajax Toolkit’

2. Right click anywhere in the ‘Ajax Toolkit’ tab and select the ‘Choose Items …’ option

3. Go to the SampleWebSite\bin lder contained in the root folder from where the Ajax Control Toolkit was unzipped to and select the AjaxControlToolkit.dll

After you complete these steps, your toolbox should be populated with the control extensions.

Step 5: Add the GridView

Now you just build a GridView just like normal. In my sample application, I have a single page that looks up OrderDetails from the northwind database using an order id.

Step 6: Add the Ajax.NET components to the page

Now we just need to add the last bit of plumbing. The Ajax framework requires all Ajax enabled pages to contain a ScriptManager. You can drag this item onto the page from the toolbox.

Finally – some fun; partial page rendering (i.e. refreshing the data in our GridView without rerendering the entire page). The Ajax framework requires a couple pieces of information before you can start using partial page rendering.

It needs to know 

  • The section of the page requires the partial rendering (i.e. our GridView)
  • The events cause this section to be re-rendered

You declaratively tell the Ajax framework both of these items. You place the contents you would like refreshed inside the ContentTemplate of the ASP UpdatePanel control. You also tell the UpdatePanel what triggers the refresh. In our example, clicking the btnFindOrder causes the GridView to rerender, so we tell the UpdatePanel that the GridView needs to be redrawn whenever the ‘Click’ server side event of the btnFindOrder control is fired.

Step 7: Add an animation extender

While this alone is pretty cool, it gets even better with the UpdatePanelAnimationExtender. A usability issue with the approach above is that the user has no way of knowing that anything is happening which the round-trip is being made back to the server to retrieve the Order information. In some scenarios this may be OK, but if the operation takes longer than a few seconds, it is nice to give the user some visual cues as to what is happening. (If you are running this example at home, try placing a call to Thread.Sleep in the BtnFindOrders_Click)

This issue can easily be overcome by using the UpdatePanelAnimationExtender provided by the AjaxControlToolkit.  We will configure this extender do the following:

  • Disable the btnFindOrder button while the operation is in progress
  • Fade out the GridView while the search is in progess

To enable this functionality

  • Drag the UpdatePanelAnimatorExtender control from the toolbox onto the page
  • Set the TargetControlID to the ID of the UpdatePanel you created earlier (udpOrderDetails for the running example)
  • Add the Animation nodes as follows in the markup below
    • We are telling the extender to disable and fade-out the btnFindOrder while the panel is updated and re-enable and fade-in when it has finished

Thats it.  Your pages are now ready to be ajax-enabled.


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/16

Listed below are links to weblogs that reference 7 simple steps to ajax-enable your ASP GridView:

» 7 simple steps to ajax-enable your ASP GridView from DotNetKicks.com
You've been kicked (a good thing) - Trackback from DotNetKicks.com [Read More]

Comments


USEFUL POST :)

I really liked this article. This is my first time using this website. I usually use codeproject and kynou.com. Codeproject has some cool article about ajax-enabled gridview and kynou.com has a walkthough tutorial about ajax-enabled gridview.

Be careful not to confuse ASP.NET AJAX with Ajax.NET which came first. As I was reading I thought you were somehow mixing the 2 solutions.

http://ajax.schwarz-interactive.de/CSharpSample/

Hi all!
Looks good! Very useful, good stuff. Good resources here. Thanks much!
Gnight

Posted by: govokinolij on July 13, 2007 12:00 AM

Hello
Looks good! Very useful, good stuff. Good resources here. Thanks much!
Gnight

Posted by: Boulos on August 1, 2007 12:00 AM

The live demo does not appear to work well on IE7 running under XP SP2 (it does not fade the GridView etc...). It sure looks great on IE7 running under Vista. Any ideas?

Posted by: Anonymous on August 22, 2007 12:00 AM

Hi all!
This is one of the best sites I have ever found. Very nice and informal.

Posted by: Deepak P. Jethani on August 22, 2007 12:00 AM

Nothing much to read here

Posted by: Luke Zhang on September 14, 2007 12:00 AM

UpdatePanel doesnt really work well for the GridView which has many rows and columns. It has the performanace issue when rendering html after getting the updated content back. Try wrapping a GridView with 50 rows and 10 columns.

Posted by: Adisa Akindapo on October 23, 2007 12:00 AM

Nice work here . Concept of plug and play fully understand.
As the jamaicans say "Big UP"

Posted by: jayakrishnan.v.g on November 10, 2007 12:00 AM

Hi ,
It is a great site , i was having a bottle neck in my project with clientid of textbox inside the gridveiw , with the help of this site i was able to overcome that i am really thank full that , i have decided that i will too contribute something to this blog
with regards
jayakrishnan.v.g

Posted by: Tyson Hansen on November 27, 2007 12:00 AM

Awesome! I have a GridView that can have upwards of 100+ rows, with 7 or 8 columns, and the animation is exactly what I needed to let the user know that something is happening.

good , theres also a video from scott guthrie from microsoft at www.asp.net, explaining thata, but this is better because you adds some animations states in the refreshing of the gridview.

good , theres also a video from scott guthrie from microsoft at www.asp.net, explaining thata, but this is better because you adds some animations states in the refreshing of the gridview.

Posted by: SirReadalot on January 30, 2008 12:00 AM

Hi,
Nice example. I was wondering how do you add a message when a record is not found?

thanks

Posted by: Deepak Sharma on March 29, 2008 12:00 AM

Hey Matt Berseth,

Thnks a ton buddy...u made AJAX vry easy n clear with ur article....I was searching smthn lk this for hours...

Thanks again
Deepak

Posted by: praveent on May 22, 2008 12:00 AM

i use a checkbox field in gridview with client side check all checkbox(header check box) option. i have five such grids on my page. no of rows might run into 10 to few hundreds. check-all check box is not working with all the grids now after ajaxfying the grid.
it checks some check boxes but not all.clientIds are not rendering completely please give me a solution to over come it.

Posted by: OutOfTouch on May 27, 2008 12:00 AM

When I do the update with a button my grid is taking on the background color of the body after the partial page update. I didnt style the grid at all is this why?

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • OutOfTouch wrote: When I do the update with a button my grid is taking on the background color of the body after the p...
  • praveent wrote: i use a checkbox field in gridview with client side check all checkbox(header check box) option. i h...
  • Deepak Sharma wrote: Hey Matt Berseth, Thnks a ton buddy...u made AJAX vry easy n clear with ur article....I was searchi...
  • SirReadalot wrote: Hi, Nice example. I was wondering how do you add a message when a record is not found? thanks ...
  • Arturo wrote: good , theres also a video from scott guthrie from microsoft at www.asp.net, explaining thata, b...
  • Arturo wrote: good , theres also a video from scott guthrie from microsoft at www.asp.net, explaining thata, b...
  • Tyson Hansen wrote: Awesome! I have a GridView that can have upwards of 100+ rows, with 7 or 8 columns, and the animatio...
  • jayakrishnan.v.g wrote: Hi , It is a great site , i was having a bottle neck in my project with clientid of textbox inside t...