:: Forum >>

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

<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>&lt;input type='checkbox' name='selectedCorp' value='MSFT' /&gt;MSFT</ticker>
                <name>Microsoft Corporation</name>
                <mktcap>314,571.156</mktcap>
                <sales>32,187.000</sales>
                <employees>55000</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='ORCL' /&gt;ORCL</ticker>
                <name>Oracle Corporation</name>
                <mktcap>62,615.266</mktcap>
                <sales>9,519.000</sales>
                <employees>40650</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='SAP' /&gt;SAP</ticker>
                <name>SAP AG (ADR)</name>
                <mktcap>40,986.328</mktcap>
                <sales>8,296.420</sales>
                <employees>28961</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='CA' /&gt;CA</ticker>
                <name>Computer Associates Inter</name>
                <mktcap>15,606.335</mktcap>
                <sales>3,164.000</sales>
                <employees>16000</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='ERTS' /&gt;ERTS</ticker>
                <name>Electronic Arts Inc.</name>
                <mktcap>14,490.895</mktcap>
                <sales>2,503.727</sales>
                <employees>4000</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='SFTBF' /&gt;SFTBF</ticker>
                <name>Softbank Corp. (ADR)</name>
                <mktcap>14,485.840</mktcap>
                <sales>.000</sales>
                <employees>6865</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='VRTS' checked /&gt;VRTS</ticker>
                <name>Veritas Software Corp.</name>
                <mktcap>14,444.272</mktcap>
                <sales>1,578.658</sales>
                <employees>5647</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='SYMC' /&gt;SYMC</ticker>
                <name>Symantec Corporation</name>
                <mktcap>9,932.483</mktcap>
                <sales>1,482.029</sales>
                <employees>4300</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='INFY' /&gt;INFY</ticker>
                <name>Infosys Technologies Ltd.</name>
                <mktcap>9,763.851</mktcap>
                <sales>830.748</sales>
                <employees>15400</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='INTU' /&gt;INTU</ticker>
                <name>Intuit Inc.</name>
                <mktcap>9,702.477</mktcap>
                <sales>1,650.743</sales>
                <employees>6700</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='ADBE' checked /&gt;ADBE</ticker>
                <name>Adobe Systems Incorporate</name>
                <mktcap>9,533.050</mktcap>
                <sales>1,230.817</sales>
                <employees>3341</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='PSFT' /&gt;PSFT</ticker>
                <name>PeopleSoft, Inc.</name>
                <mktcap>8,246.467</mktcap>
                <sales>1,941.167</sales>
                <employees>8180</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='SEBL' /&gt;SEBL</ticker>
                <name>Siebel Systems, Inc.</name>
                <mktcap>5,434.649</mktcap>
                <sales>1,417.952</sales>
                <employees>5909</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='BEAS' /&gt;BEAS</ticker>
                <name>BEA Systems, Inc.</name>
                <mktcap>5,111.813</mktcap>
                <sales>965.694</sales>
                <employees>3063</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='SNPS' /&gt;SNPS</ticker>
                <name>Synopsys, Inc.</name>
                <mktcap>4,482.535</mktcap>
                <sales>1,169.786</sales>
                <employees>4254</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='CHKP' /&gt;CHKP</ticker>
                <name>Check Point Software Tech</name>
                <mktcap>4,396.853</mktcap>
                <sales>424.769</sales>
                <employees>1203</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='MERQ' /&gt;MERQ</ticker>
                <name>Mercury Interactive Corp.</name>
                <mktcap>4,325.488</mktcap>
                <sales>444.063</sales>
                <employees>1822</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='DOX' /&gt;DOX</ticker>
                <name>Amdocs Limited</name>
                <mktcap>4,288.017</mktcap>
                <sales>1,427.088</sales>
                <employees>9400</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='CTXS' /&gt;CTXS</ticker>
                <name>Citrix Systems, Inc.</name>
                <mktcap>3,946.485</mktcap>
                <sales>554.222</sales>
                <employees>1670</employees>
            </company>
            <company>
                <ticker>&lt;input type='checkbox' name='selectedCorp' value='KNM' /&gt;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
Wednesday, May 25, 2005
Does anyone have an answer?

Even if the answer is "You are doing something that the grid control doesn't support well" that's better than no answer at all.

Is there a problem embedding HTML controls in the XML? Should we be looking at a different approach?

Is there a way to write the 'checked' state of the checkboxes back into the XML before the sort occurs?

Is there a way to prevent the data grid from clearing the checkboxes when a sort occurs?

Are there other options available to us?

Any input is appreciated
Craig
Thursday, May 26, 2005

This topic is archived.


Back to support forum

Forum search