Grid Widget
Use the Grid widget to inspect, view, and analyze data from an infotable source. Each infotable column in the data source is displayed as a column on the Grid. The following configurations are available in ThingWorx 9.3 or later:
Enable editing on a grid, row, or cell level.
Resize and reorder columns at run time.
Display a run-time menu that enables users to show, hide, and reorder columns on the grid.
Define validation rules and messages to validate input when editing is enabled.
Display row number in a separate column.
Set a minimum and a maximum width for the grid columns.
Configure the widget dynamically using JSON configuration data.
* 
You must update the output of existing data services for the Grid (Advanced) widget to JSON.
Add a footer section.
Display a confirmation message when deleting rows. This configuration is available in ThingWorx 9.3.1 or later.
The following is a list of available configurations in ThingWorx 9.2:
Format data columns using renderers and apply state formatting.
Sort column data in a descending or an ascending order.
Filter data using a filter box.
Align content within the header and body cells.
Display a check box for row selection.
Set the column width automatically or manually using pixel, percentage, or fraction values.
Display the header and body rows as a single line and prevent text wrapping.
Set the minimum and maximum height of the grid rows.
Select single or multiple rows on the grid.
In addition, you can combine the Grid with other widgets such as the Pagination, Chip Based Data Filter, and the Toolbar to create unique and interactive data views within a mashup.
* 
The Grid widget is also available as a web component in the ThingWorx Web Component SDK.
Performance Considerations
The Grid widget supports large data sets that contain millions of rows. However, displaying millions of rows impacts load time performance, and makes it difficult to find and analyze information. Following are best practices for the Grid widget:
Avoid creating data tables with millions of rows.
Set appropriate minimum and maximum row height to display data rows in an accessible way.
Use pagination to break large sets into multiple pages and allow users to control how many rows to display on each page.
Grid Widget Anatomy
1. Title
2. Grid filter area
3. Header row
4. Body rows
5. Row selection check box
6. Column sort button
Keyboard Keys
Key
Description
TAB
Change the focus box to highlight the main grid elements, such as the filter, selection check boxes, and sort buttons in the header.
Arrow keys
Use the UP, DOWN, LEFT, and RIGHT arrow keys to change the focus vertically or horizontally.
HOME
END
Focus on the first or last cell in the current row.
PAGE UP
PAGE DOWN
Focus on the first or last visible cell in the current column or row.
SPACE
ENTER
Trigger a RowClicked event or select the current row when row selection is enabled.
The following table lists the properties of the Grid widget that are available in ThingWorx 9.3 or later:
* 
Properties that are marked with asterisk (*) are supported in the dynamic Grid configuration. For more information about dynamic configuration, see Configuring the Grid using JSON Data.
Property Name
Description
Base Type
Default Value
Bindable?
Localizable? (Y/N)
IsEditable*
Enables users toeditthegriddata atruntime.By default, the grid data is saved automatically whentheeditmode is applied tothe entire grid.
BOOLEAN
False
In/Out
N
EditLevel*
Controlshow users caneditthe griddataat run time.Select EntireGridto editandsaveall changes atthe same time,SingleRowtoedit and savechanges foronerowat a time, orSingle Cell to edit and save changes forone cell at a time.
STRING
Single Cell
No
N
EditButton*
Displays anedit controlon thegridtoolbar that allows users toturn editing on or off.
BOOLEAN
False
No
N
RowAddButton*
Displaysan Addbuttonon thegrid toolbar, whichenablesusersto addnewrowsto thegridusingaform.
BOOLEAN
False
No
N
RowDeleteButton*
Displaysabuttononthegrid toolbar thatallowsusersto deletethe selected rows.
BOOLEAN
False
No
N
ConfirmDelete
A bindable service that enables you to bind the delete row button to a Confirmation function.
Service
N/A
In
N
DeleteRowClicked
An event that triggers when the delete row button on the grid toolbar is clicked.
Event
N/A
Out
N
RowEditFormTitle*
Specifiesatitleto displayfor the row editform. To hide the title and use the area for the form, leave this empty.
STRING
N/A
In
Y
EditControlVisibility*
Specifieswhento displaytheediting controlson the grid. Supported options are: On hover or focus, Always, None.
STRING
On hover or focus
In
N
EditControlType*
Sets the controlelement to use for editing the grid. The available options are Icon or Link. You can choose an icon or set the link text using the EditControlIcon and EditControlLabel properties.
STRING
Link
No
N
EditControlLabel*
Sets the label for the editcontrol when EditControlType is set to Link.
STRING
Edit
In
Y
EditControlIcon*
The iconto displayfor the edit control when EditControlType is set to Icon.
IMAGE
N/A
No
N
EditCellStarted
An eventthat triggerswhen a user starts editing a cell on the grid.
Event
N/A
Out
N
EditCellCompleted
An eventthat triggerswhen a user finishes editing a cell on the grid.
Event
N/A
Out
N
EditRowStarted
An eventthat triggerswhen a user starts editing a row on the grid.
Event
N/A
Out
N
EditRowCompleted
An eventthat istriggeredwhena user finishes editing a row in the grid.
Event
N/A
Out
N
EditCanceled
An eventthat triggerswhenauser clicks the Cancel button.
Event
N/A
Out
N
Cancel
A bindable data service that cancels current edits to the grid without saving.
Service
N/A
In
N
EditStarted
An eventthat triggerswhen the Edit buttonis clicked.
Event
N/A
Out
N
EditCompleted
An eventthattriggers when the Save clicked buttonis clicked after making edits.
Event
N/A
Out
N
EditedData
An infotable that contains the edited items on the grid.
INFOTABLE
N/A
Out
N
DeletedData
An infotable that contains deleted items on the grid. To delete the data from the server, bind the infotable to a custom data service.
INFOTABLE
N/A
Out
N
HighlightDraftState
Highlights cells with unsaved changes using a different color when editing on a cell level.
BOOLEAN
False
No
N
ShowValidationSuccess*
Show a success message when the entered data is validated as successful.
BOOLEAN
False
No
N
ValidationSuccessIcon*
The icon to display next to the success message.
media picker
Success icon
No
N
ShowValidationFailure*
Show a failure message when the entered data fails the validation.
BOOLEAN
False
No
N
ValidationFailureIcon*
The icon to display next to the failure message.
media picker
Info icon
No
N
ShowValidationCritera*
Show a hint message about the required input pattern when editing a cell on the grid.
BOOLEAN
False
No
N
ValidationCriteriaIcon*
The icon to display next to the hint message for the validation criteria.
media picker
Info icon
No
N
ShowFooter*
Adds a footer area to the grid.
BOOLEAN
False
No
N
ShowHeaderRowInFooter*
Shows the header row within the grid footer when ShowFooter is set to True.
BOOLEAN
False
No
N
FooterData*
An infotable that contains configuration data for the grid footer.
INFOTABLE
N/A
In
N
ShowRowNumbers*
Show row numbers
BOOLEAN
False
N/A
N
ColumnsMenuOptions*
Controls the options to display within the column configuration menu at run time. Select None to hide the menu.
None—Hides the menu button.
Visibility—Displays a check boxes next to each column name, which enables you to control the column visibility.
Order—Displays a drag icon next to each column name, which enables you to reorder columns.
Visibility and Order—Displays both of the previous options.
STRING
None
No
N
ColumnsMenuVisibleItems*
Sets the number of items to display initially when the columns configuration menu is opened at run time. Use this property to restrict the menu height. A scroll bar is displayed for additional columns.
NUMBER
6
No
N
The following table lists the properties of the Grid widget in 9.2:
Property
Description
Base Type
Default Value
Binding
Localizable
CacheRuntimeChanges
Stores the grid sorting options within the browser cache, which persist when a user navigates to a different page or mashup.
BOOLEAN
True
N/A
N
ClearFilteredSelection
Controls whether row selection is retained when filtering or sorting the grid data. Enable this property to clear selections when a selected row is outside the grid view.
* 
This property only affects the simple filter box, and does not apply to external widgets that contain data, such as Chip Based Data Filter and Pagination.
BOOLEAN
N/A
N/A
N
Data
The infotable data source to display when the grid is viewed at run time.
INFOTABLE
N/A
In
N
DefaultSelectedRows*
Specifies the row numbers to select in advance when the Grid is loaded. You can type a numeric range such as 1-10, or a comma-separated list such as 2, 4, 5.
STRING
N/A
In
N
ShowFilter
Displays a filter box on the grid.
BOOLEAN
False
Y
N
Filter
An event that triggers when the grid is sorted or filtered.
Event
N/A
N/A
N
FilterLabel*
Sets the label of the filter box.
STRING
N/A
In
Y
FilterString*
The filter string of the simple filter box.
STRING
N/A
In/Out
N
HideHeaderRow*
Hides the header row.
BOOLEAN
False
In
N
IDFieldName*
Select the infotable column which contains the primary key or the ID for each row on the grid.
STRING
id
N/A
N
Label*
Specifies the text for the grid label.
STRING
Grid Title
In
Y
LabelType*
Sets the grid label type.
STRING
Sub-Header
N/A
N
LastClickedRow
An infotable that contains the data of the last clicked row in the grid.
INFOTABLE
N/A
N/A
N
MaxHeaderHeight
The maximum height for the grid header in pixels.
NUMBER
Auto
In
N
MaxRowHeight
Specifies the maximum height of rows on the grid in pixels. By default, the height value is set based on the content of each row
NUMBER
Auto
In
N
MinRowHeight
Specifies the minimum height of rows on the grid in pixels
NUMBER
48
In
N
QueryFilter
A bindable property that contains the filter query to apply to the grid data. You can bind the property to a Data Filter widget and a data service to filter data on the grid.
QUERY
N/A
In/Out
N
Reset
A bindable service that enables you to reset the Grid widget to its initial configuration at run time.
Service
N/A
N/A
N
RowClicked
An event that triggers when a row in the grid is clicked.
Event
N/A
N/A
N
RowFormat
Opens a dialog box that enables to select a state definition that you can you apply to the grid rows. You can override this state formatting for cells by applying state formatting to columns in the widget configuration dialog box.
State Definition
N/A
N/A
N
RowSelection*
Controls the number of data rows on the grid that a user can select at the same time. The available options are:
None (default), Single, and Multiple.
STRING
None
In
N
SelectedRows
An infotable property that enables you to set or retrieve the selected data rows on the Grid.
INFOTABLE
N/A
In/Out
N
SelectedRowsChanged
An event that triggers when the selected rows are changed.
Event
N/A
N/A
N
SelectedRowsChangedCallback*
Triggers the SelectedRowsChanged event when the selected rows are changed manually or using a data service. When set to False, the event is triggered only when row selections are changed manually.
BOOLEAN
True
N/A
SelectionCheckBoxHeaderAlignment
In ThingWorx 9.2, controls the vertical alignment of the selection check box in the header row.
STRING
Top
N/A
N
SelectionCheckboxRowAlignment
Controls the vertical alignment of check boxes in the row selection column.
STRING
Top
N/A
N
SingleLineHeader*
Displays the header row text on a single line. Text is truncated when it exceeds the available space. By default, the header text is displayed across multiple lines.
BOOLEAN
False
In
N
SingleLineRows*
Displays the content of each row on a single line. An ellipsis is displayed when the full content cannot fit within a row. By default, content is displayed across multiple lines.
BOOLEAN
False
In
N
SortSelectionColumn*
Add a sort button to the check box selection column. This enables you to sort data rows based on whether they are selected or not.
BOOLEAN
False
N/A
N
TabSequence
The sequence number of the widget when you press the TAB key.
NUMBER
0
N/A
N
Was this helpful?