igniteui-angular-samples/src/app/grid/grid-cell-merge-sample/grid-cell-merge-sample.component.html at e06c4e11a2d1cbf48283343816435bc1ad6beaec · IgniteUI/igniteui-angular-samples · 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
<div class="grid__wrapper">
  <igx-grid [igxPreventDocumentScroll]="true" #grid1 [data]="data" [width]="'100%'" [height]="'570px'" [rowSelection]="selectionMode"  [cellMergeMode]="cellMergeMode">
    <igx-column field="OrderID" header="Order ID" [hidden]="true" >
    </igx-column>
    <igx-column field="ShipperName" header="Shipper Name" width="250px" [merge]="true" [editable]="true" sortable="true">
    </igx-column>
    <igx-column field="Salesperson" header="Salesperson" width="250px" [merge]="true" [editable]="true" sortable="true">
    </igx-column>
    <igx-column field="Discontinued" header="Discontinued" width="200px" [merge]="true" [editable]="true" sortable="true">
      <ng-template igxCell let-cell="cell" let-val>
        @if (val) {
          <img src="assets/images/grid/active.png" title="Continued" alt="Continued" />
        }
        @if (!val) {
          <img src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
        }
      </ng-template>
    </igx-column>
    <igx-column field="UnitPrice" header="Unit Price" width="150px" [formatter]="formatCurrency" dataType="number">
    </igx-column>
    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number" [editable]="true">
    </igx-column>
    <igx-column field="ShipCountry" header="Ship Country" width="200px" [merge]="true" [editable]="true">
    </igx-column>
    <igx-column field="ShipCity" header="Ship City" width="250px" [merge]="true" [editable]="true">
    </igx-column>
    <igx-column field="ShipName" header="Ship Name" width="250px">
    </igx-column>
    <igx-column field="PostalCode" header="Postal Code" width="200px">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date" width="200px" [formatter]="formatDate">
    </igx-column>
    <igx-grid-toolbar>
        <igx-select [(ngModel)]="cellMergeMode">
          <label igxLabel>Select Merge Type</label>
          @for (type of mergeTypes; track type) {
            <igx-select-item [value]="type.value">
              {{type.name}}
            </igx-select-item>
          }
        </igx-select>
      </igx-grid-toolbar>
  </igx-grid>
</div>