Creating an HGrid

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 "treeData" produces the object hierarchy column starting with the root 'Primary Colors'. It also provides the data for the column stamp, which generates three columns of color codes. The inline data named "demoTableData" provides the data for columnHeaderStamp.

To create an hGrid component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert an hGrid component.
In the Component Palette, select Table Components from the dropdown list, and then drag and drop the hGrid component to the parent node of your choice.
The hGrid node is inserted and highlighted under the expanded parent node. By default 'No items are found' is displayed in the empty hGrid in the UIX Visual Editor.
In the Property Inspector, set the following attributes for the hGrid component:
- alternateText - Change the default text for an empty hGrid, if desired.
- formSubmitted - Select true or false to specify whether form submission should be used in the links generated by hGrid proxy.
- summary - Enter a brief description of the table for non-visual user clients.
- childBlockSize - Enter a value for the maximum number of child node records that can be displayed at one time under any given node. If a node has more children than the childBlockSize number, a special navigation row with scroll links are rendered below and above the node. See About ChildBlockSize for more details.
- columnFormats - Enter the data source to bind to for the formatting information of each column. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- columnHeaderData - Enter the data source to bind to for the columnHeaderStamp child. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.data.demoTableData.demoColHeaderData}) or use the Bind to Data dialog to select the data source.
- columnHeaderFormats - Enter the data source to bind to for the formatting information of each column header. In the right column, click the icon to enter an EL syntax data binding expression or use the Bind to Data dialog to select the data source.
- destination - Enter the base destination for all links generated by this hGrid.
- 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.
- partialRenderMode - Select a partial page rendering (PPR) behavior mode. The values allowed are:
  - multiple - This enables PPR using multiple partial target nodes. You must also set the partialTargets attribute.
  - none - Default. Full page rendering will be used.
  - self - This enables PPR using only one target node, the ID of the hGrid component.
- partialTargets - Enter the IDs of the partial target nodes to render. Do not list the ID of the hGrid component because it is automatically included in the partial targets list.
- proxy - Enter the data source to bind to for the hGrid proxy. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.eventResult.hGridProxy}) or use the Bind to Data dialog to select the data source.
- tableFormat - Enter the formatting information of the entire table. In the right column, click the icon to enter the table format property values or enter the data source to bind to. You may use an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The table format values supported are:
  - bandingInterval - The number of rows or columns in each banding group.
  - tableBanding - The banding strategy used for the table. The values supported are:
    - noBanding - Default. No banding is used in the table.
    - columnBanding - The columns are alternately banded.
    - rowBanding - The rows are alternately banded.
- treeData - Enter the data for the hGrid. In the right column, click the icon to enter an EL syntax data binding expression (e.g., ${uix.data.treeData.nodes}) or use the Bind to Data dialog to select the data source.
- unvalidated - Select true or false to specify whether or not to validate before any form submits generated by the hGrid proxy. The default is to perform no validation. This attribute is only applicable when the hGrid is used in formSubmitted mode.
- width - Enter the width of the hGrid in pixels or as a percentage of the parent component.
If you specified the treeData attribute, the contents of the object hierarchy column are automatically defined for you. Otherwise, do the following to define a stamp for customizing the object hierarchy column using the nodeStamp named child. You can also use these steps to change the default header for the object hierarchy column:
1. In the Design Structure Window, expand the hGrid node to locate the nodeStamp named child node. Right-click nodeStamp and choose Insert inside nodeStamp | column .
  The column node is inserted and highlighted under the expanded nodeStamp node.
2. Expand the new column node to locate the columnHeader named child. Then right-click columnHeader and choose Insert inside columnHeader | styledText.
  The styledText node is inserted and highlighted under the expanded parent node.
3. In the Property Inspector, change the text attribute of styledText to a value of your choice, e.g., Color. Otherwise, 'Name' is the default header for the object hierarchy column.
4. To customize the object hierarchy column contents, right-click the column node created in step 4a to insert the desired component. Using our example, we would choose Insert inside column | styledText, and then in the Property Inspector, we would change the text attribute of styledText to the value of ${uix.current.text}.
To add other columns as indexed children of hGrid, do the following:
1. In the Design Structure Window, right-click the hGrid node and choose Insert inside | hGrid | column.
2. Repeat step 5a to add the desired number of columns. In our example, we need to add two other columns.
3. To define a column header stamp, locate the columnHeaderStamp named child node under the hGrid node. Then right-click columnHeaderStamp to insert the desired component. In our example, we would choose Insert inside columnHeaderStamp | styledText, and then in the Property Inspector, we would change the text attribute of styledText to ${uix.current.textKey}.
4. To define a column stamp, for each column you created in steps 5a and 5b, right-click the column node to insert the desired component. Using our example again, we would choose Insert inside | column | styledText , and then in the Property Inspector, we would change the text attribute to ${uix.current.r}, ${uix.current.g}, ${uix.current.g}, respectively, for the three columns.
To add singleSelection or multipleSelection to the hGrid, see Using SingleSelection or MultipleSelection (TableSelection).
To add components for performing actions on the hGrid that are independent of row selection, see Using TableActions.
To make the hGrid interactive and set the initial focus, see About HGridProxy.

Tip: Use the 'nameTransformed' attribute of the column component to specify whether any name transformation should occur when rendering data form controls.

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

Example (UIX XML)


...
<provider>
  <data name="treeData">
    <inline>
      <nodes text="Primary Colors" expandable="expanded">
        <nodes text="Red" r="Any" g="00" b="00"/> 
        <nodes text="Green" r="00" g="Any" b="00" expandable="expanded">
          <nodes text="Light" r="00" g="FF" b="00"/> 
          <nodes text="Dark" r="00" g="88" b="00"/> 
        </nodes>
        <nodes text="Blue" r="00" g="00" b="Any"/> 
      </nodes>
    </inline>
  </data>
  <data name="demoTableData">
    <inline>
      <demoColHeaderData textKey="Red Code"/>
      <demoColHeaderData textKey="Green Code"/>
      <demoColHeaderData textKey="Blue Code"/>
    </inline>
  </data>  
</provider>
...
<contents>
...
  <hGrid alternateText="No items were found" 
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}" 
         proxy="${uix.eventResult.hGridProxy}" 
         treeData="${uix.data.treeData2.nodes}">
    <!-- nodeStamp named child customizes header of object column -->
    <nodeStamp>
      <column>
        <columnHeader>
          <styledText text="Color"/>
        </columnHeader>
      </column>
    </nodeStamp>

    <!-- indexed children define contents of other columns -->
    <contents>
      <column>
        <contents>
          <styledText text="${uix.current.r}"/>
        </contents>
      </column>
      <column>
        <contents>
          <styledText text="${uix.current.g}"/>
        </contents>
      </column>
      <column>
        <contents>
          <styledText text="${uix.current.b}"/>
        </contents>
      </column>
    </contents>

    <!-- columnHeaderStamp stamps out headers for other columns -->
    <columnHeaderStamp>
      <styledText text="${uix.current.textKey}"/>
    </columnHeaderStamp>
  </hGrid>
  ...
</contents>
...