devextreme-datagrid-maintain-cell-editing-with-advanced-editor/jQuery/src/index.js at 25.2.3+ · DevExpress-Examples/devextreme-datagrid-maintain-cell-editing-with-advanced-editor · 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
const OVERLAY_CLASS = 'dx-overlay-wrapper';
const BLOCK_CLICK_CLASS = 'dx-dropdowneditor-overlay';

$(() => {
  const $rootContainer = $('.dx-viewport')[0];
  const observer = new MutationObserver(() => {
    $(`.${OVERLAY_CLASS}`).addClass(BLOCK_CLICK_CLASS);
  });

  observer.observe($rootContainer, {
    attributes: false,
    childList: true,
    subtree: false,
  });

  $('#gridContainer').dxDataGrid({
    dataSource: tasks,
    keyExpr: 'ID',
    showBorders: true,
    paging: {
      enabled: true,
      pageSize: 15,
    },
    editing: {
      mode: 'cell',
      allowUpdating: true,
    },
    onRowInserted(e) {
      e.component.navigateToRow(e.key);
    },
    columns: [
      {
        dataField: 'AssigneeID',
        allowSorting: false,
        lookup: {
          dataSource: employees,
          valueExpr: 'ID',
          displayExpr: 'FullName',
        },
        validationRules: [{ type: 'required' }],
        editCellTemplate: dropDownBoxEditorTemplate,
      }, 'Task',
    ],
  });

  const popupContentTemplate = function () {
    const popupMain = $('<div>');
    popupMain.append(
      $('<div>').dxSelectBox({
        items: states,
        searchEnabled: true,
        showClearButton: true,
        onValueChanged(e) {
          $('#grid').dxDataGrid('instance').searchByText(e.value);
        },
      }),
    );

    return popupMain;
  };

  function dropDownBoxEditorTemplate(cellElement, cellInfo) {
    return $('<div>').dxDropDownBox({
      dropDownOptions: { width: '500px' },
      dataSource: employees,
      value: cellInfo.value,
      valueExpr: 'ID',
      displayExpr: 'FullName',
      inputAttr: { 'aria-label': 'Owner' },
      contentTemplate(e) {
        const mainDiv = $('<div>');

        const popupDiv = $('<div>');
        popupDiv.dxPopup({
          width: '400px',
          height: '150px',
          contentTemplate: popupContentTemplate,
          title: 'Search by state:',
          shading: false,
        });
        mainDiv.append(popupDiv);

        const popupButton = $('<div>');
        popupButton.dxButton({
          text: 'Search',
          onClick(evt) {
            popupDiv.dxPopup('instance').show();
          },
        });
        mainDiv.append(popupButton);

        const dropDownDiv = $("<div id='grid'>");
        dropDownDiv.dxDataGrid({
          keyExpr: 'ID',
          dataSource: employees,
          remoteOperations: true,
          columns: ['FullName', 'State', 'City'],
          hoverStateEnabled: true,
          scrolling: { mode: 'virtual' },
          height: '250px',
          selection: { mode: 'single' },
          selectedRowKeys: [cellInfo.value],
          focusedRowEnabled: true,
          focusedRowKey: cellInfo.value,
          onSelectionChanged(selectionChangedArgs) {
            e.component.option(
              'value',
              selectionChangedArgs.selectedRowKeys[0],
            );
            cellInfo.setValue(selectionChangedArgs.selectedRowKeys[0]);
            if (selectionChangedArgs.selectedRowKeys.length > 0) {
              e.component.close();
            }
          },
        });
        mainDiv.append(dropDownDiv);
        return mainDiv;
      },
    });
  }
});