Building an Advanced or Tree Grid
As with any data-rendering widget in ThingWorx Composer, a grid widget must be placed in a mashup and configured with incoming data bindings. To build an Advanced Grid or an Advanced Tree Grid, do the following:
1. Drag one of the following widgets onto a mashup:
◦ Grid Advanced
◦ Tree Grid Advanced
2. On the right, add a data source entity.
3. From the Returned Data, drag All Data to the grid and bind it to the Data property. This binding defines where the data is loaded from, when the grid is activated.
If you are building a Tree Grid, you can also bind a source for the child data. From Returned Data, either in the same data source entity or from a different source, drag All Data to the Child Data property on the grid. This binding defines where the child data comes from when subsequent nodes are expanded and the child data is loaded dynamically.
 |
Binding child data in a tree grid requires a specific kind of data service that provides the code necessary to properly sort, search, filter, and expand nodes. For more information, see Working with Tree Grid Data.
|
4. Define the grid configuration parameters using one of the following methods:
◦ Static Configuration – Use the list of properties available in the Mashup Builder to configure grid parameters. The available properties are listed in the left-side panel of the Design view. For information, see Properties for Advanced Grids.
◦ Dynamic Configuration – Write a configuration service that outputs a JSON object and bind it to the grid. For information and a sample script, see Working with a Configuration Service.
|
|
If the data source is tied to a Data Shape, you can also configure some grid parameters from the shortcut menu available in the top left of the widget in design view. For more information, see Column Configuration from the Context Menu.
|
5. Save and view the completed mashup.