devextreme-datagrid-implement-cascading-dropdownboxes/jQuery/src/index.js 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
$(() => {
  $('#dataGrid').dxDataGrid({
    dataSource: data,
    editing: {
      allowUpdating: true,
      allowAdding: true,
    },
    columns: [
      {
        dataField: 'stateID',
        caption: 'State',
        lookup: {
          dataSource: states,
          displayExpr: 'Name',
          valueExpr: 'ID',
        },
        editCellTemplate: stateDropDownBoxEditorTemplate,
        cellTemplate(container, options) {
          arrayCellTemplate(container, options);
        },
        setCellValue(rowData, value) {
          rowData.stateID = value;
          rowData.cityID = [];
        },
      },
      {
        dataField: 'cityID',
        caption: 'City',
        lookup: {
          dataSource: cities,
          displayExpr: 'Name',
          valueExpr: 'ID',
        },
        editCellTemplate: cityDropDownBoxEditorTemplate,
        cellTemplate(container, options) {
          arrayCellTemplate(container, options);
        },
      },
    ],
  });
});

function arrayCellTemplate(container, options) {
  const noBreakSpace = '\u00A0';
  const text = (options.value || [])
    .map((element) => options.column.lookup.calculateCellValue(element))
    .join(', ');
  container.text(text || noBreakSpace).attr('title', text);
}

function stateDropDownBoxEditorTemplate(cellElement, cellInfo) {
  const dropDownBox = $('<div>').dxDropDownBox({
    dataSource: states,
    value: cellInfo.value,
    valueExpr: 'ID',
    displayExpr: 'Name',
    contentTemplate(e, element) {
      const dataGridEl = $('<div>');
      const dataGrid = dataGridEl
        .dxDataGrid({
          dataSource: states,
          keyExpr: 'ID',
          hoverStateEnabled: true,
          height: 250,
          selection: { mode: 'multiple' },
          selectedRowKeys: cellInfo.value,
        })
        .dxDataGrid('instance');

      const saveBtn = createDropDownSaveBtn(dataGrid, cellInfo, e.component);
      element.append(dataGridEl, saveBtn);
    },
  });

  cellElement.append(dropDownBox);
}

function cityDropDownBoxEditorTemplate(cellElement, cellInfo) {
  const cityDataSource = new DevExpress.data.DataSource({
    store: new DevExpress.data.ArrayStore({
      data: cities,
      key: 'ID',
    }),
    filter(data) {
      return cellInfo.row.data?.stateID ? cellInfo.row.data.stateID.includes(data.StateID) : true;
    },
  });

  const dropDownBox = $('<div>').dxDropDownBox({
    dataSource: cityDataSource,
    value: cellInfo.value,
    valueExpr: 'ID',
    displayExpr: 'Name',
    contentTemplate(e, element) {
      const dataGridEl = $('<div>');
      const dataGrid = dataGridEl
        .dxDataGrid({
          dataSource: cityDataSource,
          hoverStateEnabled: true,
          height: 250,
          columns: ['ID', 'Name'],
          selection: { mode: 'multiple' },
          selectedRowKeys: cellInfo.value,
        })
        .dxDataGrid('instance');

      const saveBtn = createDropDownSaveBtn(dataGrid, cellInfo, e.component);
      element.append(dataGridEl, saveBtn);
    },
  });

  cellElement.append(dropDownBox);
}

function createDropDownSaveBtn(dataGrid, cellInfo, dropDownBox) {
  return $('<div>').dxButton({
    text: 'Apply',
    onClick() {
      const selectedKeys = dataGrid.getSelectedRowKeys();
      cellInfo.setValue(selectedKeys);
      dropDownBox.option('value', selectedKeys);
      dropDownBox.close();
    },
  });
}