igniteui-angular/src/app/grid-cellMerging/grid-cellMerging.component.html at a75bd7bc9b5f2db1c65eadb219318aaec50352bb · IgniteUI/igniteui-angular · 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
<h4 class="sample-title">Grid with cell merge</h4>

<div class="grid__wrapper">
  <igx-input-group type="search" class="searchInput">
    <igx-prefix>
      @if (searchText.length === 0) {
        <igx-icon>search</igx-icon>
      }
      @if (searchText.length > 0) {
        <igx-icon (click)="clearSearch()">clear</igx-icon>
      }
    </igx-prefix>

    <input #search1 id="search1" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid.findNext(searchText, false, false)"
      (keydown)="searchKeyDown($event)" />

      @if (searchText.length > 0) {
        <igx-suffix>
          @if (grid.lastSearchInfo) {
            <div class="resultsText">
              @if (grid.lastSearchInfo.matchInfoCache.length > 0) {
                <span>
                  {{ grid.lastSearchInfo.activeMatchIndex + 1 }} of {{ grid.lastSearchInfo.matchInfoCache.length }}
                  results
                </span>
              }
              @if (grid.lastSearchInfo.matchInfoCache.length === 0) {
                <span>
                  No results
                </span>
              }
            </div>
          }
          <div class="searchButtons">
            <button igxIconButton="flat" igxRipple (click)="grid.findPrev(searchText, false, false)">
              <igx-icon family="material">navigate_before</igx-icon>
            </button>
            <button igxIconButton="flat" igxRipple (click)="grid.findNext(searchText, false, false)">
              <igx-icon family="material">navigate_next</igx-icon>
            </button>
          </div>
        </igx-suffix>
      }
    </igx-input-group>
</div>
<igx-grid [data]="data" width="800px" height="550px" [moving]="true" #grid1
    [cellMergeMode]="'always'" [rowSelection]="'single'">
    <igx-column field="OrderID" header="Order ID">
        <ng-template igxCell let-cell="cell" let-val>
            Value: {{val}},Index: {{cell.row.index}}
          </ng-template>
    </igx-column>
    <igx-column field="ShipCountry" header="Ship Country" [merge]="true" width="200px" sortable="true">
    </igx-column>
    <igx-column field="OrderDate" header="Order Date" width="200px" [merge]="true" [groupable]="true" [dataType]="'date'" sortable="true">
    </igx-column>
    <igx-column field="PostalCode" header="Postal Code" width="200px" >
    </igx-column>
    <igx-column field="Discontinued" header="Discontinued" width="200px" sortable="true">
    </igx-column>
    <igx-column field="ShipName" header="Ship Name" width="250px">
    </igx-column>
    <igx-column field="ShipCity" header="Ship City" width="250px">
    </igx-column>
    <igx-column field="ShipperName" header="Shipper Name" width="250px">
    </igx-column>
    <igx-column field="Salesperson" header="Salesperson" width="250px">
    </igx-column>
    <igx-column field="UnitPrice" header="Unit Price" width="150px" dataType="number">
    </igx-column>
    <igx-column field="Quantity" header="Quantity" width="150px" dataType="number">
    </igx-column>

    <igx-action-strip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
    </igx-action-strip>
    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
            <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
</igx-grid>

<h4 class="sample-title">Hierarchical grid with cell merge</h4>

<igx-hierarchical-grid #hierarchicalGrid width="800px" [rowSelection]="'single'" [height]="'550px'" [data]="hierarchicalData" [autoGenerate]="false"
    [allowAdvancedFiltering]="true" [cellMergeMode]="'always'">
    <igx-grid-toolbar></igx-grid-toolbar>
    <igx-column field="EmployeeID" width="200px" [hidden]="true">
    </igx-column>
    <igx-column field="FirstName" width="200px">
    </igx-column>
    <igx-column field="LastName" width="200px">
    </igx-column>
    <igx-column field="Title" width="200px" [merge]="true"  [hasSummary]="true">
    </igx-column>
    <igx-column field="City" width="200px" [merge]="true" editable="true" sortable="true">
    </igx-column>
    <igx-row-island [key]="'Orders'" [cellMergeMode]="'always'">
        <igx-column field="CustomerID" width="200px">
        </igx-column>
        <igx-column field="ShipName" width="200px">
        </igx-column>
        <igx-column field="ShipCountry" width="200px" [merge]="true" sortable="true">
        </igx-column>
        <igx-column field="ShipCity" width="200px" [merge]="true" sortable="true">
        </igx-column>
    </igx-row-island>
</igx-hierarchical-grid>

<h4 class="sample-title">Tree grid with cell merge</h4>
<button (click)="toggleStrategy()">Toggle strategy</button>
<igx-tree-grid [autoGenerate]="false" [rowSelection]="'single'" [data]="treeData" [cellMergeMode]="'always'" [mergeStrategy]="treeGridMergeStrategy"
childDataKey="ChildCompanies" primaryKey="ID" [expansionDepth]="1" width="800px" [height]="'550px'">
<igx-column field="ContactName" width="200px">
</igx-column>
<igx-column field="ContactTitle" width="200px"></igx-column>
<igx-column field="Country" width="200px" [merge]="true" sortable="true"></igx-column>
<igx-column field="City" width="200px" [merge]="true" sortable="true"></igx-column>
</igx-tree-grid>
No results