@c8y/apps/tutorial/grids/device-grid-example/device-grid-example.component.html

Cumulocity IoT applications

<c8y-title>Data grid examples</c8y-title>

<div class="card">
  <div class="card-header separator">
    <h4 class="card-title">Device grid</h4>
  </div>
  <div class="card-block">
    <p>
      The following example features
      <code>DeviceGridComponent</code>
      and:
    </p>
    <ul>
      <li>displaying a filterable and sortable list of devices</li>
      <li>loading grid configuration from presets (columns, stored filtering and sorting)</li>
      <li>event handlers for: columns config changes, device query string changes</li>
      <li>custom validators for filters (based on <a href="https://formly.dev/docs/guide/validation/#3-declaring-validation-function-and-message-within-field-definition" target="_blank" rel="noopener noreferrer">Formly documentation</a>)</li>
    </ul>

    <div class="form-group">
      <label for="exampleSelect">Select a preset example</label>
      <div class="c8y-select-wrapper">
        <select
          id="exampleSelect"
          class="form-control"
          [ngModel]="selectedExample"
          (ngModelChange)="selectExample($event)"
        >
          <option *ngFor="let example of examples" [ngValue]="example">
            {{ example.label }}
          </option>
        </select>
        <span></span>
      </div>
    </div>

    <c8y-device-grid
      [title]="'Devices'"
      [columns]="columnsInput"
      [actionControls]="[]"
      (onColumnsChange)="onColumnsChange($event)"
      (onDeviceQueryStringChange)="onDeviceQueryStringChange($event)"
    ></c8y-device-grid>
  </div>
</div>