Skip to content

Commit 36bd6f6

Browse files
Copilottishko0
Copilot
and
tishko0
committed
Apply palette structure and selection options to hgrid and tgrid samples
Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com>
1 parent 1c6c22e commit 36bd6f6

File tree

4 files changed

+122
-28
lines changed

4 files changed

+122
-28
lines changed

‎samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,47 @@
11
/* shared styles are loaded from: */
22
/* https://static.infragistics.com/xplatform/css/samples */
33

4-
#hGrid {
5-
--ig-size: var(--ig-size-medium);
6-
}
4+
:root {
5+
/* Base Palette Colors */
6+
--selection-primary: #0062a3;
7+
--selection-primary-light: #338bc7;
8+
--selection-primary-dark: #004d82;
9+
--selection-secondary: #f2c43c;
10+
--selection-accent: #e74c3c;
11+
--selection-success: #27ae60;
12+
--selection-text-light: #ffffff;
13+
--selection-text-dark: #2c3e50;
14+
--selection-border: #34495e;
15+
--selection-hover: rgba(0, 98, 163, 0.1);
16+
--selection-focus: rgba(242, 196, 60, 0.3);
17+
}
718

8-
#hGrid {
9-
--ig-grid-cell-selected-text-color: #FFFFFF;
10-
--ig-grid-cell-active-border-color: #f2c43c;
11-
--ig-grid-cell-selected-background: #0062a3;
12-
}
19+
.custom-selection-palette {
20+
/* Core cell selection properties */
21+
--ig-grid-cell-selected-background: var(--selection-primary);
22+
--ig-grid-cell-selected-text-color: var(--selection-text-light);
23+
--ig-grid-cell-active-border-color: var(--selection-secondary);
24+
25+
/* Enhanced selection states */
26+
--ig-grid-cell-selected-range-background: var(--selection-primary-light);
27+
--ig-grid-cell-selected-range-border-color: var(--selection-primary-dark);
28+
--ig-grid-cell-hover-background: var(--selection-hover);
29+
--ig-grid-cell-focus-background: var(--selection-focus);
30+
31+
/* Header selection styling */
32+
--ig-grid-header-selected-background: var(--selection-primary);
33+
--ig-grid-header-selected-text-color: var(--selection-text-light);
34+
35+
/* Row selection integration */
36+
--ig-grid-row-selected-background: var(--selection-primary-light);
37+
--ig-grid-row-selected-text-color: var(--selection-text-dark);
38+
--ig-grid-row-selected-hover-background: var(--selection-primary);
39+
40+
/* Selection indicators and borders */
41+
--ig-grid-selection-fill-color: var(--selection-secondary);
42+
--ig-grid-selection-border-color: var(--selection-border);
43+
44+
/* Grid sizing */
45+
--ig-size: var(--ig-size-medium);
46+
}
1347

