:: Forum >> Version 2 >>

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>
    <
stylebodyhtml {margin:0pxpadding0pxoverflowhidden;} </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 {height100%; width100%; bordernonefontmenu;}

        .
aw-column-{width:  80px;}
        .
aw-column-{width200pxbackground-colorthreedlightshadow;}
        .
aw-column-{text-alignright;}
        .
aw-column-{text-alignright;}
        .
aw-column-{text-alignright;}
        .
aw-column-{text-alignright;}

        .
aw-grid-cell {border-right1px solid threedshadow;}
        .
aw-grid-row {border-bottom1px 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(ij){
        var 
node this.getNode(ij);
        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([stringstringnumber1number1number2date]);

    
//    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)
Thursday, October 20, 2005



This topic is archived.

Back to support forum

Forum search