Skip to content

Commit 1a333a0

Browse files
TeyaVesTeyaVes
committed
feat(grid): enhance grid grouping modes
1 parent d90ebfb commit 1a333a0

41 files changed

Lines changed: 1387 additions & 266 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/bootstrap/scss/grid/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,12 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
470470
/// The grouping border top of the Grid row.
471471
/// @group grid
472472
$kendo-grid-grouping-row-border-top: 1px !default;
473+
/// The indent size for nested grouping rows.
474+
/// @group grid
475+
$kendo-grid-grouping-indent-size: k-spacing(6) !default;
476+
/// The margin at the end of the checkbox in grouping rows.
477+
/// @group grid
478+
$kendo-grid-grouping-row-checkbox-margin-end: k-spacing(3) !default;
473479
/// The vertical border of the Grid footer.
474480
/// @group grid
475481
$kendo-grid-group-footer-border-y: 1px !default;
@@ -660,6 +666,8 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-bold) !default;
660666
$kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width,
661667
$kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width,
662668
$kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-top,
669+
$kendo-grid-grouping-indent-size: $kendo-grid-grouping-indent-size,
670+
$kendo-grid-grouping-row-checkbox-margin-end: $kendo-grid-grouping-row-checkbox-margin-end,
663671
$kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-y,
664672
$kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg,
665673
$kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg,

‎packages/classic/scss/grid/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,12 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
468468
/// The grouping border top of the Grid row.
469469
/// @group grid
470470
$kendo-grid-grouping-row-border-top: 1px !default;
471+
/// The indent size for nested grouping rows.
472+
/// @group grid
473+
$kendo-grid-grouping-indent-size: k-spacing(6) !default;
474+
/// The margin at the end of the checkbox in grouping rows.
475+
/// @group grid
476+
$kendo-grid-grouping-row-checkbox-margin-end: k-spacing(3) !default;
471477
/// The vertical border of the Grid footer.
472478
/// @group grid
473479
$kendo-grid-group-footer-border-y: 1px !default;
@@ -655,6 +661,8 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-bold) !default;
655661
$kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width,
656662
$kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width,
657663
$kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-top,
664+
$kendo-grid-grouping-indent-size: $kendo-grid-grouping-indent-size,
665+
$kendo-grid-grouping-row-checkbox-margin-end: $kendo-grid-grouping-row-checkbox-margin-end,
658666
$kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-y,
659667
$kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg,
660668
$kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg,

‎packages/core/scss/components/grid/_layout.scss‎

Lines changed: 68 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,19 +276,29 @@
276276
width: $kendo-grid-hierarchy-col-width;
277277
}
278278

279+
.k-grouping-row .k-grouping-row-content,
279280
.k-grouping-row p {
280281
margin: 0;
281282
display: flex;
282283
align-items: center;
283284
align-content: center;
285+
overflow: hidden;
284286

285287
.k-icon {
286288
flex-shrink: 0;
287289
}
290+
291+
.k-grouping-row-text {
292+
flex: 1;
293+
min-width: 0;
294+
overflow: hidden;
295+
text-overflow: ellipsis;
296+
white-space: nowrap;
297+
}
288298
}
289299

290300
.k-grouping-row .k-table-td {
291-
overflow: visible;
301+
padding-inline-start: calc( #{$kendo-grid-cell-padding-x} + var(--kendo-grid-grouping-level, 0) * #{$kendo-grid-grouping-indent-size} );
292302
}
293303

294304
.k-grouping-row + .k-table-row .k-table-td {
@@ -301,19 +311,49 @@
301311
text-overflow: clip;
302312
}
303313

314+
.k-grouping-row + .k-grouping-row .k-table-td,
315+
.k-grouping-row + .k-grouping-row .k-group-cell {
316+
border-block-start-width: $kendo-grid-grouping-row-border-top;
317+
}
318+
319+
.k-group-cell + .k-group-cell {
320+
border-inline-start-width: 0;
321+
}
322+
323+
.k-grouping-row .k-group-cell + .k-table-td:not(.k-group-cell),
324+
.k-grouping-row .k-table-td:not(.k-group-cell) + .k-table-td {
325+
border-inline-start-color: transparent;
326+
}
327+
304328
.k-grouping-row .k-icon {
305329
margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
306330
margin-inline-end: calc( $kendo-icon-size / 2 );
307331
text-decoration: none;
308332
}
309333

334+
.k-grouping-row .k-checkbox-wrap {
335+
margin-inline-end: $kendo-grid-grouping-row-checkbox-margin-end;
336+
}
337+
310338
.k-table .k-group-footer .k-table-td {
311339
border-style: solid;
312340
border-width: $kendo-grid-group-footer-border-y 0;
313341
}
314342

343+
.k-table .k-group-footer .k-group-cell {
344+
border-block-start-width: 0;
345+
border-block-end-width: $kendo-grid-group-footer-border-y;
346+
border-inline-width: 0;
347+
}
348+
315349
.k-group-footer .k-group-cell + .k-table-td {
316-
border-inline-start-width: $kendo-grid-cell-vertical-border-width;
350+
border-inline-start-color: transparent;
351+
}
352+
353+
.k-table-row:not(.k-grouping-row, .k-group-footer):has(+ .k-grouping-row) {
354+
> .k-table-td {
355+
border-block-end-width: 1px;
356+
}
317357
}
318358

319359
.k-hierarchy-cell,
@@ -370,6 +410,14 @@
370410
}
371411
}
372412

