Click here to Skip to main content
Click here to Skip to main content
Go to top

Client side data binding using xsl

, 5 Aug 2006
Rate this:
Please Sign up or sign in to vote.
An article on client side data binding and performing a sort using xsl available at client

Introduction

AJAX a new buzz is used for developing a rich client and highly responsive web application.Data handling is an important parameter in UI.Sorting as such will be common operation which would be needed most of the time in all application.User can see the data in the way they want.

Consider an example of a customer data that is to be displayed in UI in a grid.User would need to sort the data everytime he wants.The occurence of sort operation can be frequent.All the data are available through a Ajax call as xml that is available from a Web application or from a Web service, it would be really meaningless to hit the Web application/Webservice each time the user performs the sort operation.That sounds really costly isn't it ? . So server side data binding could be replaced by a client side databinding.

Pseudo

1.Load the xml data into client and cache as xml doc.
2.Load the xsl into client and cache the same as xsl doc.
3.Generate the html by tranforming the xsl and xml doc.
  Now user clicks on header to sort on that column...
4.Inject some data into the xsl doc using javascript to make a sort on the user selected column.(client side operation)

Client XML

The Customer xml produced either from a Webservice or a Web application


<NewDataSet>

  <Table>

    <CustomerID>ALFKI</CustomerID>

    <CompanyName>Alfreds Futterkiste</CompanyName>

    <ContactName>Maria Anders</ContactName>

    <ContactTitle>Sales Representative</ContactTitle>

    <Address>Obere Str. 57</Address>

    <City>Berlin</City>

    <PostalCode>12209</PostalCode>

    <Country>Germany</Country>

    <Phone>030-0074321</Phone>

    <Fax>030-0076545</Fax>

  </Table>

  ........

</NewDataSet>

The xml from the server is loaded in to the client xml doc.Also the same procedure is followed for the xsl too.
    if (customer_xml == null)
    {
        customer_xml = Loadxmlorxsl('customers.xml');    
    }
    
    if (customer_xsl == null)
    {
        customer_xsl = Loadxmlorxsl('customers.xslt');    
        
    }    

The customers.xml and customers.xsl can be replaced by the URL of the web application or a web service.This now completes the first two steps of the pseudo.The sample xml and xsl are available in the zip file.Once the docs are loaded then can be transformed to generate the html since the xsl has the logic to do so.

    document.all["customercontent"].innerHTML = customer_xml.transformNode(customer_xsl);

Sorting

How do we really manage with the xml and xsl available now in client as xml doc to perform sorting rather to depend on data miles apart ? . I would never say it is that difficult after i know , how this is to be done.The xsl file has a <xsl:param> for accepting the sort key and sort order (ascending or descending).The logic to sort the data based on the sort key and sort order is all packed in the xsl.Each time user clicks on header to sort, just have to call the javascript function Sort()."customer_xsl.getElementsByTagName("xsl:param")[0].text".These lines just inject the sort key and sort order in the xsl doc using Javascript, remember they are never saved in the server, we just play around only with the client xsl document.So when user makes a fresh search of data, with different parameters, we just need to get the xml data alone avoiding the xsl.So the sort order and sort column still maintains for a fresh search.

function Sort(column)
{    
    
    if (document.getElementById(column).value == 'ASC')
        document.getElementById(column).value = 'DESC'
    else
        document.getElementById(column).value = 'ASC'
                
    customer_xsl.getElementsByTagName("xsl:param")[0].text = column;
    customer_xsl.getElementsByTagName("xsl:param")[1].text = document.getElementById(column).value;
    document.all["customercontent"].innerHTML = customer_xml.transformNode(customer_xsl);
}

Possible extenstions

Filter is also common to sorting, still same data injection to xsl would be needed, also you are most welcome to insert data to any tags in xsl using something like customer_xsl.getElementsByTagName("xsl:apply-templates") for example.Also all the xpath queries we do with xml are possible with xsl.

Hope this article would be useful for those who wish to do a kind of client side data binding and sorting esp.

Note

Strictly will work with IE and needs ActiveXObject "Microsoft.XMLDOM"

History

August 06 2006 - Initial submission.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Subhash Balachandran
Web Developer
Singapore Singapore
"Just began to think in patterns" - Zuboss

Comments and Discussions

 
JokeAJAX a new buzz !!! PinmemberNagaraj Muthuchamy20-Feb-09 0:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140922.1 | Last Updated 5 Aug 2006
Article Copyright 2006 by Subhash Balachandran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid