HTML INPUT tags in grid control built from XML data island
We embed HTML INPUT tags in the XML used to generate the grid. When the grid is sorted, all the checkboxes are revert to their initial value. I assume this happens because the grid reloads the original XML data, restoring the checkboxes to their initial state.
Is that a correct analysis?
Is there a way to alter this behavior so that the checkboxes preserve their state when a sort occurs?
The example below reproduces the problem. It is a slight modification of the example distributed with ActiveWidgets:
\examples\grid\xml - data island.htm
Is that a correct analysis?
Is there a way to alter this behavior so that the checkboxes preserve their state when a sort occurs?
The example below reproduces the problem. It is a slight modification of the example distributed with ActiveWidgets:
\examples\grid\xml - data island.htm
<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/classic/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/grid.js"></script>
<script>
function showSelections () {
var checks = document.getElementsByName("selectedCorp");
if ((typeof(checks) != "undefined") && (checks.length > 0)) {
var message = "gridForm: checks.length=" + checks.length + " [";
for (var i=0; i < checks.length; i++ ) {
if (checks[i].checked) {
message += " " + checks[i].value;
}
}
message += " ]";
window.status = message;
}
}
</script>
<!-- grid format -->
<style>
.active-controls-grid {height: 100%; font: menu;}
.active-column-0 {width: 80px;}
.active-column-1 {width: 200px; background-color: threedlightshadow;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}
.active-grid-column {border-right: 1px solid threedshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
</style>
</head>
<body>
<form name="gridForm" onsubmit="showSelections();">
<table style="height:70%;table-layout:fixed;"><tr><td>
<xml id="xmlDataIsland">
<companies>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='MSFT' />MSFT</ticker>
<name>Microsoft Corporation</name>
<mktcap>314,571.156</mktcap>
<sales>32,187.000</sales>
<employees>55000</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='ORCL' />ORCL</ticker>
<name>Oracle Corporation</name>
<mktcap>62,615.266</mktcap>
<sales>9,519.000</sales>
<employees>40650</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='SAP' />SAP</ticker>
<name>SAP AG (ADR)</name>
<mktcap>40,986.328</mktcap>
<sales>8,296.420</sales>
<employees>28961</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='CA' />CA</ticker>
<name>Computer Associates Inter</name>
<mktcap>15,606.335</mktcap>
<sales>3,164.000</sales>
<employees>16000</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='ERTS' />ERTS</ticker>
<name>Electronic Arts Inc.</name>
<mktcap>14,490.895</mktcap>
<sales>2,503.727</sales>
<employees>4000</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='SFTBF' />SFTBF</ticker>
<name>Softbank Corp. (ADR)</name>
<mktcap>14,485.840</mktcap>
<sales>.000</sales>
<employees>6865</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='VRTS' checked />VRTS</ticker>
<name>Veritas Software Corp.</name>
<mktcap>14,444.272</mktcap>
<sales>1,578.658</sales>
<employees>5647</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='SYMC' />SYMC</ticker>
<name>Symantec Corporation</name>
<mktcap>9,932.483</mktcap>
<sales>1,482.029</sales>
<employees>4300</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='INFY' />INFY</ticker>
<name>Infosys Technologies Ltd.</name>
<mktcap>9,763.851</mktcap>
<sales>830.748</sales>
<employees>15400</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='INTU' />INTU</ticker>
<name>Intuit Inc.</name>
<mktcap>9,702.477</mktcap>
<sales>1,650.743</sales>
<employees>6700</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='ADBE' checked />ADBE</ticker>
<name>Adobe Systems Incorporate</name>
<mktcap>9,533.050</mktcap>
<sales>1,230.817</sales>
<employees>3341</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='PSFT' />PSFT</ticker>
<name>PeopleSoft, Inc.</name>
<mktcap>8,246.467</mktcap>
<sales>1,941.167</sales>
<employees>8180</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='SEBL' />SEBL</ticker>
<name>Siebel Systems, Inc.</name>
<mktcap>5,434.649</mktcap>
<sales>1,417.952</sales>
<employees>5909</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='BEAS' />BEAS</ticker>
<name>BEA Systems, Inc.</name>
<mktcap>5,111.813</mktcap>
<sales>965.694</sales>
<employees>3063</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='SNPS' />SNPS</ticker>
<name>Synopsys, Inc.</name>
<mktcap>4,482.535</mktcap>
<sales>1,169.786</sales>
<employees>4254</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='CHKP' />CHKP</ticker>
<name>Check Point Software Tech</name>
<mktcap>4,396.853</mktcap>
<sales>424.769</sales>
<employees>1203</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='MERQ' />MERQ</ticker>
<name>Mercury Interactive Corp.</name>
<mktcap>4,325.488</mktcap>
<sales>444.063</sales>
<employees>1822</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='DOX' />DOX</ticker>
<name>Amdocs Limited</name>
<mktcap>4,288.017</mktcap>
<sales>1,427.088</sales>
<employees>9400</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='CTXS' />CTXS</ticker>
<name>Citrix Systems, Inc.</name>
<mktcap>3,946.485</mktcap>
<sales>554.222</sales>
<employees>1670</employees>
</company>
<company>
<ticker><input type='checkbox' name='selectedCorp' value='KNM' />KNM</ticker>
<name>Konami Corporation (ADR)</name>
<mktcap>3,710.784</mktcap>
<sales>.000</sales>
<employees>4313</employees>
</company>
</companies>
</xml>
<script>
// create ActiveWidgets data model - XML-based table
var table = new Active.XML.Table;
// get reference to the xml data island node
var xml, node = document.getElementById("xmlDataIsland");
// IE
if (window.ActiveXObject) {
xml = node;
}
// Mozilla
else {
xml = document.implementation.createDocument("","", null);
xml.appendChild(node.selectSingleNode("*"));
}
// provide data XML
table.setXML(xml);
// define column labels
var columns = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;
// provide column labels
obj.setColumnProperty("texts", columns);
// provide external model as a grid data source
obj.setDataModel(table);
// write grid html to the page
document.write(obj);
</script>
</td></tr>
</table>
<table style="height:30%"><tr><td>
<tr><td colspan="2">
<ol>
<li>Select and de-select some checkboxes.</li>
<li>Press <b>Show Selections</b> and the values of the selected checkboxes appear in the browser status line, below.</li>
<li>Sort the grid by clicking a column header. The selections are set to their initial value.</li>
<li>Figure out how to preserve the selections and post your brilliant solution to this problem.</li>
</ol>
</td></tr>
<tr><td>
<input type="button" value="Show Selections" onclick="showSelections();">
</td><td>
<input type="submit" value="Submit">
</td></tr>
</table>
</form>
</body>
</html>Craig
May 25,