getting-started-with-devextreme-treelist/Angular/src/app/app.component.html at 26.1.3+ · DevExpress-Examples/getting-started-with-devextreme-treelist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<div id="app-container">
  <dx-tree-list
    id="tree-list"
    [dataSource]="employees"
    [rootValue]="-1"
    keyExpr="ID"
    parentIdExpr="HeadID"
    [autoExpandAll]="expanded"
    [(expandedRowKeys)]="expandedRowKeys"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
    (onSelectionChanged)="selectEmployee($event)"
    [height]="800"
  >
    <dxi-tree-list-column dataField="FullName" [fixed]="true">
      <dxi-tree-list-validation-rule
        type="required"
      ></dxi-tree-list-validation-rule>
    </dxi-tree-list-column>
    <dxi-tree-list-column dataField="Position">
      <dxi-tree-list-validation-rule
        type="required"
      ></dxi-tree-list-validation-rule>
    </dxi-tree-list-column>
    <dxi-tree-list-column dataField="BirthDate" dataType="date" [width]="100">
      <dxi-tree-list-validation-rule
        type="required"
      ></dxi-tree-list-validation-rule>
    </dxi-tree-list-column>
    <dxi-tree-list-column dataField="HireDate" dataType="date" [width]="100">
      <dxi-tree-list-validation-rule
        type="required"
      ></dxi-tree-list-validation-rule>
    </dxi-tree-list-column>
    <dxi-tree-list-column dataField="City"></dxi-tree-list-column>
    <dxi-tree-list-column dataField="State">
      <dxi-tree-list-validation-rule
        type="required"
      ></dxi-tree-list-validation-rule>
    </dxi-tree-list-column>
    <dxi-tree-list-column
      dataField="Email"
      [visible]="false"
    ></dxi-tree-list-column>
    <dxi-tree-list-column dataField="MobilePhone"></dxi-tree-list-column>
    <dxi-tree-list-column dataField="Skype"></dxi-tree-list-column>

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

    <dxo-tree-list-toolbar>
      <dxi-tree-list-item location="after">
        <dx-button
          [text]="expanded ? 'Collapse All' : 'Expand All'"
          [width]="136"
          (onClick)="toggleExpansion()"
        >
        </dx-button>
      </dxi-tree-list-item>
      <dxi-tree-list-item
        name="addRowButton"
        showText="always"
      ></dxi-tree-list-item>
      <dxi-tree-list-item name="exportButton"></dxi-tree-list-item>
      <dxi-tree-list-item name="columnChooserButton"></dxi-tree-list-item>
      <dxi-tree-list-item name="searchPanel"></dxi-tree-list-item>
    </dxo-tree-list-toolbar>

    <dxo-tree-list-row-dragging
      [onDragChange]="onDragChange"
      [onReorder]="onReorder"
      [allowDropInsideItem]="true"
      [allowReordering]="true"
    >
    </dxo-tree-list-row-dragging>

    <dxo-tree-list-paging
      [enabled]="true"
      [pageSize]="12"
    ></dxo-tree-list-paging>
    <dxo-tree-list-scrolling mode="standard"></dxo-tree-list-scrolling>
  </dx-tree-list>

  @if (selectedEmployee) {
  <p id="selected-employee">
    Selected employee: {{ selectedEmployee.FullName }}
  </p>
  }
</div>