413+
.k-detail-row,
414+
.k-master-row:has(+ .k-table-group-row),
415+
.k-master-row:has(+ .k-detail-row) {
416+
> .k-table-td:not(.k-group-cell) {
417+
border-block-end-width: 1px;
418+
}
419+
}
420+
373421
.k-dirty-cell {
374422
position: relative;
375423

@@ -1066,6 +1114,10 @@
10661114
padding-inline: $_cell-padding-x;
10671115
}
10681116

1117+
.k-grouping-row .k-table-td {
1118+
padding-inline-start: calc( #{$_cell-padding-x} + var(--kendo-grid-grouping-level, 0) * #{$kendo-grid-grouping-indent-size} );
1119+
}
1120+
10691121
.k-grouping-header {
10701122
padding-block: $_grouping-header-padding-y;
10711123
padding-inline: $_grouping-header-padding-x;
@@ -1218,6 +1270,20 @@
12181270
padding: k-spacing(1);
12191271
margin: 0;
12201272
}
1273+
1274+
.k-table-td {
1275+
padding-inline-start: calc( #{$kendo-grid-stack-cell-padding-x} + var(--kendo-grid-grouping-level, 0) * #{$kendo-grid-grouping-indent-size} );
1276+
}
1277+
}
1278+
1279+
.k-table .k-group-footer .k-table-td {
1280+
border-block-start-width: 0;
1281+
}
1282+
1283+
.k-table-row:not(.k-grouping-row, .k-group-footer):has(+ .k-group-footer) {
1284+
> .k-table-td:not(.k-group-cell) {
1285+
border-block-end-width: $kendo-grid-group-footer-border-y;
1286+
}
12211287
}
12221288

12231289
// Column template

‎packages/core/scss/components/grid/_theme.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@
103103
}
104104
}
105105

106+
.k-table-row:not(.k-grouping-row, .k-group-footer):has(+ .k-grouping-row) > .k-table-td {
107+
border-block-end-color: $kendo-grid-border;
108+
}
109+
106110
// Locked columns
107111
.k-grid-content-locked {
108112
border-color: $kendo-grid-sticky-header-border;
@@ -192,6 +196,14 @@
192196
}
193197
}
194198

199+
.k-detail-row,
200+
.k-master-row:has(+ .k-table-group-row),
201+
.k-master-row:has(+ .k-detail-row) {
202+
> .k-grid-content-sticky {
203+
border-block-end-color: $kendo-grid-border;
204+
}
205+
}
206+
195207
}
196208

197209
// Grid header

‎packages/core/scss/components/grid/_variables.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,8 @@ $kendo-grid-selection-aggregates-font-weight: null !default;
155155

156156
$kendo-grid-grouping-row-bg: null !default;
157157
$kendo-grid-grouping-row-text: null !default;
158+
$kendo-grid-grouping-indent-size: null !default;
159+
$kendo-grid-grouping-row-checkbox-margin-end: null !default;
158160

159161
$kendo-grid-sorted-icon-spacing: null !default;
160162
$kendo-grid-sorted-bg: null !default;

‎packages/default/scss/grid/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -468,6 +468,12 @@ $kendo-grid-hierarchy-col-width: ($kendo-icon-size * 2) !default;
468468
/// The grouping border top of the Grid row.
469469
/// @group grid
470470
$kendo-grid-grouping-row-border-top: 1px !default;
471+
/// The indent size for nested grouping rows.
472+
/// @group grid
473+
$kendo-grid-grouping-indent-size: k-spacing(6) !default;
474+
/// The margin at the end of the checkbox in grouping rows.
475+
/// @group grid
476+
$kendo-grid-grouping-row-checkbox-margin-end: k-spacing(3) !default;
471477
/// The vertical border of the Grid footer.
472478
/// @group grid
473479
$kendo-grid-group-footer-border-y: 1px !default;
@@ -656,6 +662,8 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-bold) !default;
656662
$kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width,
657663
$kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width,
658664
$kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-top,
665+
$kendo-grid-grouping-indent-size: $kendo-grid-grouping-indent-size,
666+
$kendo-grid-grouping-row-checkbox-margin-end: $kendo-grid-grouping-row-checkbox-margin-end,
659667
$kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-y,
660668
$kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg,
661669
$kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg,

