<div class="card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24">
  <div
    class="h4 text-center text-medium"
    id="drawerTitle"
    translate
  >
    Add custom column
  </div>
</div>
<c8y-data-grid
  class="min-height-0 flex-grow d-col"
  [title]="'Asset properties' | translate"
  [loadMoreItemsLabel]="'Load more asset properties' | translate"
  [loadingItemsLabel]="'Loading asset properties…' | translate"
  [displayOptions]="displayOptions"
  [headerActionControls]="headerActionControls"
  [columns]="columns"
  [treeGrid]="true"
  [childNodePagination]="childNodePagination"
  parentNodeLabelProperty="title"
  [pagination]="pagination"
  [serverSideDataCallback]="serverSideDataCallback"
  [selectable]="true"
  [singleSelection]="true"
  (itemsSelect)="selectItem($event)"
></c8y-data-grid>
<div class="card-footer p-24 separator text-center">
  <button
    class="btn btn-default"
    type="button"
    (click)="close()"
  >
    {{ ' Cancel' | translate }}
  </button>
</div>