<html>
<head>
<title>ActiveWidgets Examples</title>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
.aw-alternate-even {background: #F5F5DC}
.aw-alternate-odd {background: #E1E1CA;}
.aw-mouseover-row {background: #F9F99C;}
</style>
<script>
var colsXPath = ["@checked","name","age","school","location"];
var rowsXPath = "//person";
var header = ["","name","age","school","location"];
var obj = new AW.UI.Grid;
var table = new AW.XML.Table;
var chkTemplate = new AW.Templates.Checkbox
function createGrid() {
obj.setHeaderText(header);
obj.setHeaderTemplate(chkTemplate, 0);
obj.setHeaderValue(true, 0);
obj.onHeaderValueChanged =
function(event,index){
if ( index == 0 ) {
selectAllRows(obj.getHeaderValue(index));
}
};
var chkBox = new AW.Templates.Checkbox;
obj.setCellTemplate(chkBox, 0);
var data = document.getElementById("dataIsland").value;
table.setColumns(colsXPath);
table.setRows(rowsXPath);
table.setXML(data);
table.setValue = function (value, col, row) {
var node = this.getNode(col,row);
if ( node != null ) {
node.value = value;
obj.setCellText(value,col,row);
}
};
obj.setColumnCount(5);
obj.setRowCount(table.getCount());
obj.setCellEditable(true);
obj.setCellModel(table);
var tdiv = document.getElementById("tableDiv");
tdiv.innerHTML = obj;
}
function selectAllRows(bSelect) {
var rows = obj.getRowCount();
var table = obj.getCellModel();
for (var i=0; i<rows; i++) {
table.setValue(bSelect, 0, i);
}
}
function showXML() {
alert(' changed XML ->'+obj.getCellModel().getXML().xml);
}
</script>
</head>
<body onload="createGrid()">
<div id="tableDiv" name="tableDiv"></div>
<div id="buttonDiv" name="buttonDiv">
<input type="button" id="showXML" name="showXML" value="Show XML" onclick="showXML();"/>
</div>
<input type="hidden" id='dataIsland' name='dataIsland' value="
<persons>
<person checked='false'>
<name>A</name>
<age>1</age>
<school>Aa</school>
<location>Aaa</location>
</person>
<person checked='false'>
<name>B</name>
<age>2</age>
<school>Bb</school>
<location>Bbb</location>
</person>
</persons>"></input>
</body>
</html>
table.setText = function (value, col, row) {
var node = this.getNode(col,row);
if ( node != null ) {
node.text = value;
}
};
This topic is archived.