devextreme-pivotgrid-edit-data-using-datagrid/jQuery/src/index.js at 25.1.3+ · DevExpress-Examples/devextreme-pivotgrid-edit-data-using-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
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
126
$(() => {
  let drillDownDataSource = {};
  const data = new DevExpress.data.ArrayStore({
    data: sales,
    key: 'id',
  });
  $('#sales').dxPivotGrid({
    allowSortingBySummary: true,
    allowSorting: true,
    allowFiltering: true,
    allowExpandAll: true,
    showBorders: true,
    fieldChooser: {
      enabled: false,
    },
    onCellClick(e) {
      if (e.area === 'data') {
        const pivotGridDataSource = e.component.getDataSource();
        const rowPathLength = e.cell.rowPath.length;
        const rowPathName = e.cell.rowPath[rowPathLength - 1];
        const popupTitle = `${rowPathName || 'Total'} Drill Down Data`;

        drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(
          e.cell,
        );
        salesPopup.option('title', popupTitle);
        salesPopup.show();
      }
    },
    dataSource: {
      fields: [
        {
          caption: 'Region',
          width: 120,
          dataField: 'region',
          area: 'row',
        },
        {
          caption: 'City',
          dataField: 'city',
          width: 150,
          area: 'row',
        },
        {
          dataField: 'date',
          dataType: 'date',
          area: 'column',
        },
        {
          caption: 'Total',
          dataField: 'amount',
          dataType: 'number',
          summaryType: 'sum',
          format: 'currency',
          area: 'data',
        },
      ],
      store: data,
    },
  });

  const salesPopup = $('#sales-popup')
    .dxPopup({
      width: 600,
      height: 400,
      contentTemplate(contentElement) {
        $('<div />')
          .addClass('drill-down')
          .dxDataGrid({
            editing: {
              allowUpdating: true,
              allowAdding: true,
              allowDeleting: true,
            },
            onRowUpdating(e) {
              data.update(e.key, e.newData);
            },
            onRowInserting(e) {
              data.insert(e.data);
            },
            onRowRemoving(e) {
              data.remove(e.key);
            },
            width: 560,
            height: 300,
            columns: [
              'region',
              'city',
              {
                dataField: 'amount',
                dataType: 'number',
              },
              {
                dataField: 'date',
                dataType: 'date',
              },
            ],
          })
          .appendTo(contentElement);
      },
      onShowing() {
        drillDownDataSource.store().load().done((items) => {
          $('.drill-down')
            .dxDataGrid('instance')
            .option('dataSource', {
              store: new DevExpress.data.ArrayStore({
                key: data.key(),
                data: items,
              }),
            });
        });
      },
      onHiding() {
        $('#sales')
          .dxPivotGrid('instance')
          .getDataSource()
          .reload();
      },
      onShown() {
        $('.drill-down')
          .dxDataGrid('instance')
          .updateDimensions();
      },
    })
    .dxPopup('instance');
});