Working with DataGrid Using AJAX
page 1 of 1
Published: 23 Feb 2006
Unedited - Community Contributed
Abstract
This article will explain how to populate the DataGrid control using AJAX. This will take a DropDownList as a source for explanation. For every index change of the DropDownList, the DataGrid contents will be refreshed accordingly using AJAX.
by Aravind Kumar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 80254/ 33

 

Introduction

Usually a DataGrid filling or update requires a postback to the server, but using AJAX we can fill the DataGrid contents without a form submit (refresh). In this article, you will learn how to achieve this functionality with the help of a DropDownList control through a sample application. Here we use a DropDownList which is filled with city values; upon changing the DropDownList value, we get the DataGrid filled with the data of authors from the city by using AJAX. This article will be useful for the people who have some basic knowledge about AJAX and who want to enrich that.

Since we are aware of basic AJAX functionality, we are moving a step further with this DataGrid example. I will mainly explain about how we send the request from the client, how it gets processed, and how the client script runs to display the data in the DataGrid.

Sample Application Structure

In our sample, we have two webforms (AjaxServer.aspx and DataGridEx.aspx), one javascript file, and one stylesheet(css file). While AjaxServer.aspx does the server functionality that returns the authors result upon selection, DataGridEx.aspx displays that result using AJAX.

Let's see how each entity works.

1. AjaxServer.aspx

This page gets the selected "City" choice as the request. It fetches all the authors who belong to that city and returns a Response XML string to the client as in Listing 1.

Listing 1 - AjaxSever.aspx.vb Code

Private Sub Page_Load(ByVal sender As System.ObjectByVal e As System.EventArgs) Handles MyBase.Load
  If Not IsPostBack Then
   choice = Request("Choice")
  If choice.Length > 0 Then
   Response.Clear()
  If choice = "All Cities" Then
   DA = New SqlDataAdapter("select * from authors", con)
  Else
   DA = New SqlDataAdapter("select * from authors where city ='" &
   Request("Choice") & "'", con)
  End If
   DA.Fill(ds)
   chString = ds.GetXml()
   Response.Clear()
   Response.ContentType = "text/xml"
   Response.Write(chString)
   Response.End()
  Else
   Response.Clear()
   Response.End()
  End If
  Else
   Response.Clear()
   Response.End()
  End If
End Sub

2. DataGridEx.aspx

This page initially shows all the author information in the DataGrid. Upon every change in the DropDownList, it fetches the content using the javascript file and shows it. For displaying the status of the "Running Process," we've used a panel here. The panel has a GIF image (initially invisible) that will be shown while the process is happening in the server, and will become invisible after the process is over (See Figure 1). This is just to make the user aware of the running process.

Figure 1 - Screenshot of DatagridEx.aspx(To show the Process)

3. Javascript File

This file handles the request and response of the entire process. This file will generate the XMLHttp request and send the city selected to the AjaxServer.aspx page. On return, it gets an output like a table that is to be filled up in the DataGrid.

Initially the panel that has the "Process" image is invisible. When the DropDownList gets changed, the "Process" image will be visible till the DataGrid gets filled up with the returned content (see Listing 2). The DataGrid is filled with the contents returned using a simple for loop that reads through the contents (see Listing 3).

Listing 2 - Process Status

function FetchDGContents()
{
  var selecteditem = document.Form1.ddlcity.value;
  imgtbl.style.visibility = 'visible';
  var requestUrl = AjaxServerPageName + "?Choice=" +
  encodeURIComponent(selecteditem);
  CreateXmlReq(); 
  if(XmlReq)
  {
   XmlReq.onreadystatechange = HandleResponse;
   XmlReq.open("GET", requestUrl, true);
   XmlReq.send();       
  }
}

Listing 3 - Filling the DataGrid with the Received Response

