Displays a grid where each block is filled by a thing-definition specific template.
code_blocksDesign View
In the template editor, you can find the Thing Grid icon 
code_blocksCode View
Template Syntax
Below you can find some examples of how to use the component within a template.
<thing-grid-widget template="small-details" elementClass="grid-element-container m-2"></thing-grid-widget>
Component Reference
Here is a comprehensive list of all the elements and properties that can be used to configure the component.
| Thing Grid <thing-grid-widget> | |
|---|---|
| PROPERTIES | |
| Click On Block | The flag enabling the click on single block to open its details page. Type: BOOLEAN | Optional | Values: true
false
[clickOnBlockEnabled]="true" |
| Container CSS Class | The CSS class applied to grid container element (default is 'd-flex align-items-stretch flex-wrap'). Type: STRING | Optional containerClass="fooBar" |
| CSS Class | The name(s) of the CSS class used to customize the widget layout. Type: STRING | Optional class="my-custom-class" |
| Element CSS Class | The CSS class applied to each grid element (default is 'm-2 flex-grow-1'). Type: STRING | Optional elementClass="fooBar" |
| Hide When Empty | The flag indicating whether the widget is hidden when empty. Type: BOOLEAN | Optional | Values: true
false
[hideWhenEmpty]="true" |
| Id | The id used by other page widgets to listening on the things selection through the 'queryFieldRef' input. Type: STRING | Optional id="fooBar" |
| Initial Sorting | The array of property names and criteria to use for sorting (e.g. ['name','asc','serialNumber','desc']). Type: SORT_PROPERTIES | Optional sort="['name','asc','serialNumber','desc']" |
| Multiple Section Enabled | The flag indicating whether more than one thing can be selected; if so, an id must also be specified (e.g., selected-things-1). Type: BOOLEAN | Optional | Values: true
false
[multipleSelection]="true" |
| Template | The name of the thing-definition template to display for each thing. Type: STRING | Required template="fooBar" |
| Title | The title displayed on the top part of the widget box. Type: STRING | Optional [title]="'Details'" |
Comments
0 comments
Please sign in to leave a comment.