Example using recordset XML output (MS diffgram format)

Here is an example for 2.0b1 how to display the XML output from ADO recordset in MS diffgram format. The XML usually looks like this:

<?xml version="1.0"?>

<DataSet xmlns="http://tempuri.org/">

  <xs:schema id="NewDataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">

    <xs:element name="NewDataSet" msdata:IsDataSet="true">

      <xs:complexType>

        <xs:choice maxOccurs="unbounded">

          <xs:element name="Table">

            <xs:complexType>

              <xs:sequence>

                <xs:element name="ticker" type="xs:string" minOccurs="0" />

                <xs:element name="name" type="xs:string" minOccurs="0" />

                <xs:element name="mktcap" type="xs:double" minOccurs="0" />

                <xs:element name="sales" type="xs:double" minOccurs="0" />

                <xs:element name="employees" type="xs:double" minOccurs="0" />

                <xs:element name="timestamp" type="xs:dateTime" minOccurs="0" />

              </xs:sequence>

            </xs:complexType>

          </xs:element>

        </xs:choice>

      </xs:complexType>

    </xs:element>

  </xs:schema>

  <diffgr:diffgram xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" xmlns:diffgr="urn:schemas-microsoft-com:xml-diffgram-v1">

    <NewDataSet xmlns="">

      <Table diffgr:id="Table1" msdata:rowOrder="0">

        <ticker>MSFT</ticker>

        <name>Microsoft Corporation</name>

        <mktcap>314571.16</mktcap>

        <sales>32187</sales>

        <employees>55000</employees>

        <timestamp>2003-11-27T00:00:00.0000000+01:00</timestamp>

      </Table>

      <Table diffgr:id="Table2" msdata:rowOrder="1">

        <ticker>ORCL</ticker>

        <name>Oracle Corporation</name>

        <mktcap>62615.27</mktcap>

        <sales>9519</sales>

        <employees>40650</employees>

        <timestamp>2003-11-27T00:00:00.0000000+01:00</timestamp>

      </Table>

      <Table diffgr:id="Table3" msdata:rowOrder="2">

        <ticker>SAP</ticker>

        <name>SAP AG (ADR)</name>

        <mktcap>40986.33</mktcap>

        <sales>8296.42</sales>

        <employees>28961</employees>

        <timestamp>2003-11-27T00:00:00.0000000+01:00</timestamp>

      </Table>

      <Table diffgr:id="Table4" msdata:rowOrder="3">

        <ticker>CA</ticker>

        <name>Computer Associates Inter</name>

        <mktcap>15606.34</mktcap>

        <sales>3164</sales>

        <employees>16000</employees>

        <timestamp>2003-11-27T00:00:00.0000000+01:00</timestamp>

      </Table>

      <Table diffgr:id="Table5" msdata:rowOrder="4">

        <ticker>ERTS</ticker>

        <name>Electronic Arts Inc.</name>

        <mktcap>14490.9</mktcap>

        <sales>2503.73</sales>

        <employees>4000</employees>

        <timestamp>2003-11-27T00:00:00.0000000+01:00</timestamp>

      </Table>

    </NewDataSet>

  </diffgr:diffgram>

</DataSet>

The only thing necessary to display this format in a AW grid is specifying XPath to data rows:

table.setRows("//NewDataSet/*");

Here is the full code:

<html>

<head>

    <title>ActiveWidgets Grid :: Examples</title>

    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>



    <!-- ActiveWidgets stylesheet and scripts -->

    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>

    <script src="../../runtime/lib/aw.js"></script>



    <!-- grid format -->

    <style>

        .aw-grid-control {height: 100%; width: 100%; border: none; font: menu;}



        .aw-column-0 {width:  80px;}

        .aw-column-1 {width: 200px; background-color: threedlightshadow;}

        .aw-column-2 {text-align: right;}

        .aw-column-3 {text-align: right;}

        .aw-column-4 {text-align: right;}

        .aw-column-5 {text-align: right;}



        .aw-grid-cell {border-right: 1px solid threedshadow;}

        .aw-grid-row {border-bottom: 1px solid threedlightshadow;}

    </style>

</head>

<body>

    <script>



    //	create data formats

    var string = new AW.Formats.String;

    var number1 = new AW.Formats.Number;

    var number2 = new AW.Formats.Number;

    var date = new AW.Formats.Date;



    //	define formatting rule for text output

    number1.setTextFormat("#,###.##");

    number2.setTextFormat("");



    date.setTextFormat("dd mmm yy");

    date.setDataFormat("ISO8061"); //should be ISO8601



    //	create ActiveWidgets data model - XML-based table

    var table = new AW.XML.Table;



    //	fix for format index bug in 2.0b1

    table.getText = function(i, j){

        var node = this.getNode(i, j);

        var data = node ? node.text : "";

        var format = this._formats[i];

        return format ? format.dataToText(data) : data;

    };



    //	provide data URL

    table.setURL("../data/companies-dataset.xml");



    //	set rows XPath

    table.setRows("//NewDataSet/*");



    //	set columns XPath

    table.setColumns(["ticker", "name", "mktcap", "sales", "employees", "timestamp"]);



    //	set column formatting

    table.setFormats([string, string, number1, number1, number2, date]);



    //	start asyncronous data retrieval

    table.request();



    //	define column labels

    var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees", "Date"];



    //	create ActiveWidgets Grid javascript object

    var obj = new AW.UI.Grid;



    obj.setColumnCount(6);



    //	provide column labels

    obj.setHeaderText(columns);



    //	enable row selectors

    obj.setSelectorVisible(true);

    obj.setSelectorText(function(i){return this.getRowPosition(i)});

    obj.setSelectorWidth(25);



    //	set row selection

    obj.setSelectionMode("single-row");



    //	provide external model as a grid data source

    obj.setCellModel(table);



    //	write grid html to the page

    document.write(obj);



    </script>

</body>

</html>

Forum search