function FillTable(scity)
{
  var auth = scity.getElementsByTagName('Authors'); 
  var tbl = document.getElementById('dgauthors').getElementsByTagName("tbody")[0];
  for(var i=0;i<auth.context.childNodes(0).parentNode.childNodes.length;i++)
  {
   var row = document.createElement("TR"); 
   row.setAttribute("className","text");
   row.setAttribute("bgColor","#ECECEC");
  for(var j=0;j<auth.context.childNodes(0).childNodes.length;j++)
  {
   var cell = document.createElement("TD"); 
   cell.innerHTML = auth.context.childNodes(i).childNodes(j).text;
   row.appendChild(cell); 
  }
   tbl.appendChild(row)
  }
}

Running Sample Code

Download the sample and unzip it. Create a virtual directory with the name MyAjax and copy the zipfile contents to it. Open the solution and press F5 to see the output.

Summary

This article shows how to work with the DataGrid using AJAX to show the process status of the server call.



User Comments

Title: idb   
Name: rana
Date: 2012-11-12 4:22:39 AM
Comment:
nice example
Title: Working with DataGrid Using AJAX   
Name: vids
Date: 2011-01-02 6:16:12 AM
Comment:
I m working with datagrid,which is filled on radiobutton click..but if grid contains even no of record then it do not clear the table hence shows wrong record..what is the solution plz reply..
Title: IE working fine & Firefox and others it seems to be stupid   
Name: basakr
Date: 2010-02-24 2:38:37 AM
Comment:
It works with IE. If you run with Firefox you feel the programmer is stupid.
Title: code maniac   
Name: Lakshmipathi
Date: 2009-10-30 7:36:40 AM
Comment:
consider a case when i hav a datagrid and i need to generate the xml from Java script how can we do that?... simply can we generate the xml for datagrid how we do tat?
Title: code above   
Name: Yoshimitsu
Date: 2009-10-22 12:00:51 AM
Comment:
this code does not work in Firefox version 3.06. Says auth.context is not defined
Title: Populate Data grid using Ajax   
Name: Sunil Patil
Date: 2009-04-16 11:41:10 AM
Comment:
Good and simple.
Title: data grid for drop down list   
Name: raja prabu
Date: 2009-02-16 11:36:35 PM
Comment:
hai dude!
that code will getting error when i was run the downloaded file(myajax)....
this is my mail id rajaprabu84@gmail.com please guide me to learn ajax
Title: data grid for drop down list   
Name: muthu kumar
Date: 2009-02-09 7:57:26 AM
Comment:
hello friend,
you have written the code for the asp.net but i want the code for jsp and when i press the 't' district value in a drop down box . i want to display the 'thiruvallur','t' disrict values as data grid please help me thanks in advance
Title: Good   
Name: Ali
Date: 2008-12-16 10:26:49 PM
Comment:
I have been looking for something like this.
Title: Nice one   
Name: jagadesh
Date: 2008-10-16 2:23:45 AM
Comment:
Hi