‎samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,19 @@ export default class Sample extends React.Component<any, any> {
6464
autoGenerate={false}
6565
data={this.singersData}
6666
id="hGrid"
67+
className="custom-selection-palette"
6768
ref={this.hGridRef}
68-
primaryKey="ID">
69+
primaryKey="ID"
70+
cellSelection="multiple"
71+
rowSelection="multiple"
72+
columnSelection="multiple"
73+
allowFiltering={true}>
6974
<IgrColumn
7075
field="Artist"
7176
header="Artist"
7277
dataType="string"
73-
resizable={true}>
78+
resizable={true}
79+
sortable={true}>
7480
</IgrColumn>
7581
<IgrColumn
7682
field="Photo"
@@ -85,19 +91,22 @@ export default class Sample extends React.Component<any, any> {
8591
dataType="number"
8692
minWidth="88px"
8793
maxWidth="230px"
88-
resizable={true}>
94+
resizable={true}
95+
sortable={true}>
8996
</IgrColumn>
9097
<IgrColumn
9198
field="GrammyNominations"
9299
header="Grammy Nominations"
93100
dataType="string"
94-
resizable={true}>
101+
resizable={true}
102+
sortable={true}>
95103
</IgrColumn>
96104
<IgrColumn
97105
field="GrammyAwards"
98106
header="Grammy Awards"
99107
dataType="string"
100-
resizable={true}>
108+
resizable={true}
109+
sortable={true}>
101110
</IgrColumn>
102111
<IgrRowIsland
103112
childDataKey="Albums"

‎samples/grids/tree-grid/cell-selection-custom-palette/src/index.css‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,47 @@
11
/* shared styles are loaded from: */
22
/* https://static.infragistics.com/xplatform/css/samples */
33

4-
#grid {
5-
--ig-size: var(--ig-size-medium);
6-
}
4+
:root {
5+
/* Base Palette Colors */
6+
--selection-primary: #0062a3;
7+
--selection-primary-light: #338bc7;
8+
--selection-primary-dark: #004d82;
9+
--selection-secondary: #f2c43c;
10+
--selection-accent: #e74c3c;
11+
--selection-success: #27ae60;
12+
--selection-text-light: #ffffff;
13+
--selection-text-dark: #2c3e50;
14+
--selection-border: #34495e;
15+
--selection-hover: rgba(0, 98, 163, 0.1);
16+
--selection-focus: rgba(242, 196, 60, 0.3);
17+
}
718

8-
#grid {
9-
--cell-selected-text-color: #FFFFFF;
10-
--cell-active-border-color: #f2c43c;
11-
--cell-selected-background: #0062a3;
12-
}
19+
.custom-selection-palette {
20+
/* Core cell selection properties */
21+
--ig-grid-cell-selected-background: var(--selection-primary);
22+
--ig-grid-cell-selected-text-color: var(--selection-text-light);
23+
--ig-grid-cell-active-border-color: var(--selection-secondary);
24+
25+
/* Enhanced selection states */
26+
--ig-grid-cell-selected-range-background: var(--selection-primary-light);
27+
--ig-grid-cell-selected-range-border-color: var(--selection-primary-dark);
28+
--ig-grid-cell-hover-background: var(--selection-hover);
29+
--ig-grid-cell-focus-background: var(--selection-focus);
30+
31+
/* Header selection styling */
32+
--ig-grid-header-selected-background: var(--selection-primary);
33+
--ig-grid-header-selected-text-color: var(--selection-text-light);
34+
35+
/* Row selection integration */
36+
--ig-grid-row-selected-background: var(--selection-primary-light);
37+
--ig-grid-row-selected-text-color: var(--selection-text-dark);
38+
--ig-grid-row-selected-hover-background: var(--selection-primary);
39+
40+
/* Selection indicators and borders */
41+
--ig-grid-selection-fill-color: var(--selection-secondary);
42+
--ig-grid-selection-border-color: var(--selection-border);
43+
44+
/* Grid sizing */
45+
--ig-size: var(--ig-size-medium);
46+
}
1347

‎samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,38 +36,55 @@ export default class Sample extends React.Component<any, any> {
3636
autoGenerate={false}
3737
ref={this.gridRef}
3838
id="grid"
39+
className="custom-selection-palette"
3940
data={this.ordersTreeData}
4041
primaryKey="ID"
4142
foreignKey="ParentID"
42-
cellSelection="multiple">
43+
cellSelection="multiple"
44+
rowSelection="multiple"
45+
columnSelection="multiple"
46+
allowFiltering={true}>
4347
<IgrColumn
4448
field="ID"
4549
header="Order ID"
46-
dataType="number">
50+
dataType="number"
51+
width="120px"
52+
sortable={true}>
4753
</IgrColumn>
4854
<IgrColumn
4955
field="Name"
5056
dataType="string"
51-
header="Order Product">
57+
header="Order Product"
58+
width="200px"
59+
sortable={true}>
5260
</IgrColumn>
5361
<IgrColumn
5462
field="Units"
55-
dataType="number">
63+
dataType="number"
64+
header="Units"
65+
width="120px"
66+
sortable={true}>
5667
</IgrColumn>
5768
<IgrColumn
5869
field="UnitPrice"
5970
header="Unit Price"
60-
dataType="currency">
71+
dataType="currency"
72+
width="150px"
73+
sortable={true}>
6174
</IgrColumn>
6275
<IgrColumn
6376
field="Price"
6477
header="Price"
65-
dataType="currency">
78+
dataType="currency"
79+
width="150px"
80+
sortable={true}>
6681
</IgrColumn>
6782
<IgrColumn
6883
field="OrderDate"
6984
header="Order Date"
70-
dataType="date">
85+
dataType="date"
86+
width="150px"
87+
sortable={true}>
7188
</IgrColumn>
7289
</IgrTreeGrid>
7390
</div>

0 commit comments

Comments
 (0)