Show TOC

 Implementing TableRowGroupingLocate this document in the navigation structure

With TableRowGrouping, you can group the data in your table using header rows.

Prerequisites

As always, you should have created a Web Dynpro Project including a component with window and view.

Procedures

Inserting the UI elements

  1. Create a Table element.
  2. Select the Table, open the context menu and select Insert RowArrangement. The New UI Element wizard appears.
  3. Select TableRowGrouping and confirm with Ok.
  4. Insert a Header into the TableRowGroupingelement.
  5. Insert the desired number of TableColumns into the Table element.
  6. Insert a Header and a TableCellEditor into each TableColumn.

Your table structure in the Outline should look similar to the graphic below:

Create Context Structure

  1. Switch to the Context tab, select the  Context root node, open the context menu and select New    → Node. The Context Node Wizardappears.
  2. Select Manually, enter a name for the Node, such as TableGroup and confirm with Finish.
  3. Select the TableGroup node, open the context menu and select New   → Node. The Context Node Wizardappears.
  4. Select Manually, enter a name for the Node, such as TableGroupData and confirm with Finish.
  5. Switch to the Properties tab, select the singleton property and set the value to false .
  6. Switch to the Context tab, select the TableGroupData node and create the attributes you need for the TableColumns.
  7. Select the TableGroup node, open the context menu and select New  → Attribute. Select Manually, enter a name for the attribute, such as GroupHeaderText and confirm with Finish.

  8. Repeat the last step and create an attribute called expanded of type Boolean .

Bind UI Element properties to the context

  1. Bind the following UI element properties to the following context nodes/attributes:
    • Table.dataSource to node TableGroup
    • TableRowGrouping . groupData to  node TableGroupData
    • TableRowGrouping . expanded to the expanded attribute
    • Header . text of TableRowGrouping to attribute GroupHeaderText
    • The text properties of the respective TableCellEditors of the TableColumns to the attributes under node TableGroupData.

The graphic below illustrates the data binding in this case:

Result

You have created a table including a TableRowGrouping element. You have also created an appropriate context structure and bound all relevant properties to this context.

After filling the context with data, you will have a result at runtime similar to this:

More Information:

TableRowGrouping

Binding UI Element Properties to the Context