
<dx-data-grid id="setContainer"
    [dataSource]="dataSource"
    [focusedRowEnabled]="false"
    keyExpr="Id"
    [repaintChangesOnly]="true"
    (onToolbarPreparing)="onToolbarPreparing($event)"
    (onCellClick)="onClickParentCell($event)"
    [showBorders]="true">

    <dxo-paging [enabled]="false"></dxo-paging>
    <dxi-column [width]="300" caption="Props" dataField="Propertyname" alignment="center"
                cellTemplate="cellTemplateMS" [allowFiltering]="false" [allowSorting]="true">
      <div *dxTemplate="let data of 'cellTemplateMS'">
        <dx-button [width]="250">{{ data.value }}</dx-button>
      </div>
    </dxi-column>
    <dxi-column dataField="Value" [allowSorting]="true"></dxi-column>
    <dxi-column dataField="Description" [allowSorting]="true"></dxi-column>
</dx-data-grid>

<dx-popup
width="100%"
height="100%"
[showTitle]="true"
[title]="getCurrentTitle()"
[hideOnOutsideClick]="true"
[dragEnabled]="false"
[(visible)]="showProperties">
    <dxo-position
      my="center"
      at="center"
      of="#targetElement">
    </dxo-position>
    <dx-button text="Save" (onClick)="onSave()"></dx-button>
    <dx-button text="Close" (onClick)="onClose()"></dx-button>
    <dx-scroll-view #scrollView id="scrollview" [scrollByContent]="true" showScrollbar="always">
        <app-properties #propsContainer [(parentVisible)]="showProperties">
        </app-properties>
    </dx-scroll-view>
</dx-popup>
