Problem accessing checkbox within the grid

[mbhatt]

Hi, I am using a grid in which one of the columns contains a checkbox which isn't having any datapath. Its there merely for the purpose of user selecting the row to clear.

So I have something like this:

<gridcolumn width="70">
Clear Rule
<view>
<checkbox id="clearRule" x="30"/>
</view>
</gridcolumn>

And then at the bottom of the grid, I have a 'Clear' button, on the click of which I want to scroll thru all the rows of the grid and determine which checkbox was selected. Now my problem is how to access the checkbox without doing an xpathQuery as its not getting any XML data.

I am doing something like this:
var sel = dashboardViewGrid.getSelection();
for (var i=0; i&lt;sel.length; i++) {
var val = sel[i].clearRule.value; ------> this doesn't work
}

[senshi]

Sorry to say, but you do need to save the checkbox-state in a dataset, at least if your grid needs scrolling.
I've prepared two testcases, one with data-saving and one without data-saving. If you change the second grid's contentdatapath to "node" instead of "node[1-8]" and then do some scrolling after having checked the first checkbox, you'll see that very last checkbox will be selected by magic. This magic is called "lazy replication". (Please read the relevant sections in the Developer's Guide if you never have heard this term.)
To overcome this issue, you need to apply a datapath to your checkbox and you need to call "updateData" on this datapath whenever the checkbox's value has been changed. I've made this changes in the first grid, so you can directly see the differences between both grids in this testcase:


<canvas debug="true" >

<dataset name="ds" >
<root>
<node id="001" text="1st Instruction" />
<node id="002" text="2nd Instruction" />
<node id="003" text="3rd Instruction" />
<node id="004" text="4th Instruction" />
<node id="005" text="5th Instruction" />
<node id="006" text="6th Instruction" />
<node id="007" text="7th Instruction" />
<node id="008" text="8th Instruction" />
<node id="009" text="9th Instruction" />
<node id="010" text="10th Instruction" />
</root>
</dataset>

<simplelayout axis="x" spacing="30" />

<view>
<simplelayout axis="y" spacing="15" />

<grid width="400" datapath="ds:/root" contentdatapath="node" bgcolor0="0xEAEAEA" >
<gridcolumn text="#" width="${parent.width*0.1}" >
<text datapath="position()" />
</gridcolumn>

<gridcolumn text="ID" width="${parent.width*0.2}" >
<text datapath="@id" />
</gridcolumn>

<gridcolumn text="Instruction" width="${parent.width*0.47}" >
<text datapath="@text" />
</gridcolumn>

<gridcolumn text="Delete" width="${parent.width*0.2}" >
<view>
<checkbox datapath="@__chkbox" align="center" >
<handler name="onvalue" >
this.datapath.updateData();
</handler>
<method name="updateData" >
return this.value ? "true" : "false";//LPP-4077
</method>
</checkbox>
</view>
</gridcolumn>
</grid>

<button text="Delete selected" >
<handler name="onclick" ><![CDATA[
var dp = new LzDatapointer();
var nodes = dp.xpathQuery( "ds:/root/node[@__chkbox='true']" );
if (nodes) {
if (nodes instanceof Array) {
for (var i=0; i<nodes.length; ++i) {
nodes[i].parentNode.removeChild( nodes[i] );
}
} else {
nodes.parentNode.removeChild( nodes );
}
}
dp.destroy();
]]></handler>
</button>
</view>

<view>
<simplelayout axis="y" spacing="15" />

<grid id="mygrid" width="400" datapath="ds:/root" contentdatapath="node[1-8]" bgcolor0="0xEAEAEA" >
<gridcolumn text="#" width="${parent.width*0.1}" >
<text datapath="position()" />
</gridcolumn>

<gridcolumn text="ID" width="${parent.width*0.2}" >
<text datapath="@id" />
</gridcolumn>

<gridcolumn text="Instruction" width="${parent.width*0.47}" >
<text datapath="@text" />
</gridcolumn>

<gridcolumn text="Delete" width="${parent.width*0.2}" >
<view>
<checkbox name="chkbox" align="center" />
</view>
</gridcolumn>
</grid>

<button text="Delete selected" >
<handler name="onclick" ><![CDATA[
var rows = mygrid.content.rowparent.subviews;
for (var i=0; i<rows.length; ++i) {
var row = rows[i];
var chkbox = row.subviews[row.subviews.length-1].chkbox;
if (chkbox.value) {
chkbox.setValue(false);
row.datapath.deleteNode();
}
}
]]></handler>
</button>
</view>

</canvas>

[guyr]

Senshi, I have a related issue and found this post. I tried your sample code. After checking a checkbox in the first grid, click the corresponding delete button produces this error (this is on OL 4.0.6):

ERROR @https://localhost/scc2/lps/includes/lfc/LFCdhtml-debug.js#14943: invalid 'in' operand this.immediateparent

Edit: After posting above, I changed the 2nd grid so I could respond to onnodes or onclones:

<grid id="mygrid" width="400" bgcolor0="0xEAEAEA" >
<datapath xpath="ds:/root" replication="normal">
<handler name="onnodes">
Debug.write("received onnodes");
</handler>
<handler name="onclones">
Debug.write("received onclones");
</handler>
</datapath>


But I never see either of the debug messages. Any idea? Thanks.

[senshi]

After checking a checkbox in the first grid, click the corresponding delete button produces this error (this is on OL 4.0.6):

Had a little typo in the button's handler-code, there was "new LzDatapath", but it must be "new LzDatapointer", for sure! I've edited the original sample-code. Thanks for your post!

[harkbj]

Senshi, thank you very much for your post. This is exactly what I am after and has saved me quite a bit of time.

Thanks.