Building a Custom ASP.NET Ajax Enabled Grid Using JavaScript
page 7 of 9
by Mudassar Ahmed Khan
Feedback
Average Rating: 
Views (Total / Last 10 Days): 46219/ 102

Client Side Scripting for the Grid

Now I will discuss the Client Side functionality on the Grid which allows it to make AJAX Calls to the server.

The function below is used to send an Asynchronous Request to the page using XMLHttpRequest Object. The function state_Change is called as soon as the onreadystatechange of the XMLHttpRequest object is fired meaning the object is ready to receive data. The complete function is given below.

Listing 12

function ReloadData(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
      {// code for all new browsers
          xmlhttp=new XMLHttpRequest();
      }
      else if (window.ActiveXObject)
      {// code for IE5 and IE6
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (xmlhttp!=null)
      {
          xmlhttp.onreadystatechange=state_Change;
          xmlhttp.open("GET",url,true);
          xmlhttp.send(null);
      }
      else
      {
          alert("Your browser does not support XMLHTTP.");
      }
}

The state_Change function verifies that the request is loaded without any errors. If everything is fine, it calls the ParseXML function which parses the XML Reponse received.

Listing 13

function state_Change()
{
    if (xmlhttp.readyState==4)
    {// 4 = "loaded"
      if (xmlhttp.status==200)
      {// 200 = OK
            ParseXML(xmlhttp.responseXML.documentElement);
      }
      else
      {
            alert("Problem retrieving XML data");
      }
    }         
}

The ParseXML function, as the name suggests, parses the XML received from the server.

As you can see, it checks the tags and then extracts the data using the GetNodeData function.

The ERROR Tag has value when some exceptions occurs on server side. If an error occurs, the Error Message is displayed in the Error Label lblError.

Listing 14

function ParseXML(xml)
{
  
    if (xml!=null)
    {
   
       var Error = xml.getElementsByTagName('ERROR')[0];
       
       if (Error == null || GetNodeData(Error) == "False")
       {
             //alert(Grid);
            var Pager = xml.getElementsByTagName('PAGER')[0];
            var Grid = xml.getElementsByTagName('GRID')[0];
            if (Grid != null && Pager!= null)
            {
                //alert(Grid);
              document.getElementById ("dvContent").innerHTML=GetNodeData(Grid);
              document.getElementById ("dvPager").innerHTML=GetNodeData(Pager);
 
            }
     }
     else
     {
       document.getElementById ("lblError").innerText = GetNodeData(Error);
     }
    }
}
function GetNodeData(node)
{
    return (node.textContent || node.innerText || node.text) ;
}

Now I will explain how the paging and sorting requests are prepared. When you click on the pager hyperlink the PrepareRequest function prepares the URL by attaching the following query string parameters.

1) SortBy

2) SortOrder

3) Page

4) PageSet

And finally it calls the ReloadData function and passes the prepared URL to it.

Listing 15

function PrepareRequest(Page, PageSet)
{
    var ddlSort = document.getElementById("ddlSort");
    var ddlSortOrder = document.getElementById("ddlSortOrder");
    if (ddlSort.options[ddlSort.selectedIndex].value == "")
    {
        ddlSortOrder.options[0].selected = true;
        ddlSortOrder.disabled = true;
    }
    else
    {
        ddlSortOrder.disabled = false;
    }
var url = "Default.aspx?SortBy=" + ddlSort.options[ddlSort.selectedIndex].value + _
"&SortOrder=" + ddlSortOrder.options[ddlSortOrder.selectedIndex].value + "&Page=" _
 + Page + "&PageSet=" + PageSet;
ReloadData(url); 

View Entire Article

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!






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


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-03-02 10:05:00 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search