It works perfectly for me. Thanks. i need to make one column as hyperlink to javascript function. can u give any suggestion for this
Title: Gud One!!!   
Name: Shiva Ramani
Date: 2008-03-20 2:56:01 AM
Comment:
An excellent article.
Title: Problem in Firefox browser   
Name: Jani Vishal
Date: 2008-02-29 1:05:16 AM
Comment:
Hi its nice example but it have a problem in Firefox browser so if you have other example then pls give.
Title: how to move datagrid rows up/down without refresh using ajax and save them later to the database   
Name: hrishikesh
Date: 2008-01-14 11:43:47 PM
Comment:
i want to move the datagrid rows up/down using javascript or ajax and incorporate the same changes to the server when i click a save button finally
hrushikesh.mahapatra@gmail.com
Title: getting error   
Name: sunil rajak
Date: 2008-01-02 1:59:06 AM
Comment:
the concept is good but when i tried it gives me error telling that integrated windows authentication is not enabled,but when i see the status of internet explorer,it is already enabled.
Title: Ajax   
Name: Moahemed siddic
Date: 2007-09-22 4:55:56 AM
Comment:
Ya its good , i want this code in onkeypress event..
Title: Cool   
Name: Amadore
Date: 2007-09-05 5:04:14 AM
Comment:
I'm working on it.
Title: NICE EXAMPLE   
Name: Vinay Singh
Date: 2007-08-03 2:16:57 AM
Comment:
ITS VERY NICE ARTICLE FOR BEGINNERS...
Title: very good   
Name: saji
Date: 2007-07-11 1:39:24 PM
Comment:
wonderfull, trying to impliment the paging also, please help me if possible
Title: Real good   
Name: Prabhat Joshi
Date: 2007-06-28 9:52:49 AM
Comment:
Hi, I found it good. I havenot tried it. But the concept seems to be good one.
I appreciate the idea.
Title: Good   
Name: Somnath S S (Bangalore)
Date: 2007-06-13 3:27:20 AM
Comment:
I changed this to c#, it works...
Title: How to call server side method   
Name: VIjil jones,India
Date: 2007-06-12 8:12:45 AM
Comment:
It is possible to call server side any one method
Title: Good   
Name: Ravi
Date: 2007-06-12 3:04:51 AM
Comment:
its very useful
Title: fill DataGrid using AJAX   
Name: manish buhecha(Ahmedabad,India)
Date: 2007-05-17 1:16:44 PM
Comment:
This is nice article. I get quick help from this.
Thanks
Title: Working with datagrid using AJAX   
Name: Moumita
Date: 2007-04-20 1:48:43 AM
Comment:
I tried implementing your example but it is not giving proper result.
Title: use of ajax with datagrid   
Name: ANISH
Date: 2007-04-11 4:24:38 AM
Comment:
Good But it can possible u can minimise the code of lines.
Title: How to refresh grid Using Ajax   
Name: Jvalant Patel
Date: 2007-04-05 4:40:33 AM
Comment:
How to refresh gridview while using Ajax.At Insert time grid on the same page cannot be refresh.Ok
Title: How To Sort DataGrid using Ajax?   
Name: Gyan
Date: 2007-03-28 4:25:13 AM
Comment:
I am using Asp.Net 1.1 DataGrid. and I want to implement column sorting in DataGrid using Ajax. How?
Title: Paging in Datagrid using ajax   
Name: Anju
Date: 2007-02-28 12:40:54 AM
Comment:
this article is good.i need paging with datagrid using ajax.
i referred some articles for that.that contains webservice concept to create that.But i don't want to use Webservice concept.
Title: how to clear the value of texbox using javascript   
Name: j,murillo
Date: 2007-02-22 2:10:57 AM
Comment:
how to clear the value of texbox using javascript inside of the asp:content in ASP.net?
Title: Getting an error   
Name: Mayank
Date: 2007-02-21 10:41:28 PM
Comment:
I get an error "document.getElementById(..) is null or not an object" on the first line in the ClearTable() function.
Its not able to find the dgAuthors grid.

Please help. I'm using .net 1.1.
Title: Working with Datagrid using Ajax   
Name: Velu
Date: 2007-02-21 9:29:43 AM
Comment:
Hi Aravind,

Its a nice article to learn Ajax without postback the data using Datagrid.

Gr8 Keep it up.

Velu
Title: Error   
Name: Alex
Date: 2007-02-14 8:28:29 PM
Comment:
Very good idea, but error raised when rows of table deleted, something about the invalid index.

