Client side data binding using xsl

• Download source - 10 Kb

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

History