XForms/Select All
< XForms
WARNING THIS EXAMPLE IN DEVELOPMENT
Motivation
You would like to be able to select all rows in a table using a single trigger.
Approach
You can put a list of items in a table and have a single column that has a checkbox in it. You can then use the index function to change the selected item.
Screen Image
Sample Program
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xs="http://www.w3.org/2001/XMLSchema">
<head>
<title>Select all, Unselect all</title>
<style type="text/css">
table {width:300px}
td,td {text-align: center; width:25%}
</style>
<xf:model>
<xf:instance xmlns="">
<data>
<item id="1" selected="false">
<title>red</title>
</item>
<item id="2" selected="false">
<title>orange</title>
</item>
<item id="3" selected="false">
<title>yellow</title>
</item>
<item id="4" selected="false">
<title>blue</title>
</item>
</data>
</xf:instance>
<xf:bind nodeset="item/@selected" type="xs:boolean" />
</xf:model>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>position()</th>
<th>index()</th>
<th>color</th>
<th>select</th>
</tr>
</thead>
</table>
<!-- one table per row :-( -->
<xf:repeat nodeset="item" id="repeat-id">
<table>
<tr>
<td>
<xf:output value="position()" />
</td>
<td>
<xf:output value="index('repeat-id')" />
</td>
<td>
<xf:output ref="title" />
</td>
<td>
<xf:input ref="@selected" />
</td>
</tr>
</table>
</xf:repeat>
<xf:trigger>
<xf:label>Select all list [n]</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="item[1]/@selected" value="'true'" />
<xf:setvalue ref="item[2]/@selected" value="'true'" />
<xf:setvalue ref="item[3]/@selected" value="'true'" />
<xf:setvalue ref="item[4]/@selected" value="'true'" />
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Unselect all list [n]</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="item[1]/@selected" value="'false'" />
<xf:setvalue ref="item[2]/@selected" value="'false'" />
<xf:setvalue ref="item[3]/@selected" value="'false'" />
<xf:setvalue ref="item[4]/@selected" value="'false'" />
</xf:action>
</xf:trigger>
<br />
<xf:trigger>
<xf:label>Select all repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:repeat nodeset="item" id="repeat-id-2">
<xf:setvalue ref="@selected" value="'true'" />
</xf:repeat>
</xf:action>
</xf:trigger>
<xf:trigger>
<xf:label>Unselect repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:repeat nodeset="item" id="repeat-id-3">
<xf:setvalue ref="@selected" value="'false'" />
</xf:repeat>
</xf:action>
</xf:trigger>
<ol>
<xf:repeat nodeset="item" id="repeat-id-4">
<li>
<xf:output ref="@selected" />
</li>
</xf:repeat>
</ol>
</body>
</html>
Discussion
Note that the setvalues inside the repeat blocks do not work. I have tried to use the current() function inside the repeat like this:
<xf:repeat>
<xf:setvalue ref="current()/@selected" value="'false'" />
</xf:repeat>
but with no luck.
If anyone knows how to get this working, please let us know. Thanks - Dan
Alternate Way
Note: <xf:repeat> does not work inside <xf:action>. Here is the workaround for this.
<xf:instance id="count">
<count/>
</xf:instance>
<xf:bind nodeset="instance('count')" type="xs:integer" />
<xf:trigger>
<xf:label>Select all repeat</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('count')" value="0" />
<xf:action while="instance('count') < count(item)">
<xf:setvalue ref="instance('count')" value="instance('count') + 1" />
<xf:setvalue ref="item[number(instance('count'))]/@selected" value="'true'" />
</xf:action>
</xf:action>
</xf:trigger>