-
Notifications
You must be signed in to change notification settings - Fork 160
/
Copy pathgrid-filtering.sample.html
113 lines (108 loc) · 5.94 KB
/
grid-filtering.sample.html
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
<div class="sample-content">
<div class="sample-column">
<div class="density-chooser">
<igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
</div>
<igx-grid
#grid1
[data]="data"
[displayDensity]="density"
[allowFiltering]="true"
[filterMode]="'excelStyleFilter'"
[allowAdvancedFiltering]="true"
[advancedFilteringExpressionsTree]="advancedFilteringTree"
[rowSelection]="selectionMode"
[paging]="false"
[width]="'980px'"
[height]="'600px'"
[showToolbar]="true"
[columnHiding]="true"
[columnPinning]="true"
[columnSelection]="'single'"
[exportExcel]="true"
[exportCsv]="true"
exportText="Export"
exportExcelText="Export to Excel"
exportCsvText="Export to CSV">
<igx-column *ngFor="let c of columns" [field]="c.field"
[header]="c.header"
[movable]="c.movable"
[groupable]="true"
[resizable]="c.resizable"
[width]="c.width"
[sortable]="true"
[filterable]="true"
[editable]="true"
[hidden]="c.hidden"
[minWidth]="c.minWidth"
[maxWidth]="c.maxWidth"
[dataType]="c.type">
</igx-column>
</igx-grid>
<div class="sample-buttons">
<igx-checkbox [checked]="grid1.allowFiltering" (change)="onAllowFilteringChanged($event)">Allow Filtering</igx-checkbox>
<igx-buttongroup [multiSelection]="false" [values]="filterModes" (onSelect)="selectFilterMode($event)"></igx-buttongroup>
</div>
<div class="sample-buttons">
<igx-checkbox [(ngModel)]="grid1.allowAdvancedFiltering">Allow Advanced Filtering</igx-checkbox>
<button igxButton="raised" (click)="openAdvancedFiltering()">Open Advanced Filtering</button>
<button igxButton="raised" (click)="closeAdvancedFiltering()">Close Advanced Filtering</button>
<igx-checkbox #applyChangesCheckbox checked="true">Apply Changes</igx-checkbox>
<button igxButton="raised" (click)="clearAdvancedFiltering()">Clear Advanced Filtering</button>
</div>
<h3>ESF Templates</h3>
<igx-grid
#grid2
[data]="data"
[displayDensity]="density"
[allowFiltering]="true"
[filterMode]="'excelStyleFilter'"
[allowAdvancedFiltering]="true"
[rowSelection]="selectionMode"
[paging]="false"
[width]="'980px'"
[height]="'600px'"
[showToolbar]="true"
[columnHiding]="true"
[columnPinning]="true"
[columnSelection]="'single'"
[exportExcel]="true"
[exportCsv]="true"
exportText="Export"
exportExcelText="Export to Excel"
exportCsvText="Export to CSV">
<igx-column *ngFor="let c of columns" [field]="c.field"
[header]="c.header"
[movable]="c.movable"
[groupable]="true"
[resizable]="c.resizable"
[width]="c.width"
[sortable]="true"
[filterable]="true"
[editable]="true"
[hidden]="c.hidden"
[minWidth]="c.minWidth"
[maxWidth]="c.maxWidth"
[dataType]="c.type">
</igx-column>
<ng-template igxExcelStyleHeaderIcon>
<igx-icon>filter_alt</igx-icon>
</ng-template>
<igx-grid-excel-style-filtering [minHeight]="'700px'" [maxHeight]="'none'">
<div igxExcelStyleColumnOperations>COLUMN OPERATIONS
<igx-excel-style-header></igx-excel-style-header>
<igx-excel-style-sorting></igx-excel-style-sorting>
<igx-excel-style-moving></igx-excel-style-moving>
<igx-excel-style-pinning></igx-excel-style-pinning>
<igx-excel-style-hiding></igx-excel-style-hiding>
<igx-excel-style-selecting></igx-excel-style-selecting>
</div>
<igx-excel-style-filter-operations>FILTER OPERATIONS
<igx-excel-style-clear-filters></igx-excel-style-clear-filters>
<igx-excel-style-conditional-filter></igx-excel-style-conditional-filter>
<igx-excel-style-search></igx-excel-style-search>
</igx-excel-style-filter-operations>
</igx-grid-excel-style-filtering>
</igx-grid>
</div>
</div>