XForms/Select All

< XForms

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>


This article is issued from Wikibooks. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.