Generic XSLT Template

Just feed it the data, and transform. The xml format is semi-specific, but could probably be genericized even more.

<xmp>
<xsl:stylesheet version = '1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>

<xsl:template match="/">
<!--
GENERIC ActiveWidgets grid
DESC: displays a data grid of any number of columns and rows
Column names are based on the child of DATA/ITEM node names
IN: XML of form:
<DATA>
<ITEM><col_1>value</col_1><col_2>value</col_2>...<col_n>value</col_n></ITEM>
<ITEM>...</ITEM>
</DATA>
OUT: ActiveWidgets grid with column names of col_1 thru col_n, rows equal to number of ITEMS
CHAGELOG:
1/21/2004 8:51 AM - BKP - Created
-->

<!-- ActiveWidgets stylesheet and scripts ( Change to suit your path )-->
<link href="/include/activeui/runtime/classic/activeui.css" rel="stylesheet" type="text/css"></link>
<script src="/include/activeui/runtime/activeui.js"></script>

<!-- STYLE SHEET FOR THE GRID -->
<style>
<![CDATA[
.active-controls-grid {height: 400px; width: 100%; font: menu;}

.active-column-0 { text-align: right;}
.active-column-1 { text-align: right;}
.active-column-2 { text-align: right;}
.active-column-3 { text-align: right;}
.active-column-4 { text-align: right;}
.active-column-5 { text-align: right;}
.active-column-6 { text-align: right;}

.active-scroll-space {width: 0px!important;}

.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
]]>
</style>


<!-- THE ACTUAL GRID JAVASCRIPT -->
<script language="javascript">
<![CDATA[
// START OF DATA ARRAY
var myData = [
]]>
<!-- Print out the contents of each row -->
<xsl:for-each select="/DATA/*">
[<xsl:call-template name="print"/>],
</xsl:for-each>
<![CDATA[
];
// END OF DATA ARRAY

// START OF COLUMN ARRAY
var myColumns = [
]]>
<!-- Print out the table column headers -->
<xsl:for-each select="DATA/ITEM[last()]/child::*">
"<xsl:value-of select="name()"/>",
</xsl:for-each>
<![CDATA[
];
// END OF COLUMN ARRAY

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowCount( ]]><xsl:value-of select="count(DATA/ITEM)"/><![CDATA[);
obj.setColumnCount( ]]><xsl:value-of select="count(child::DATA/ITEM[position()=1]/*)"/><![CDATA[);

// provide cells and headers text
obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("0px");
obj.setColumnHeaderHeight("20px");

// set click action handler
obj.setAction("click", function(src){window.status = src.getProperty("item/text")});

// set click action handler
//obj.setAction("ondblclick", printRowData);
var row = obj.getTemplate("row");
row.setEvent("ondblclick", function(){this.action("myAction")});
obj.setAction("myAction", function(src){printRowData(src)});

// write grid html to the page
document.write(obj);
setTimeout('obj.refresh()', 0);
]]>
</script>

</xsl:template>

<!-- Print out the contents of each column -->
<xsl:template name="print">
<xsl:for-each select="child::*">"<xsl:value-of select="."/>",</xsl:for-each>
</xsl:template>

</xsl:stylesheet>
</xmp>

Hi Brian,

thanks a lot for your example! It's definitely very useful. Quite amazing to see that this sort of dynamic display is actually produced by XSLT!