XForms/Select1 Multi-Column

Motivation edit

You want to select one item from multiple column of items.

Method edit

To do this we must unselect all of the column not selected so that only one column has a value in the output.

Source Code edit

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <title>Select1 Multi Column</title>
        
        <style type="text/css"><![CDATA[
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {
            font-family: Helvetica, sans-serif;
            font-size: 10pt;
            }
            
            /* vertical align the selectors in each column.  I am not sure why none of these CSS selectors work */
            .state-selector tr td {
            vertical-align:text-top;
            align: top;
            valign: top;
            }
            
            /* this is also not working */
            .state-selector xf\:label {
            font-weight: bold;
            }
]]>
        </style>
        
        <xf:model>
            <xf:instance xmlns="" id="cols">
                <data>
                    <col-1/>
                    <col-2/>
                    <col-3/>
                    <cols/>
                </data>
            </xf:instance>
            
            <!-- this concatenates the three column values -->
            <xf:bind nodeset="cols" calculate="concat(../col-1, ../col-2,  ../col-3)"/>
            
            <!-- this is where we log the events -->
            <xf:instance id="log">
                <data xmlns="">
                    <event/>
                </data>
            </xf:instance>
            
            <xf:action ev:event="xforms-ready">
                <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                <xf:setvalue ref="instance('log')/event[last()]" value="'xforms-ready'"/>
            </xf:action>
            
                   
        </xf:model>
    </head>
    <body>
        <p>Select1 Multi Column</p>
        <table border="1">
            <tr>
                <td valign="top">
                    <xf:select1 ref="col-1" appearance="full">
                        <xf:item>
                            <xf:label>Red</xf:label>
                            <xf:value>red</xf:value>
                        </xf:item>
                        <xf:item>
                            <xf:label>Orange</xf:label>
                            <xf:value>orange</xf:value>
                        </xf:item>
                        <xf:action ev:event="DOMActivate">
                            <xf:setvalue ref="instance('cols')/col-2" value="''"/>
                            <xf:setvalue ref="instance('cols')/col-3" value="''"/>
                            <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                            <xf:setvalue ref="instance('log')/event[last()]" value="'col 1 xforms-value-changed'"/>
                        </xf:action>
                    </xf:select1>
                </td>
                <td valign="top">
                    <xf:select1 ref="col-2" appearance="full">
                        <xf:item>
                            <xf:label>Yellow</xf:label>
                            <xf:value>yellow</xf:value>
                        </xf:item>
                        <xf:item>
                            <xf:label>Green</xf:label>
                            <xf:value>green</xf:value>
                        </xf:item>
                        <xf:action ev:event="DOMActivate">
                            <xf:setvalue ref="instance('cols')/col-1" value="''"/>
                            <xf:setvalue ref="instance('cols')/col-3" value="''"/>
                            <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                            <xf:setvalue ref="instance('log')/event[last()]" value="'col 2 xforms-value-changed'"/>
                        </xf:action>
                    </xf:select1>
                </td>
                <td valign="top">
                    <xf:select1 ref="col-3" appearance="full">
                        <xf:item>
                            <xf:label>Blue</xf:label>
                            <xf:value>blue</xf:value>
                        </xf:item>
                        <xf:item>
                            <xf:label>Indigo</xf:label>
                            <xf:value>indigo</xf:value>
                        </xf:item>
                        <xf:action ev:event="DOMActivate">
                            <xf:setvalue ref="instance('cols')/col-1" value="''"/>
                            <xf:setvalue ref="instance('cols')/col-2" value="''"/>
                            <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                            <xf:setvalue ref="instance('log')/event[last()]" value="'col 3 xforms-value-changed'"/>
                        </xf:action>
                    </xf:select1>
                </td>
            </tr>
        </table>
        
        <xf:trigger>
            <xf:label>Clear</xf:label>
            <xf:action ev:event="DOMActivate">
                <xf:setvalue ref="col-1" value="''"/>
                <xf:setvalue ref="col-2" value="''"/>
                <xf:setvalue ref="col-3" value="''"/>
                <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                <xf:setvalue ref="instance('log')/event[last()]" value="'clear'"/>
            </xf:action>
        </xf:trigger>
        <br/>
        
        <xf:trigger>
            <xf:label>refresh</xf:label>
            <xf:action ev:event="refresh">
                <xf:setvalue ref="col-1" value="''"/>
                <xf:setvalue ref="col-2" value="''"/>
                <xf:setvalue ref="col-3" value="''"/>
                <xf:insert nodeset="instance('log')/event" at="last()" position="after"/>
                <xf:setvalue ref="instance('log')/event[last()]" value="'refresh'"/>
            </xf:action>
        </xf:trigger>
        <br/>
        
        <xf:output ref="cols">
            <xf:label>Color selected: </xf:label>
        </xf:output>
        <br/>
        <xf:output ref="col-1">
            <xf:label>Column 1: </xf:label>
        </xf:output>
        <br/>
        <xf:output ref="col-2">
            <xf:label>Column 2: </xf:label>
        </xf:output>
        <br/>
        <xf:output ref="col-3">
            <xf:label>Column 3: </xf:label>
        </xf:output>
        <br/>
        <div id="log">
            <span>
                <b>Event Log</b>
            </span>
            <xf:repeat id="results-repeat" nodeset="instance('log')/event">
                <xf:output ref="."/>
            </xf:repeat>
        </div>
    </body>
</html>


Next Page: Selecting from Model | Previous Page: Select Multi-Column
Home: XForms