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.Object, ByVal 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.