DataGrid Widget
- Last UpdatedJun 28, 2022
- 4 minute read
The DataGrid widget shows tabular data within a pane of a AVEVA OMI ViewApp during runtime. Data shown in the widget can be filtered by the user. The widget also includes a set of visual properties to customize the appearance of the widget and its displayed tabular data.
Filter Data During Runtime
Each column of data shown in the grid can be filtered. The Data Grid widget only shows the data from the row whose column item matches the filter criteria when the filter is applied.
The following example shows tabular data before and after applying a filter to the Week column to filter the data to show only Thursday.
|
|
|
Selecting the filter icon 
within each column header shows a drop-down pane to specify filter criteria.
|
|
|
|
Drop-down list of filter operators. The selected operator performs a comparison to the value entered in the paired data entry field (2). If column data matches the filter statement, the grid shows the data for that row. Unmatched data is removed and not shown in the grid. The Data Grid widget supports the following filter operators:
|
|
|
Data entry field to type a filter value that is evaluated by the filter operator selected in (1). |
|
|
Filters logic to evaluate filter statements 1 and 2 with Boolean operators (AND, OR). If filter statement 2 is blank, no filters logic is applied. |
|
|
Same as 1. If the paired data entry field (5) is blank, the filter operator is not evaluated. |
|
|
Same as 2. Can be left blank. |
|
|
Select CLEAR to remove filter criteria and show all data on the grid. |
|
|
Select FILTER to apply the filter criteria. |
Properties
The following table lists the properties of the DataGrid widget. All properties are exposed as dynamic runtime properties in which they can be bound to a reference to a ViewApp namespace as an:
-
Attribute
-
Object attribute
-
MyContent attribute
-
Compound expression
|
Data Grid Widget Properties |
Descriptions |
|
Type |
Gets or sets the format of source data strings.
|
|
AllowExport |
Allows the export of the data to a file. The default value is true. |
|
Datasource |
Gets or sets the string of JSON or CSV data shown by the Data Grid widget. |
|
ColumnDelimiter |
Gets or sets the delimiter used to separate field values in the selected grid row.
|
|
SelectedRow |
Gets or sets the string of the selected row field values. |
|
DateFieldFormat |
Gets or sets the date format of a date. Supports all date format strings. |
|
BackgroundColor |
Background color of the widget. |
|
ExportFileName |
If the AllowExport = True, specifies the name of the file exported. |
|
FilterMode |
Gets or sets the filter mode of the grid; either default or checklist. |
|
ForeColor |
Gets or sets the text color of the widget. |
|
HeaderBackColor |
Background color of the tabular header in which column names appear. |
|
HeaderForeColor |
Text color of the header column names. |
|
SelectionBackColor |
Background color of a selected row within the grid. |
|
SelectionForeColor |
Text color of the selected row within the grid. |
|
RowHoverBackColor |
Background color of the row within the grid in which the mouse is hovering over. |
|
RowHoverForeColor |
Text color of the row within the grid in which the mouse is hovering over. |
|
Font Family |
Name of the font family used by the widget to show text. |
|
FontSize |
Gets or sets the font size in pixels of text shown in the Data Grid widget. |
|
PageSize |
Gets or sets the number of records to display at a time. |