app.component.html

<div id="app-container">
  <dx-tree-list id="treeList"
    [dataSource]="employees"
    [rootValue]="-1"
    keyExpr="ID"
    parentIdExpr="HeadID"
    [autoExpandAll]="true"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
    (onSelectionChanged)="selectEmployee($event)">

    <dxi-column dataField="FullName" [fixed]="true">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column 
      dataField="Position">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column
      dataField="BirthDate"
      dataType="date"
      [width]="100">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column
      dataField="HireDate"
      dataType="date"
      [width]="100">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column
      dataField="State">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="Email" [visible]="false"></dxi-column>
    <dxi-column dataField="MobilePhone"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>

    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxo-search-panel [visible]="true"></dxo-search-panel>
    <dxo-selection mode="single"></dxo-selection>
    <dxo-editing
      mode="popup"
      [allowUpdating]="true"
      [allowDeleting]="true"
      [allowAdding]="true">
    </dxo-editing>

    <dxo-row-dragging
      [onDragChange]="onDragChange"
      [onReorder]="onReorder"
      [allowDropInsideItem]="true"
      [allowReordering]="true"
    ></dxo-row-dragging>
    
    <dxo-paging 
      [enabled]="true"
      [pageSize]="10">
    </dxo-paging>
    
  </dx-tree-list>
  
  <p id="selected-employee" *ngIf="selectedEmployee">
    Selected employee: {{ selectedEmployee.FullName }}
  </p>
</div>