Grid Widget (Legacy)
The Grid widget allows you to display any data set in a grid view. The grid supports many different ways to render the data, including color contexting by column and rendering images in a cell. You can configure the basic renderings, including column order, which columns to view, column headings, and state formatting through the grid widget's configuration dialog, using the Configure Grid Columns selection.
The grid supports column resizing in the run time environment as well as data sorting by clicking on a column header.
Editable Grid
The grid also has a special setting for the widget and within the Configure Grid Columns option that allows the editing of rows/columns in the grid. This will allow you to edit values in a grid and then pass the full content back in a service. Or, if you are displaying a Selected Row in your grid, that specific row can be passed back. The best practice is to use just a Selected Row because depending on how large your table is, it can impact your memory usage.
 |
Styles and common widget properties are not included in the table below.
|
|
Property Name
|
Description
|
Base Type
|
Default Value
|
Bindable? (Y/N)
|
Localizable? (Y/N)
|
||
|---|---|---|---|---|---|---|---|
|
CustomClass
|
User defined CSS class to apply to the top div of the widget. Multiple classes can be entered, separated by a space.
|
STRING
|
n/a
|
Y
|
N
|
||
|
RowFormat
|
Optional rules to apply dynamic (state) formatting on a Row basis, can be over ridden by cell state formatting.
|
STATE FORMATTING
|
State Formatting
|
N
|
N
|
||
|
MultiSelect
|
Allow multiple items to be selected.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
IsEditable
|
Allow edits to the values in the grid?
|
BOOLEAN
|
False
|
N
|
N
|
||
|
AutoSelectFirstRow
|
Automatically select the first row upon initial loading of data.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
CellTextWrapping
|
Wrap the values in the cells.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
Data
|
The infotable that is the data source for this property.
|
INFOTABLE
|
n/a
|
Y
|
N
|
||
|
CurrentScrollTop
|
Current scroll top.
|
NUMBER
|
0
|
Y
|
N
|
||
|
ScrollTop
|
Scroll top to assign.
|
NUMBER
|
0
|
Y
|
N
|
||
|
EditedTable
|
Table that is edited using the Grid.
|
INFOTABLE
|
n/a
|
Y
|
N
|
||
|
RowHeight
|
The height of the rows.
|
NUMBER
|
30
|
N
|
N
|
||
|
ShowAllColumns
|
Display all columns available. You should use ShowAllColumns if your infotable does not have a Data Shape.
|
BOOLEAN
|
False
|
N
|
N
|
||
|
ShowDataLoading
|
Displays a spinning icon when data is loading.
|
BOOLEAN
|
True
|
N
|
N
|
||
|
DoubleClicked
|
Event. Allows you to single-click select on the data object, but still use a double-click for another event, such as linking a double click to trigger a navigation link.
|
n/a
|
n/a
|
Y
|
N
|
||
|
Visible
|
Is the widget visible in run time?
|
BOOLEAN
|
True
|
Y
|
N
|
Grid Configuration
After linking a data service to the grid, open the Grid Column Configuration dialog. You can choose which columns should be visible by using the column Hide checkboxes (true = show, false = hide). Reorder the displayed columns by dragging them up and down the list.
The column title is automatically assigned by the Data Shape of the data service, but can be overridden on a column by column basis within the configuration dialog. For each column, you can also:
• Choose the renderer for the cell (used for specific data type handling in the data to be displayed - recommended)
• Choose auto width or fixed width
• Choose text alignment
• Choose styling (fixed or state formatting)
• Designate a column to be editable (with or without validation)
If you wish to apply a fixed (non-dynamic) style, select Fixed Style Definition and choose a previously defined style definition. If you wish to do dynamic formatting (color context, etc. based on returning data in a row) then choose state-based formatting.
With state-based formatting, you individually configure each column of data, applying a specific style to the column based on data in the row. For each column that you wish to define a state formatter for, you must do the following:
• Select the column the formatting will be dependent on (it can be any column, hidden or not, in the returning data service)
• Select the state definition you wish to use (one per column, and it should match the data type of the dependent field)
• Accept the default values for the state definition or override them specifically for this grid definition and rendering
With the grid set to Editable, you can then also designate specific columns to be editable. You also have the ability to add validation based upon the column names using JavaScript comparisons.
Example:
Validation - Column1 > 5 && Column3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10
Message - You must have Col 1 > 5 and Col 3 < 10