3.2.0

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>
Brian
January 21,
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!
Alex (ActiveWidgets)
January 21,

This topic is archived.

See also:


Back to support forum