devextreme-datagrid-implement-cascading-dropdownboxes/Angular/src/app/app.component.html at 25.2.3+ · DevExpress-Examples/devextreme-datagrid-implement-cascading-dropdownboxes · 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
<div class="data-grid-demo">
  <dx-data-grid [dataSource]="data" [showBorders]="true">
    <dxo-data-grid-editing
      mode="row"
      [allowUpdating]="true"
      [allowAdding]="true"
    >
    </dxo-data-grid-editing>

    <dxi-data-grid-column
      dataField="StateID"
      caption="State"
      [setCellValue]="setStateValue"
      [cellTemplate]="arrayCellTemplate"
      editCellTemplate="stateDropDownBoxTemplate"
    >
      <dxo-data-grid-lookup
        [dataSource]="states"
        displayExpr="Name"
        valueExpr="ID"
      >
      </dxo-data-grid-lookup>
    </dxi-data-grid-column>

    <dxi-data-grid-column
      dataField="CityID"
      caption="City"
      [cellTemplate]="arrayCellTemplate"
      editCellTemplate="cityDropDownBoxTemplate"
    >
      <dxo-data-grid-lookup
        [dataSource]="getFilteredCities"
        displayExpr="Name"
        valueExpr="ID"
      >
      </dxo-data-grid-lookup>
    </dxi-data-grid-column>

    <div *dxTemplate="let cellInfo of 'stateDropDownBoxTemplate'">
      <dx-drop-down-box
        [dataSource]="states"
        [value]="cellInfo.value"
        valueExpr="ID"
        displayExpr="Name"
        contentTemplate="stateContentTemplate"
      >
        <div *dxTemplate="let data of 'stateContentTemplate'">
          <dx-data-grid
            [dataSource]="states"
            keyExpr="ID"
            [selectedRowKeys]="cellInfo.value"
            [hoverStateEnabled]="true"
            [height]="250"
            (onInitialized)="stateDataGrid = $event.component"
          >
            <dxi-data-grid-column dataField="ID"></dxi-data-grid-column>
            <dxi-data-grid-column dataField="Name"></dxi-data-grid-column>
            <dxo-data-grid-selection mode="multiple"></dxo-data-grid-selection>
          </dx-data-grid>
          <dx-button
            text="Apply"
            (onClick)="onClick(stateDataGrid, cellInfo, data.component)"
          >
          </dx-button>
        </div>
      </dx-drop-down-box>
    </div>

    <div *dxTemplate="let cellInfo of 'cityDropDownBoxTemplate'">
      <dx-drop-down-box
        [dataSource]="getCityDropDownDs(cellInfo)"
        [value]="cellInfo.value"
        valueExpr="ID"
        displayExpr="Name"
        contentTemplate="cityContentTemplate"
      >
        <div *dxTemplate="let data of 'cityContentTemplate'">
          <dx-data-grid
            [dataSource]="getCityDropDownDs(cellInfo)"
            [selectedRowKeys]="cellInfo.value"
            [hoverStateEnabled]="true"
            [height]="250"
            (onInitialized)="cityDataGrid = $event.component"
          >
            <dxi-data-grid-column dataField="ID"></dxi-data-grid-column>
            <dxi-data-grid-column dataField="Name"></dxi-data-grid-column>
            <dxo-data-grid-selection mode="multiple"></dxo-data-grid-selection>
          </dx-data-grid>
          <dx-button
            text="Apply"
            (onClick)="onClick(cityDataGrid, cellInfo, data.component)"
          >
          </dx-button>
        </div>
      </dx-drop-down-box>
    </div>
  </dx-data-grid>
</div>