getting-started-with-devextreme-datagrid/Angular/src/app/app.component.html at 26.1.3+ · DevExpress-Examples/getting-started-with-devextreme-datagrid · 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
<div id="app-container">
  <dx-data-grid
    id="data-grid"
    [dataSource]="employees"
    keyExpr="EmployeeID"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true"
    [allowColumnReordering]="true"
    (onSelectionChanged)="selectEmployee($event)"
    (onExporting)="exportGrid($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="Country" [groupIndex]="0" sortOrder="asc">
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="Address"></dxi-column>
    <dxi-column dataField="HomePhone"></dxi-column>
    <dxi-column dataField="PostalCode" [visible]="false"></dxi-column>
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxo-sorting mode="multiple"></dxo-sorting>
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxo-search-panel [visible]="true"></dxo-search-panel>
    <dxo-group-panel [visible]="true"></dxo-group-panel>
    <dxo-selection mode="single"></dxo-selection>
    <dxo-summary>
      <dxi-group-item summaryType="count"> </dxi-group-item>
    </dxo-summary>
    <dxo-editing
      mode="popup"
      [allowUpdating]="true"
      [allowDeleting]="true"
      [allowAdding]="true"
    >
    </dxo-editing>
    <dxo-grouping [autoExpandAll]="expanded"></dxo-grouping>
    <dxo-toolbar>
      <dxi-item name="groupPanel"></dxi-item>
      <dxi-item location="after">
        <dx-button
          [text]="expanded ? 'Collapse All' : 'Expand All'"
          [width]="136"
          (onClick)="expanded = !expanded"
        >
        </dx-button>
      </dxi-item>
      <dxi-item name="addRowButton" showText="always"></dxi-item>
      <dxi-item name="exportButton"></dxi-item>
      <dxi-item name="columnChooserButton"></dxi-item>
      <dxi-item name="searchPanel"></dxi-item>
    </dxo-toolbar>
    <dxo-master-detail [enabled]="true" [template]="'employee-info'">
    </dxo-master-detail>
    <div *dxTemplate="let employee of 'employee-info'">
      <img class="employee-photo" [src]="employee.data.Photo" />
      <p class="employee-notes">{{ employee.data.Notes }}</p>
    </div>
    <dxo-export [enabled]="true" [formats]="['xlsx', 'pdf']"> </dxo-export>
  </dx-data-grid>
  @if (selectedEmployee) {
  <p id="selected-employee">
    Selected employee: {{ selectedEmployee.FullName }}
  </p>
  }
</div>