Mashup Builder > Widgets > Grid Widget
  
Grid Widget
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 runtime 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.
View the following video tutorial for more information: How to Use a Grid Widget.
* 
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.
* 
Rendering features such as cell editing and styling are not available if this property is enabled.
BOOLEAN
False
N
N
ShowDataLoading
Displays the data while it loads.
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 runtime?
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 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