Please advise
Title: Can we edit the items in the grid   
Name: Milind Gaikwad
Date: 2007-02-07 4:22:46 AM
Comment:
Hi,
Your grid is very good. But i want to ask can we use same grid to edit the items in the grid using ajax.
For example if i want to edit or add the new city information, is it possiable,
Please do let me know
MY EMAIL id - gaikwad.milind@gmail.com
Title: Thanks   
Name: Archie
Date: 2007-02-01 1:27:11 AM
Comment:
Thanks dude for this very helpful article, it help understand the core of ajax. ciao!
Title: thanks   
Name: Arun kumar Tiwary
Date: 2007-01-30 1:33:37 AM
Comment:
thanks but i want to edit datagrid
Title: AJax Learner   
Name: Madhusudhan N
Date: 2007-01-29 7:00:14 AM
Comment:
Good article. it helped me lot.... thanks u very much
Title: Ajax is Good   
Name: Ajax Developer
Date: 2007-01-22 7:58:09 AM
Comment:
I have been creating a small application when I got stuck, when I was asked to use AJAX for updating a DataGrid with AJAX.

Thanks to you guys, I am very satisfied with this article. 10 stars for you. Here are my views about Ajax - http://www.aakashjain.com/What+Is+AJAX+How+Does+It+Works.aspx

Do check it out

Thanks ASP Alliance
Title: Working with AJAX   
Name: Sushil
Date: 2007-01-16 7:23:25 AM
Comment:
Really helpful example.
The comments helped a lot to understand the code.
Keep it up!!
waiting for more articles.....SOON
Title: Working with DataGrid Using AJAX   
Name: Ashish
Date: 2007-01-15 12:50:32 AM
Comment:
Thanks Arvind,
Really a very good stff for me as I have just started working on Ajax
Title: Ajax to fill dataGrid without postback   
Name: Krishan Murari
Date: 2007-01-11 7:02:53 AM
Comment:
Its really Very great experince to work with it.
Title: Good One!!   
Name: Rujuta
Date: 2007-01-10 7:59:39 AM
Comment:
Hi Arvind!!

Its really a useful one....i integrated the code in my project and my PL is so happy for that ....so thanx a lot ...............
Title: Damn Neat!!!   
Name: Vibhu Bansal
Date: 2007-01-09 2:56:16 AM
Comment:
This is one useful code that has been found that demonstrates the power of AJAX in datagrid
Title: About ajax Data Gried - Very nice artical   
Name: Jaimeen Modi
Date: 2007-01-05 2:13:02 AM
Comment:
thanks body,

i like yr artical very much.
yr artical is in a vb but i have successfully convert it int to a c#.
now my gried is successfully work on base of yr code.
thanks again.
Title: Mr   
Name: Sanp
Date: 2006-12-29 5:27:38 PM
Comment:
How can one implement updates via the datagrid and update them asychronously using XMLHTTP any thoughts on that
Title: Data Grid Problem   
Name: om prakash gupta
Date: 2006-12-18 6:48:03 AM
Comment:
Hi My name is om prakash gupta .i am Software Engineer. it give a error on clear a table .so pls help me
Title: Its very cool solution   
Name: Naushad
Date: 2006-12-13 6:54:02 AM
Comment:
This is really a great article.We dont need to postback form.Its really a magic in web based application
Title: allow paging and templete col   
Name: nitin
Date: 2006-12-01 2:35:16 AM
Comment:
hi,
its's good use of ajax
i have tried it but i have some problem which i mention under
when first time my grid is load then it apperas as per my settings like i have given paging, added templete column and in templete column i have used check box but when grid fill with ajax this all settings are removed.
Title: Excellent   
Name: Ganesh
Date: 2006-11-20 6:56:22 PM
Comment:
Arvind, that was a good example.
Thanks
Title: working with the dropdownlist of datagrid   
Name: Tanushree
Date: 2006-11-09 11:38:20 PM
Comment:
It's nice.Plz help me, my problem is that there is one dropdownlist and a lebal in datagrid.And the label value is depend upon the dropdown value from database .if the dropdown value is change then label value is automatically cahnged at run time. It's Urgent.
Title: Good Article But   
Name: Jaspal Singh
Date: 2006-11-06 1:59:10 AM
Comment:
Your article is very very good but i want Paging and Sorting in datagrid using Ajax Pls help me.
Title: ajax   
Name: abc
Date: 2006-11-04 7:43:10 AM
Comment:
Thank you for the response.
I've tried to enter data using a text box and update the data in one of the rows or rather add a new row to the table.

