Using a ColumnGroup

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 create a columnGroup component:

In the Design Structure Window of the desired file, locate the table or columnGroup node in which you wish to insert a columnGroup component.
In the Component Palette, select Table Components from the dropdown list, and then drag and drop the columnGroup component to the parent node of your choice.
The columnGroup node is inserted and highlighted under the expanded parent node.
To specify the formatting information for the columnGroup header, in the Property Inspector, set the following attribute:
- columnHeaderFormat - Enter the formatting information. In the right column, click the icon to open a dialog to enter the format values. 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. The column header format value supported is:
  - cellNoWrapFormat - Select true or false to specify whether the column header will be rendered by wrapping the cell contents in multiple lines.
To set the header text for the columnGroup, do the following:
1. Expand the columnGroup node to locate the columnHeader named child node. Then right-click the columnHeader named child and choose Insert inside columnHeader | styledText.
2. In the Property Inspector, change the value of the text attribute for styledText to the group column header text.
To add an inline style for the group column header, do the following:
1. In the UIX Visual Editor, select the styledText component for the group column header (created in step 4).
2. In the Property Inspector, modify the inlineStyle attribute. 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.
To add new columns to the columnGroup, do the following:
1. In the Design Structure Window, right-click the columnGroup node and choose Insert inside columnGroup | column.
2. Repeat step 6a to add the desired number of columns for this columnGroup.
3. See Creating a Column for details about creating a column stamp and specifying column attributes.
Repeat step 1 to 6 to create the desired number of columnGroup components.

Tip: To move existing columns to the columnGroup, drag and drop the existing column to the columnGroup node in the Design Structure Window.

Note: To use data binding, see Data Binding a Component Attribute.

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 alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}"
         width=55%">
    <contents>

      <!-- first group -->

      <columnGroup>

        <!-- group column header -->
        <columnHeader>
          <styledText text="Group Col 1">
            <inlineStyle>
              <property name="color">red</property>
            </inlineStyle>
          </styledText>
        </columnHeader>

        <columnHeaderFormat cellNoWrapFormat="true"/>

        <!-- columns under first group -->

        <contents>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <styledText text="${uix.current.firstColumnText}"/>
            </contents>
          </column>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <button text="${uix.current.secondColumnText}"/>
            </contents>
            <columnFormat columnDataFormat="iconButtonFormat"/>
          </column>
        </contents>
      </columnGroup>

      <!-- second group --> 

      <columnGroup>

        <!-- group column header -->
        <columnHeader>
          styledText text="Group Col 2"/>
        </columnHeader>

        <!-- columns under second group -->

        <contents>
          <column>
            <columnHeader>
              <styledText text="${uix.current.textKey}"/>
            </columnHeader>
            <contents>
              <styledText text="${uix.current.thirdColumnText}"/>
            </contents>
          </column>
         <column>
           <columnHeader>
             <styledText text="${uix.current.textKey}"/>
           </columnHeader>
           <contents>
             <styledText text="${uix.current.fourthColumnText}"/>
           </contents>
           <columnFormat columnDataFormat="numberFormat"/>
         </column>
       </contents>

     </columnGroup>
    ...
  </table>
</contents>
...