3.2.0

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>


Alex (ActiveWidgets)
October 20,

This topic is archived.

See also:


Back to support forum