on trying that
I'm getting onto the error "there was a problem retrieving the data from the server"

tried using sqlcommand and everyother alternative.

can you please help me anyway that I can update the table with a new row or updating the existing row with out an autopostback
Title: AJAX Datagrid   
Name: Jacob Mathew
Date: 2006-09-27 6:42:40 AM
Comment:
This is very good example and thanks to Arvind Kumar.
Title: AJAX Datagrid   
Name: Jacob Mathew
Date: 2006-09-27 6:40:45 AM
Comment:
It a very good Excercise to learn the Ajax funda and the logic behind it
Title: good   
Name: javvadisreenu
Date: 2006-09-26 2:25:38 AM
Comment:
This is good for ajax in asp.net
Thank's for Aravind Kumar
Title: Thanks   
Name: Good Article
Date: 2006-09-25 11:13:21 AM
Comment:
Thanks
Title: Working with DataGrid Using AJAX   
Name: rambabu
Date: 2006-09-19 8:54:08 AM
Comment:
This is very good example and thanks to Arvind Kumar. But this is not working in other browsers like Netscape,Fireforx etc. I modified this example to work in all browsers (including Opera) and also i enhanced this application also to support stylesheets(i.e. alternteitems in the datagrid will be displayed with diffent colors using stylesheets). But i could'nt getting the sorting functionality(client side) in the datagrid. Could you/any body help me in this regard.

Rambabu
Title: very good example   
Name: trinh quang vinh
Date: 2006-09-15 2:32:10 AM
Comment:
Excellent Example!