‎packages/fluent/scss/grid/_layout.scss‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,9 @@
3333
border-block-end-width: 0;
3434
}
3535

36-
.k-grouping-row + .k-table-row .k-table-td {
37-
border-block-start-width: $kendo-grid-grouping-row-border-width-y;
38-
}
39-
40-
.k-grouping-row .k-group-cell,
41-
.k-grouping-row + .k-table-row .k-group-cell {
36+
.k-grouping-row .k-group-cell {
4237
border-block-width: 0;
43-
border-inline-end-width: 1px;
38+
border-inline-width: 0;
4439
}
4540

4641
.k-group-footer .k-table-td {
@@ -69,6 +64,12 @@
6964
}
7065
}
7166
}
67+
68+
.k-master-row:has(+ .k-detail-row) {
69+
> .k-table-td:not(.k-group-cell) {
70+
border-block-end-width: 0;
71+
}
72+
}
7273
}
7374

7475
.k-grid-pinned-container {
@@ -180,7 +181,11 @@
180181
// Master row
181182
.k-master-row .k-group-cell {
182183
border-block-width: 0;
183-
border-inline-end-width: $kendo-grid-border-width;
184+
}
185+
186+
.k-detail-row .k-group-cell + :not(.k-group-cell),
187+
.k-master-row .k-group-cell + :not(.k-group-cell) {
188+
border-inline-start: 1px solid;
184189
}
185190

186191
.k-master-row.k-expanded .k-table-td {

‎packages/fluent/scss/grid/_theme.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@
5959
.k-table-row.k-selected > .k-table-td.k-grid-content-sticky {
6060
border-inline-color: $kendo-grid-sticky-border;
6161
}
62+
63+
.k-detail-row,
64+
.k-master-row {
65+
.k-group-cell + :not(.k-group-cell) {
66+
border-inline-start-color: $kendo-grid-border;
67+
}
68+
}
6269
}
6370

6471
// Grid header

‎packages/fluent/scss/grid/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,12 @@ $kendo-grid-grouping-header-border: var( --kendo-grid-grouping-header-border, #{
314314
/// The vertical border width of the Grid grouping row.
315315
/// @group grid
316316
$kendo-grid-grouping-row-border-width-y: var( --kendo-grid-grouping-row-border-width-y, #{$kendo-grid-border-width} ) !default;
317+
/// The indent size for nested grouping rows.
318+
/// @group grid
319+
$kendo-grid-grouping-indent-size: k-spacing(6) !default;
320+
/// The margin at the end of the checkbox in grouping rows.
321+
/// @group grid
322+
$kendo-grid-grouping-row-checkbox-margin-end: k-spacing(3) !default;
317323
/// The background color of the Grid grouping row.
318324
/// @group grid
319325
$kendo-grid-grouping-row-bg: var( --kendo-grid-grouping-row-bg, #{$kendo-table-group-row-bg} ) !default;
@@ -712,6 +718,8 @@ $kendo-grid-pinned-source-font-weight: var(--kendo-font-weight-semibold) !defaul
712718
$kendo-grid-drag-cell-width: $kendo-grid-drag-cell-width,
713719
$kendo-grid-hierarchy-col-width: $kendo-grid-hierarchy-col-width,
714720
$kendo-grid-grouping-row-border-top: $kendo-grid-grouping-row-border-width-y,
721+
$kendo-grid-grouping-indent-size: $kendo-grid-grouping-indent-size,
722+
$kendo-grid-grouping-row-checkbox-margin-end: $kendo-grid-grouping-row-checkbox-margin-end,
715723
$kendo-grid-group-footer-border-y: $kendo-grid-group-footer-border-width-y,
716724
$kendo-grid-row-resizer-hover-bg: $kendo-grid-row-resizer-hover-bg,
717725
$kendo-grid-row-resizer-active-bg: $kendo-grid-row-resizer-active-bg,

‎packages/html/src/grid/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ export * from './templates/grid-with-filter-menu';
2121
export * from './templates/grid-with-filter-menu-open';
2222
export * from './templates/grid-with-filter-row';
2323
export * from './templates/grid-with-grouping';
24+
export * from './templates/grid-grouping-no-indent';
25+
export * from './templates/grid-grouping-checkbox-no-indent';
26+
export * from './templates/grid-grouping-groups-column';
27+
export * from './templates/grid-grouping-checkbox-groups-column';
28+
export * from './templates/grid-grouping-multiple-columns';
29+
export * from './templates/grid-grouping-checkbox-multiple-columns';
2430
export * from './templates/grid-hierarchy';
2531
export * from './templates/grid-with-row-reordering';
2632
export * from './templates/grid-with-selection-aggregates';

0 commit comments

Comments
 (0)