Show TOC Start of Content Area

Procedure documentation Implementing TableRowGrouping  Locate the document in its SAP Library 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:

This graphic is explained in the accompanying text

Create Context Structure

...

       1.      Switch to the Context tab, select the This graphic is explained in the accompanying text Context root node, open the context menu and select New    Node. The Context Node Wizard appears.

       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.

This graphic is explained in the accompanying text

       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:

This graphic is explained in the accompanying text

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:

This graphic is explained in the accompanying text

More Information:

TableRowGrouping

Binding UI Element Properties to the Context

End of Content Area