:: Forum >> Version 1 >>

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>
    <
stylebodyhtml {margin:0pxpadding0pxoverflowhidden;} </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=0checks.lengthi++ ) {
            if (
checks[i].checked) {
                
message += " " checks[i].value;
            }
        }
        
message += " ]";
        
window.status message;
    }
}
    </
script>

    <!-- 
grid format -->
    <
style>
        .
active-controls-grid {height100%; fontmenu;}

        .
active-column-{width:  80px;}
        .
active-column-{width200pxbackground-colorthreedlightshadow;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}

        .
active-grid-column {border-right1px solid threedshadow;}
        .
active-grid-row {border-bottom1px 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>PeopleSoftInc.</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 SystemsInc.</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 SystemsInc.</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>SynopsysInc.</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 SystemsInc.</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 xmlnode 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 linebelow.</li>
<
li>Sort the grid by clicking a column headerThe 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