-
Notifications
You must be signed in to change notification settings - Fork 160
Expand file tree
/
Copy pathgrid-theme-builder.sample.html
More file actions
153 lines (142 loc) · 7.77 KB
/
grid-theme-builder.sample.html
File metadata and controls
153 lines (142 loc) · 7.77 KB
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<div class="sample" #sampleEl
[class.has-header-overrides]="gridHeaderBackground() || gridHeaderTextColor()"
[style.--ig-grid-foreground]="gridForeground() || null"
[style.--ig-grid-background]="gridBackground() || null"
[style.--ig-grid-accent-color]="gridAccentColor() || null"
[style.--ig-grid-header-background]="gridHeaderBackground() || null"
[style.--ig-grid-header-text-color]="gridHeaderTextColor() || null">
<div class="color-pickers">
<span class="color-picker-item">
<label for="gridBackground">Grid Background</label>
<input id="gridBackground" type="color" [value]="gridBackground()" (input)="gridBackground.set($any($event.target).value)" />
</span>
<span class="color-picker-item">
<label for="gridForeground">Grid Foreground</label>
@if (gridForeground()) {
<input id="gridForeground" type="color" [value]="gridForeground()" (input)="gridForeground.set($any($event.target).value)" />
<button (click)="gridForeground.set('')" title="Reset to auto">↺</button>
} @else {
<button class="no-color" (click)="gridForeground.set('#1E2A35')" title="Auto (click to override)"></button>
}
</span>
<span class="color-picker-item">
<label for="gridAccentColor">Accent Color</label>
<input id="gridAccentColor" type="color" [value]="gridAccentColor()" (input)="gridAccentColor.set($any($event.target).value)" />
</span>
</div>
<div class="color-pickers">
<span class="color-picker-item">
<label for="gridHeaderBackground">Header Background</label>
@if (gridHeaderBackground()) {
<input id="gridHeaderBackground" type="color" [value]="gridHeaderBackground()" (input)="gridHeaderBackground.set($any($event.target).value)" />
<button (click)="gridHeaderBackground.set('')" title="Reset to auto">↺</button>
} @else {
<button class="no-color" (click)="gridHeaderBackground.set('#e8e6e2')" title="Auto (click to override)"></button>
}
</span>
<span class="color-picker-item">
<label for="gridHeaderTextColor">Header Text Color</label>
@if (gridHeaderTextColor()) {
<input id="gridHeaderTextColor" type="color" [value]="gridHeaderTextColor()" (input)="gridHeaderTextColor.set($any($event.target).value)" />
<button (click)="gridHeaderTextColor.set('')" title="Reset to auto">↺</button>
} @else {
<button class="no-color" (click)="gridHeaderTextColor.set('#1E2A35')" title="Auto (click to override)"></button>
}
</span>
</div>
<igx-grid #grid
[data]="data"
[primaryKey]="'ID'"
[allowFiltering]="true"
[allowAdvancedFiltering]="true"
[filterMode]="'excelStyleFilter'"
[rowSelection]="'multiple'"
[columnSelection]="'multiple'"
[cellSelection]="'multiple'"
[rowEditable]="true"
[moving]="true"
[groupsExpanded]="true">
<igx-grid-toolbar>
<igx-grid-toolbar-title>Customer Data</igx-grid-toolbar-title>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
<igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
<igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
<!-- ID — pinned, hidden from user but usable as PK -->
<igx-column field="ID" header="ID" [sortable]="true" [resizable]="true"
dataType="string" [pinned]="true" [hidden]="true">
</igx-column>
<!-- Company / Contact column group -->
<igx-column-group header="Company & Contact">
<igx-column field="CompanyName" header="Company" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true" [hasSummary]="true"
dataType="string" [pinned]="true" [minWidth]="'180px'">
</igx-column>
<igx-column field="ContactName" header="Contact" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true"
dataType="string" [minWidth]="'150px'">
</igx-column>
<igx-column field="ContactTitle" header="Title" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true"
dataType="string" [minWidth]="'150px'">
</igx-column>
</igx-column-group>
<!-- Location column group -->
<igx-column-group header="Location">
<igx-column field="Country" header="Country" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true" [hasSummary]="true"
dataType="string" [minWidth]="'120px'">
</igx-column>
<igx-column field="City" header="City" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true"
dataType="string" [minWidth]="'120px'">
</igx-column>
<igx-column field="Region" header="Region" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true"
dataType="string" [minWidth]="'100px'">
</igx-column>
<igx-column field="PostalCode" header="Postal Code" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true"
dataType="string" [minWidth]="'120px'">
</igx-column>
<igx-column field="Address" header="Address" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true"
dataType="string" [minWidth]="'200px'" [hidden]="true">
</igx-column>
</igx-column-group>
<!-- Contact details column group -->
<igx-column-group header="Contact Details">
<igx-column field="Phone" header="Phone" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true"
dataType="string" [minWidth]="'130px'">
</igx-column>
<igx-column field="Fax" header="Fax" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true"
dataType="string" [minWidth]="'130px'" [hidden]="true">
</igx-column>
</igx-column-group>
<!-- Numeric / date / boolean standalone columns -->
<igx-column field="Employees" header="Employees" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true" [hasSummary]="true"
[summaries]="employeesSummary"
dataType="number" [minWidth]="'110px'">
</igx-column>
<igx-column field="DateCreated" header="Date Created" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true"
dataType="date" [minWidth]="'140px'">
</igx-column>
<igx-column field="Contract" header="Contract" [sortable]="true" [filterable]="true"
[resizable]="true" [editable]="true" [groupable]="true"
dataType="boolean" [minWidth]="'100px'">
</igx-column>
<!-- Action strip: edit/delete on hover + row pinning -->
<igx-action-strip>
<igx-grid-pinning-actions></igx-grid-pinning-actions>
<igx-grid-editing-actions [addRow]="true"></igx-grid-editing-actions>
</igx-action-strip>
<igx-paginator [perPage]="15"></igx-paginator>
</igx-grid>
</div>