devextreme-pivotgrid-edit-data-using-datagrid/Angular/src/app/app.component.html 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
<div class="long-title">
  <h3>Sales Amount by Region</h3>
</div>
<dx-pivot-grid
  id="sales"
  [allowSortingBySummary]="true"
  [allowSorting]="true"
  [allowFiltering]="true"
  [allowExpandAll]="true"
  [height]="440"
  [showBorders]="true"
  [dataSource]="pivotGridDataSource"
  (onCellClick)="onCellClick($event)"
>
  <dxo-pivot-grid-export
    [enabled]="true"
    fileName="Sales"
  ></dxo-pivot-grid-export>
  <dxo-pivot-grid-field-chooser
    [enabled]="false"
  ></dxo-pivot-grid-field-chooser>
</dx-pivot-grid>
<dx-popup
  [width]="600"
  [height]="400"
  [title]="popupTitle"
  [showCloseButton]="true"
  [(visible)]="popupVisible"
  (onShowing)="onPopupShowing()"
  (onHiding)="onPopupHiding()"
  (onShown)="onPopupShown()"
>
  <div *dxTemplate="let data of 'content'">
    <dx-data-grid
      #drillDownDataGrid
      [dataSource]="dataGridDataSource"
      [showBorders]="true"
      [width]="560"
      [height]="300"
      (onRowUpdating)="onRowUpdating($event)"
      (onRowInserting)="onRowAdding($event)"
      (onRowRemoving)="onRowRemoving($event)"
    >
      <dxo-data-grid-editing
        [allowUpdating]="true"
        [allowAdding]="true"
        [allowDeleting]="true"
      >
      </dxo-data-grid-editing>
      <dxi-data-grid-column dataField="region"></dxi-data-grid-column>
      <dxi-data-grid-column dataField="city"></dxi-data-grid-column>
      <dxi-data-grid-column
        dataField="amount"
        dataType="number"
      ></dxi-data-grid-column>
      <dxi-data-grid-column
        dataField="date"
        dataType="date"
      ></dxi-data-grid-column>
    </dx-data-grid>
  </div>
</dx-popup>