But why it cann't browser in firefox 1.5.0.6. Please help me!
thanks.
My yahoo mail: vinh70k32368@yahoo.com
Title: In CSharp (C#)   
Name: Hany M. Magdy
Date: 2006-09-10 9:09:21 AM
Comment:
I need the code of MyAjax (Datagrid) in Csharp

my mail (hona7@hotmail.com)
Title: Good Aticle   
Name: Chandan
Date: 2006-09-08 7:23:22 AM
Comment:
Really good article for understanding the basics of AJAX
Title: Nice Article   
Name: sudha
Date: 2006-08-18 6:31:37 AM
Comment:
iam getting error in clear table.old values are retaining in the datagrid.please help me
Title: Not working in Firefox 1.5   
Name: tuannq
Date: 2006-07-18 1:09:46 PM
Comment:
This example not working in firefox 1.5. Aravind Kumar can be check section ???
Title: Good   
Name: Navaneeth
Date: 2006-07-13 5:03:56 AM
Comment:
hi man nice work..keep it up
Title: Thanks a Lot   
Name: Ramesh
Date: 2006-06-23 6:00:05 AM
Comment:
thanks aravind ji,

This is a good example with cool explanation for the learners thanks.
Title: Good Grid Example   
Name: Ravi
Date: 2006-06-15 7:48:03 AM
Comment:
Thanks boss excellent job , and a very simple apporach.
Title: Working with DataGrid Using AJAX   
Name: M.Seenuvsan
Date: 2006-06-12 6:20:20 AM
Comment:
Hi this artical is very usefull to solve my solution

Thanks.
Title: Filling the DataGrid with the Received Response   
Name: seenuvasan.m
Date: 2006-06-10 9:52:19 AM
Comment:
Its very good

Thanks
Title: Thank you very much sir   
Name: Ankur From India
Date: 2006-06-10 12:47:37 AM
Comment:
thank you sir, for the kind help this helpped me a lot we have a presenatation tommarrow and i m asked to make ajax grid today
Title: Working with DataGrid Using AJAX   
Name: Sathish
Date: 2006-06-06 1:42:51 PM
Comment:
you rock man.
Title: Working with DataGrid Using AJAX , Required enhancements   
Name: toqeer
Date: 2006-05-27 9:10:09 AM
Comment:
this is a good example, but me requirement is a bit more, i want editable, deleteable datagrid with ajax. and i have to add new row at run time in database.what should i do?
Title: cool   
Name: Mark Hendrickson
Date: 2006-05-08 6:11:00 PM
Comment:
great article. Very clear except it error out on ClearTable function when used with ANY other database. I am wondering if you could look into it.

- Mark
Title: Reply for Chuck - "How to add a new record to the existing table"   
Name: Aravind
Date: 2006-04-29 3:30:58 AM
Comment:
Dear Chuck,

If you want to add a new row to the table, you've to make the data stored in database first. So construct like this....have some textboxes to get the input..store it in database. For storing the input data & showing the new output, call the AJAX function and refresh the grid.

Hope this will work.

Thanks and Regards,
Aravind.
Title: how to add a new record to the existing table   
Name: Chuck
Date: 2006-04-27 2:49:45 PM
Comment:
dear aravind

Thank you for the response.
I've tried to enter data using a text box and update the data in one of the rows or rather add a new row to the table.

on trying that
I'm getting onto the error "there was a problem retrieving the data from the server"

tried using sqlcommand and everyother alternative.

can you please help me anyway that I can update the table with a new row or updating the existing row with out an autopostback

thank u in advance
chuck
Title: A sexy tutorial for beginners   
Name: Working with Datagrid using AJAX
Date: 2006-04-10 6:15:38 AM
Comment:
I loved this tutorila as I am beginner to AJAX and wanter to get started with. We do not find any article better than this, I Guess.
Title: Nice one......!   
Name: SelvamK
Date: 2006-04-08 7:43:54 AM
Comment:
This is one of the nice article ever i have read.....
Title: Reply for Chuck   
Name: Aravind
Date: 2006-03-31 6:05:44 AM
Comment:
Dear Chuck,
Thanks for the review.
Its easy to change the datagrid according to textbox input. Now we're using a javascript which calls the server and fills the datagrid on dropdown change event...now we've to change that to textbox blur event...thats it.

Hope I've answered your question.

Thanks and Regards,
Aravind
Title: any other situation using Text box in place of Dropdown   
Name: Chuck
Date: 2006-03-29 3:25:23 PM
Comment:
hey arvind kumar,
this is a very good example... but can you please also look into the aspect when we use textbox to input data and it fills into the datagrid

chuck
Title: One Question???   
Name: Williams Garcia
Date: 2006-03-27 4:03:26 PM
Comment:
Excellent Example!

But it wanted to know as I can use this Example with 3 Dropdownlist


I Like its collaboration ...
Title: Working with DataGrid Using AJAX   
Name: Adnan Hasan
Date: 2006-03-17 8:14:11 AM
Comment:
Very nice article. Keep it up man!
Title: software   
Name: GSM
Date: 2006-03-16 5:01:11 PM
Comment:
Instead of using dropdown for selection, if i use textbox to input and button to perform the action, the code is not working. The grid retaining the old Value
Title: Working with DataGrid Using AJAX   
Name: ajax learner
Date: 2006-03-14 2:09:40 AM
Comment:
it's really nice for people who have started learning AJAX.
Really thanks for it
Title: Good Article   
Name: Hewlett Packard
Date: 2006-03-04 7:11:24 AM
Comment:
VERY GOOD ARTICLE ARVIND Jalsa Karo
Title: Very Very Good Article   
Name: Suresh Alapati
Date: 2006-03-02 7:51:20 AM
Comment:
Actually I didn't expect this much of article avilable on the Net search.This article is very good one with good logic
I Thanks to Aravind Kumar
Title: Working with DataGrid Using AJAX   
Name: Magesh K
Date: 2006-02-23 6:20:21 AM
Comment:
This is really cool. Now we dont hav to worry about postbacks and wait to see the white blank screen.

Ajax with datagrid wud be really usefull caz, most ppl use grids to show their output and doing that stuff without a refresh and in a fraction of second is gr8.

Maggy






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-01-23 8:04:15 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search