Mashup Builder > Widgets > Legacy Widgets > Advanced Grids (Legacy) > Working with Tree Grid Data
Working with Tree Grid Data
Using a Tree-Loading Data Service
In a Tree Grid, the relationships between parent and child nodes of data add complexity to querying and filtering tasks. To simplify the process, most of the functionality is encoded in one JavaScript data service, a sample of which is provided in the Advanced Grids Samples File. You can add the provided JavaScript code to a service, either entirely or in pieces, to support tree grid features in your own mashups.
When necessary, you can also convert the API implementations described in the sample data service into a java-based service. Ensure that the input parameter names remain the same and the returned infotable contains the correct listing of rows for each API required in the service.
Binding this data service to your grid is required to take full advantage of tree grid functionality, such as the following:
Loading initial child data, with optional query and data filter parameters.
Automatically expanding rows according to a specified expansion path (leafID).
Searching for child data that matches specified query parameters.
Using a data filter widget to filter for child data that matches specified filter query parameters.
To use the provided GetPartsData sample tree-loading data service, it must be slightly customized (to point to the location of your data), added to a Thing in Composer, and bound to the grid. Follow these steps:
1. Use the information in the Advanced Grids Samples File section to save the samples and import them into ThingWorx Composer.
2. The sample data service for tree grid functionality is GetPartsData. To find it, follow these steps:
a. From Composer, browse to Modeling/Things and open the GridAdvancedExampleServices Thing.
b. Click Services in the left panel and the available sample services appear.
c. Select the GetPartsData service and click Edit to view the script window.
d. Click Fullscreen for easier viewing.
3. In the section of the script Your Data Store, customize the getEntriesFromDataStore function so that it points to the location of your child data source. See the figure below.
If the source is a data table, only update the name of the table in the YOUR_DATATABLE_THING variable.
If the source is a data stream, a Data Shape, or a third party platform, update the getEntriesFromDataStore function accordingly.
4. In the rows section of the script, make sure the parentId value is ‘/’ for any top-level row that does not have a parent row. This value indicates root level and is necessary to ensure that the GetPartsData service can correctly sort and search your data.
If you prefer to use a different value to indicate root level, modify the ROOT_ID_VALUE parameter at the top of the script. You can use any non-empty string, such as: /Root, //, or a single space .
5. Save your changes. You can now use the service as is or copy and paste the script to a service on your own Thing in Composer
6. In the Mashup Builder, where you are creating the tree grid, add the data service as another entity in the right panel.
7. From the data service entity in the right panel, under Returned Data, drag All Data to the grid and bind it to the Data or ChildData property. You can connect data and child data to the same or different sources.
8. Bind the Filter and the Filter Query properties to the data service so that all of the sort, search, and filter parameters can be combined and appropriate results can be output.
9. Save and view the completed mashup.
Was this helpful?