Using SingleSelection or MultipleSelection (TableSelection)

Note: This procedure assumes inline data (as shown in the example at the end of this topic) has been inserted in the UIX file. The inline data named "demoTableData" provides the data for the rows and columns.

To insert a singleSelection or multipleSelection component:

In the Design Structure Window of the desired file, expand the table or hGrid node in which you wish to insert a row selection component and locate the tableSelection named child node.
Right-click the tableSelection node and choose Insert inside tableSelection | singleSelection or Insert inside tableSelection | multipleSelection.
In the Property Inspector, set the attributes for the row selection component you inserted:
- text - Enter the text to display in the control bar. The default text is "Select an item and ...".
- selectedIndex - (singleSelection only) Enter the zero-based index of the initially selected item.
- disabled - Default is false. Select true to disable this row selection component. This attribute can be bound to return true for those DataObject rows that should be disabled
- inlineStyle - Enter the inline CSS style for this component. In the right column, click the icon to open a dialog, then click New to enter the CSS property values. The property element defines a single name/value pair. The name is defined by the Name attribute, and the Value by the plain-text contents of the element. For example, you can enter 'color' for Name, and 'red' for Value. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- primaryClientAction - (singleSelection only) Enter the clientAction to fire. In the right column, click the icon to enter a ClientAction. See Editing the PrimaryClientAction Attribute for details. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- selected - Select true or false to specify whether an item is selected. For singleSelection, this attribute can be bound to return true for those DataObject rows that should be selected. For multipleSelection, this attribute can be databound to the current DataObjectList so that the selection state of a table row can be retrieved from the selection DataObjectList.
- selection - (multipleSelection only) Click the icon in the column next to selection to enter the DataObjectList that represents the original selection status of each table row. You may use an EL syntax data binding expression or use the Bind to Data dialog to select a data source.
Note: To use data binding, see Data Binding a Component Attribute.
To add a component in the control bar, do the following:

In the Design Structure Window, right-click singleSelection or multipleSelection and choose Insert inside singleSelection | submitButton or Insert inside multipleSelection | submitButton to insert the preferred component. You may insert any other component by choosing UIX Components... .
Set the atttributes for the inserted component in the Property Inspector.

Note: When a table is used in single selection or multiple selection mode, it is possible to use the TableProxy getSelectedRow() method to get the index of the currently selected row or the getSelectedRows() method to get the selected row indices, respectively. The proxied attribute on the table component should be set to true. See About TableProxy for details.

Example (UIX XML)


...
<provider>
  <data name="demoTableData">
    <inline>
      <!-- data for 4 rows -->
      <demoRowData firstColumnText="First row"
                   secondColumnText="First Button"
                   thirdColumnText="First col"
                   fourthColumnText="111"
                   isSelected="false"
                   isDisabled="true" />
      <demoRowData firstColumnText="Second row"
                   secondColumnText="Second Button"   
                   thirdColumnText="Second col"    
                   fourthColumnText="222"   
                   isSelected="true" /> 
      <demoRowData firstColumnText="Third row" 
                   secondColumnText="Third Button"         
                   thirdColumnText="Third col"  
                   fourthColumnText="333"    
                   isSelected="false" />  
      <demoRowData firstColumnText="4th row"   
                   secondColumnText="4th Button"   
                   thirdColumnText="4th row col"   
                   fourthColumnText="444"  
                   isSelected="false" /> 
      <!-- data for the row headers -->
      <demoRowHeaderData headerText="1"/> 
      <demoRowHeaderData headerText="2"/>
      <demoRowHeaderData headerText="3"/>
      <demoRowHeaderData headerText="4"/> 
      <!-- data for the 4 column headers -->
      <demoColHeaderData textKey="H1"/> 
      <demoColHeaderData textKey="H2"/>
      <demoColHeaderData textKey="H3"/>
      <demoColHeaderData textKey="H4"/>
      <!-- formatting information for the rows -->
      <demoRowFormats/>
      <demoRowFormats displayGrid="false"/>
      <demoRowFormats/>
      <demoRowFormats/> 
    </inline>
  </data>
</provider>
...
<contents>
  ...
  <table id=tab1
         alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">
    <tableSelection>
      <!-- SingleSelection. selected takes precedence over selectedIndex. disabled attr is bound -->
      <singleSelection selectedIndex="3"
                       text="Select an item and ..." 
                       selected="${uix.current.isSelected}"
                       disabled="${uix.current.isDisabled}">
        <contents>
          <submitButton text="Copy"/>
        </contents>
      </singleSelection>
    </tableSelection>
    ...
  </table>
  ...
  <table id=tab2
         alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">
    <tableSelection>
      <!-- MultipleSelection, using selected. disabled attr is bound -->
      <multipleSelection text="Select one or more rows to ..."
                         selected="${uix.current.isSelected}"
                         disabled="${uix.current.isDisabled}">
        <contents>
          <submitButton text="Delete"/>
        </contents>
      </multipleSelection>
    </tableSelection>
    ...
  </table>
  ...
  <table id=tab3
         alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">
    <tableSelection>
      <!--multiselect using selection-->
      <multipleSelection text="Select one or more rows to ..."
                         selected="${uix.current.isSelected}">
        <contents>
          <submitButton text="Delete"/>
        </contents>
        <selection>
          <row isSelected="false"/>
          <row isSelected="false"/>
          <row isSelected="true"/>
          <row isSelected="true"/>
        </selection>
      </multipleSelection>
    </tableSelection>
    ...
  </table>
  ...
</contents>
...