Select All

XForms · Wikibooks

0%

Contents

    Text

    Size
    100%
    Theme
    Typeface
    Line length
    Spacing

    From Wikibooks, under CC BY-SA 4.0, as the source states it. This page at Wikibooks.

    Select All

    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

    Illustration

    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') &lt; 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>
    


    Next Page: Google Maps | Previous Page: Graph Viewer
    Home: XForms