---
title: "Thing Grid"
slug: "thing-grid-widget"
updated: 2026-04-17T07:44:52Z
published: 2026-04-17T07:44:52Z
canonical: "learn.servitly.com/thing-grid-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Thing Grid

Displays a grid where each block is filled by a thing-definition specific template.

![Thing Grid](https://components-manager.servitly.com/components/ThingGrid_1/IMAGES/_screenshot?owner=AG_Servitly)

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <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 `&lt;thing-grid-widget&gt;`

| *Click On Block* | The flag enabling the click on single block to open its details page. **Name**: clickOnBlockEnabled **Type**: BOOLEAN \| Optional `[clickOnBlockEnabled]="true"` |
| --- | --- |
| *Hide When Empty* | The flag indicating whether the widget is hidden when empty. **Name**: hideWhenEmpty **Type**: BOOLEAN \| Optional `[hideWhenEmpty]="true"` |
| *Id* | The id used by other page widgets to listening on the things selection through the 'queryFieldRef' input. **Name**: id **Type**: STRING \| Optional `id="abc"` |
| *Initial Sorting* | The array of property names and criteria to use for sorting (e.g. ['name','asc','serialNumber','desc']). **Name**: sort **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). **Name**: multipleSelection **Type**: BOOLEAN \| Optional `[multipleSelection]="true"` |
| *Template* | The name of the thing-definition template to display for each thing. **Name**: template **Type**: STRING \| Required `template="abc"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Thing Grid'"` |
| **Advanced** |
| *Container CSS Class* | The CSS class applied to grid container element (default is 'd-flex align-items-stretch flex-wrap'). **Name**: containerClass **Type**: STRING \| Optional `containerClass="abc"` |
| *Element CSS Class* | The CSS class applied to each grid element (default is 'm-2 flex-grow-1'). **Name**: elementClass **Type**: STRING \| Optional `elementClass="abc"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<thing-grid-widget    
    [title]="'Thing Grid'"
    template="abc"
    sort="['name','asc','serialNumber','desc']"
    [clickOnBlockEnabled]="true"
    [hideWhenEmpty]="true"
    [multipleSelection]="true"
    id="abc"
    containerClass="abc"
    elementClass="abc"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></thing-grid-widget>
```