DataGrid

Use

UI element DataGrid allows data to be displayed two-dimensionally in table cells arranged in rows and columns. This makes it appropriate for use in applications where data is addressed in two dimensions (for example, an application that visualizes sales planning data by product and time). In contrast, classic tables Table and C-Table are defined by one index only (row identification). The DataGrid enables a quick client-side handling of actions such as scrolling, resizing of columns and rows or selection.

The DataGrid UI element contains properties that apply to the whole DataGrid, for example, a property to determine its height and width.

Insert DataGrids as the root element in a view using Exchange Root Element in the context menu.

Visualization

The Web Dynpro DataGrid consists of the higher-level DataGrid UI element and multiple view elements for segments, segment columns, segment rows, and segment cells.

The following graphic illustrates a DataGrid:

DataGrid Features

The table below lists the DataGrid features:

Feature	Description	More Information
Specify cell design	You can use the following UI elements to semantically select the cells: Decorators Icons Images Background color	DataGridCell Properties DataGrid Aggregations
Cell editors	For the indvidual cells you can define different cell editors (e.g. CInputField or CTextView).	Cell editors in the DataGrid
Displaying the hierarchy	You can arrange rows and columns in a hierarchy so that specific hierarchy levels can be hidden or displayed by the user.	Creating Hierarchical DataGrids
Selection	Users can select cells of the DataGrid with a mouse click or by pressing a key. The behavior of the selection and whether there is a selection in the DataGrid is determined by the onSelect event of DataGridSegment.	DataGridSegment Properties
Sorting	With property sortState of DataGridCell you can define how a column of DataGrid is sorted.	DataGridCell Properties
Filtering	With property isFiltered of DataGridCell you define whether a filter icon is displayed in the column header. This indicates that the current DataGrid entries are filtered according to values in this DataGridSegmentCol.	DataGridCell Properties
Link cells	You can put all cells with the same value into one cell.	DataGridCell Properties
Copying and inserting values	CInputFields inserted into the DataGrid as cell editors can handle copied table data that was pasted in from the clipboard with key combination `CTRL + V`.	CInputField Events
Adjusting the height and width of DataGrid	By combining certain properties of UI elements you can specify that DataGrid adjusts its height or width automatically to the size of the browser window.	Calculating the Height and Width of the DataGrid
Range Supply	A range supply node enables precisely the data set requested to be passed to the context node (for example, only the visible lines of the DataGrid). This reduces the amount of memory required by the context node.	Creating Two-Dimensional Context Nodes with Range Supply
Change protocol	The change protocol displays a list of changes the user has made to DataGrid on the client side.	Recording User Input with the Context Change Log

More information:

Creating DataGrids

Implementation Details

Runtime class:

CL_WD_DATA_GRID

Properties in View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
enabled	WDY_BOOLEAN	true	Yes
height	STRING		Yes
visible	WDUI_VISIBILITY	visible	Yes
width	STRING		Yes

Aggregations in the View Designer

Name	Cardinality	Type
SEGMENTS	0..n	DataGridSegment
SEGMENT_COLS	0..n	DataGridSegmentCol
SEGMENT_ROWS	0..n	DataGridSegmentRow

Dynamic Programming of Properties

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

View Designer Name	Runtime Name	Type
enabled	ENABLED	WDY_BOOLEAN
height	HEIGHT	STRING
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_C_TABLE=>E_VISIBLE-NONE
visible: visible	CL_WD_C_TABLE=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
SEGMENTS	SEGMENT	0..n
SEGMENT_COLS	SEGMENT_COL	0..n
SEGMENT_ROWS	SEGMENT_ROW	0..n

Example

You can find an example in the system under WDR_TEST_DATA_GRID.