@progress/kendo-angular-grid 19.1.2-develop.8 → 19.2.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/data/data-mapping.service.d.ts +46 -0
  2. package/esm2022/data/data-mapping.service.mjs +125 -0
  3. package/esm2022/databinding.directive.mjs +6 -0
  4. package/esm2022/grid.component.mjs +24 -23
  5. package/esm2022/package-metadata.mjs +2 -2
  6. package/esm2022/rendering/list.component.mjs +45 -27
  7. package/esm2022/rendering/table-body.component.mjs +37 -128
  8. package/esm2022/utils.mjs +15 -0
  9. package/fesm2022/progress-kendo-angular-grid.mjs +256 -192
  10. package/grid.component.d.ts +10 -3
  11. package/package.json +20 -20
  12. package/rendering/list.component.d.ts +8 -5
  13. package/rendering/table-body.component.d.ts +9 -27
  14. package/schematics/ngAdd/index.js +4 -4
  15. package/utils.d.ts +5 -0
package/esm2022/rendering/table-body.component.mjs CHANGED
@@ -32,7 +32,6 @@ import { CellComponent } from './cell.component';
32
32
  import { LogicalCellDirective } from '../navigation/logical-cell.directive';
33
33
  import { LogicalRowDirective } from '../navigation/logical-row.directive';
34
34
  import { NgIf, NgFor, NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
35
- import { RowspanService } from './rowspan.service';
36
35
  import * as i0 from "@angular/core";
37
36
  import * as i1 from "./details/details.service";
38
37
  import * as i2 from "../grouping/groups.service";
@@ -44,7 +43,6 @@ import * as i7 from "../selection/selection.service";
44
43
  import * as i8 from "../selection/cell-selection.service";
45
44
  import * as i9 from "../common/column-info.service";
46
45
  import * as i10 from "../navigation/navigation.service";
47
- import * as i11 from "./rowspan.service";
48
46
  const columnCellIndex = (cell, cells) => {
49
47
  let cellIndex = 0;
50
48
  for (let idx = 0; idx < cells.length; idx++) {
@@ -73,13 +71,12 @@ export class TableBodyComponent {
73
71
  cellSelectionService;
74
72
  columnInfoService;
75
73
  navigationService;
76
- rowspanService;
77
74
  columns = [];
78
75
  allColumns;
79
76
  groups = [];
80
77
  detailTemplate;
81
78
  noRecordsTemplate;
82
- data;
79
+ rowsToRender;
83
80
  skip = 0;
84
81
  selectable;
85
82
  filterable;
@@ -89,7 +86,6 @@ export class TableBodyComponent {
89
86
  isVirtual;
90
87
  cellLoadingTemplate;
91
88
  skipGroupDecoration = false;
92
- showGroupFooters = false;
93
89
  lockedColumnsCount = 0;
94
90
  totalColumnsCount = 0;
95
91
  virtualColumns;
@@ -107,9 +103,7 @@ export class TableBodyComponent {
107
103
  clickTimeout;
108
104
  minusIcon = minusIcon;
109
105
  plusIcon = plusIcon;
110
- dataArray;
111
- rerender = false;
112
- constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService, rowspanService) {
106
+ constructor(detailsService, groupsService, changeNotification, editService, ctx, ngZone, renderer, element, domEvents, selectionService, cellSelectionService, columnInfoService, navigationService) {
113
107
  this.detailsService = detailsService;
114
108
  this.groupsService = groupsService;
115
109
  this.changeNotification = changeNotification;
@@ -123,7 +117,6 @@ export class TableBodyComponent {
123
117
  this.cellSelectionService = cellSelectionService;
124
118
  this.columnInfoService = columnInfoService;
125
119
  this.navigationService = navigationService;
126
- this.rowspanService = rowspanService;
127
120
  this.noRecordsText = this.ctx.localization.get('noRecords');
128
121
  this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe((args) => this.cellKeydownHandler(args));
129
122
  this.trackByWrapper = this.trackByWrapper.bind(this);
@@ -132,12 +125,6 @@ export class TableBodyComponent {
132
125
  get newDataItem() {
133
126
  return this.editService.newDataItem;
134
127
  }
135
- get cachedDataArray() {
136
- if (!this.dataArray) {
137
- this.dataArray = this.data.map(item => item);
138
- }
139
- return this.dataArray;
140
- }
141
128
  // Number of unlocked columns in the next table, if any
142
129
  unlockedColumnsCount(item) {
143
130
  const allColumns = this.allColumns || this.columns;
@@ -149,25 +136,7 @@ export class TableBodyComponent {
149
136
  });
150
137
  const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
151
138
  const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumns.length;
152
- return item && this.isDataItem(item) ? contentColumnsCount : headerFooterColumnsCount;
153
- }
154
- shouldSkipCell(rowIndex, colIndex) {
155
- return this.rowspanService.shouldSkip(rowIndex, colIndex);
156
- }
157
- getRowspan(row, column, colIndex) {
158
- if (this.rerender) {
159
- this.dataArray = null;
160
- this.rerender = false;
161
- }
162
- const rowspan = column.cellRowspan(row, column, this.cachedDataArray);
163
- if (rowspan > 1) {
164
- this.rowspanService.addCells(row.index, colIndex, rowspan);
165
- }
166
- this.ngZone.runOutsideAngular(() => setTimeout(() => {
167
- this.rerender = true;
168
- this.rowspanService.reset();
169
- }));
170
- return rowspan;
139
+ return item && item.type === 'data' ? contentColumnsCount : headerFooterColumnsCount;
171
140
  }
172
141
  isAriaSelected(item, column) {
173
142
  return this.cellSelectionService.isCellSelected(item, column) ||
@@ -177,44 +146,16 @@ export class TableBodyComponent {
177
146
  this.detailsService.toggleRow(index, dataItem);
178
147
  return false;
179
148
  }
180
- isExpanded(viewItem) {
181
- return this.detailsService.isExpanded(viewItem.index, viewItem.data);
182
- }
183
149
  detailButtonIconName(viewItem) {
184
- const expanded = this.isExpanded(viewItem);
185
- return expanded ? 'minus' : 'plus';
150
+ return viewItem.isExpanded ? 'minus' : 'plus';
186
151
  }
187
152
  detailButtonSvgIcon(viewItem) {
188
- const expanded = this.isExpanded(viewItem);
189
- return expanded ? this.minusIcon : this.plusIcon;
153
+ return viewItem.isExpanded ? this.minusIcon : this.plusIcon;
190
154
  }
191
155
  detailButtonTitle(viewItem) {
192
- const messageKey = this.isExpanded(viewItem) ? 'detailCollapse' : 'detailExpand';
156
+ const messageKey = viewItem.isExpanded ? 'detailCollapse' : 'detailExpand';
193
157
  return this.ctx.localization.get(messageKey);
194
158
  }
195
- isGroup(item) {
196
- return item.type === 'group';
197
- }
198
- isDataItem(item) {
199
- return !this.isGroup(item) && !this.isFooter(item);
200
- }
201
- isFooter(item) {
202
- return item.type === 'footer';
203
- }
204
- isFooterItemInExpandedGroup(item) {
205
- const footerItem = { data: item.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
206
- return this.isInExpandedGroup(footerItem);
207
- }
208
- isDataItemInExpandedGroup(item) {
209
- const dataItem = { data: item.group.data, index: item.groupIndex, parentGroup: item.group.parentGroup };
210
- return this.isInExpandedGroup(dataItem);
211
- }
212
- isInExpandedGroup(item) {
213
- return this.groupsService.isInExpandedGroup(item);
214
- }
215
- isParentGroupExpanded(item) {
216
- return this.groupsService.isInExpandedGroup(item.parentGroup);
217
- }
218
159
  isOdd(item) {
219
160
  return item.index % 2 !== 0;
220
161
  }
@@ -437,7 +378,7 @@ export class TableBodyComponent {
437
378
  const columnIndex = this.lockedColumnsCount + index;
438
379
  let rowIndex = row.getAttribute('data-kendo-grid-item-index');
439
380
  rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
440
- const dataItem = rowIndex === -1 ? this.editService.newDataItem : this.data.at(rowIndex - this.skip);
381
+ const dataItem = rowIndex === -1 ? this.editService.newDataItem : this.rowsToRender.find(item => +item.index === rowIndex && item.type === 'data')?.data;
441
382
  const isEditedColumn = this.editService.isEditedColumn(rowIndex, column);
442
383
  const isEditedRow = this.editService.isEdited(rowIndex);
443
384
  const type = eventArg.type === 'keydown' ? 'click' : eventArg.type;
@@ -482,8 +423,8 @@ export class TableBodyComponent {
482
423
  });
483
424
  }
484
425
  }
485
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.NavigationService }, { token: i11.RowspanService }], target: i0.ɵɵFactoryTarget.Component });
486
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
426
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
427
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableBodyComponent, isStandalone: true, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", rowsToRender: "rowsToRender", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
487
428
  <ng-container *ngIf="editService.hasNewItem">
488
429
  <tr class="k-grid-add-row k-grid-edit-row k-master-row"
489
430
  kendoGridLogicalRow
@@ -524,7 +465,7 @@ export class TableBodyComponent {
524
465
  </td>
525
466
  </tr>
526
467
  </ng-container>
527
- <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
468
+ <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
528
469
  <td [attr.colspan]="colSpan" class="k-table-td">
529
470
  <ng-template
530
471
  *ngIf="noRecordsTemplate?.templateRef"
@@ -537,8 +478,8 @@ export class TableBodyComponent {
537
478
  </ng-container>
538
479
  </td>
539
480
  </tr>
540
- <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
541
- <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
481
+ <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
482
+ <tr *ngIf="item.type === 'group'"
542
483
  kendoGridGroupHeader
543
484
  [columns]="columns"
544
485
  [groups]="groups"
@@ -556,8 +497,7 @@ export class TableBodyComponent {
556
497
  [logicalCellsCount]="columns.length"
557
498
  [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
558
499
  </tr>
559
- <tr
560
- *ngIf="isDataItem(item) && (!$any(item).group || isDataItemInExpandedGroup($any(item)))"
500
+ <tr *ngIf="item.showDataItem"
561
501
  kendoGridLogicalRow
562
502
  [dataRowIndex]="$any(item).index"
563
503
  [dataItem]="item.data"
@@ -570,7 +510,7 @@ export class TableBodyComponent {
570
510
  [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
571
511
  [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
572
512
  [class.k-master-row]="true"
573
- [class.k-expanded]="isDataItem(item) && isExpanded(item)"
513
+ [class.k-expanded]="item.isExpanded"
574
514
  [class.k-grid-edit-row]="isEditingRow($any(item).index)"
575
515
  [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
576
516
  [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -599,7 +539,7 @@ export class TableBodyComponent {
599
539
  </a>
600
540
  </td>
601
541
  <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
602
- <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
542
+ <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
603
543
  kendoGridCell
604
544
  [rowIndex]="$any(item).index"
605
545
  [columnIndex]="lockedColumnsCount + columnIndex"
@@ -616,10 +556,7 @@ export class TableBodyComponent {
616
556
  [dataItem]="item.data"
617
557
  [colIndex]="columnIndex"
618
558
  [colSpan]="column.colspan"
619
- [rowSpan]="column.cellRowspan ? getRowspan({
620
- index: rowIndex,
621
- dataItem: item
622
- }, column, lockedColumnsCount + columnIndex) : 1"
559
+ [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
623
560
  [attr.role]="column.tableCellsRole"
624
561
  class="k-table-td"
625
562
  [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
@@ -629,24 +566,18 @@ export class TableBodyComponent {
629
566
  [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
630
567
  [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
631
568
  [attr.colspan]="column.colspan"
632
- [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
633
- >
569
+ [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)">
634
570
  </td>
635
571
  </ng-container>
636
572
  </tr>
637
- <tr *ngIf="isDataItem(item) &&
638
- (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
639
- detailTemplate?.templateRef &&
640
- detailTemplate.showIf(item.data, $any(item).index) &&
641
- isExpanded(item)"
573
+ <tr *ngIf="item.showDetailRow"
642
574
  class="k-detail-row"
643
575
  kendoGridLogicalRow
644
576
  [dataRowIndex]="$any(item).index"
645
577
  [dataItem]="item.data"
646
578
  [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
647
579
  [logicalSlaveRow]="false"
648
- [logicalCellsCount]="1"
649
- >
580
+ [logicalCellsCount]="1">
650
581
  <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
651
582
  <td class="k-hierarchy-cell k-table-td"></td>
652
583
  <td class="k-detail-cell k-table-td"
@@ -658,8 +589,7 @@ export class TableBodyComponent {
658
589
  [dataItem]="item.data"
659
590
  [colIndex]="0"
660
591
  [colSpan]="allColumnsSpan + 1"
661
- role="gridcell" aria-selected="false"
662
- >
592
+ role="gridcell" aria-selected="false">
663
593
  <ng-template
664
594
  [ngTemplateOutlet]="detailTemplate.templateRef"
665
595
  [ngTemplateOutletContext]="{
@@ -670,10 +600,7 @@ export class TableBodyComponent {
670
600
  </ng-template>
671
601
  </td>
672
602
  </tr>
673
- <tr *ngIf="isFooter(item) &&
674
- $any(item).group &&
675
- (isFooterItemInExpandedGroup($any(item)) || (showGroupFooters && isParentGroupExpanded($any(item).group))) &&
676
- !$any(item.data).hideFooter"
603
+ <tr *ngIf="item.type === 'footer'"
677
604
  class="k-group-footer"
678
605
  kendoGridLogicalRow
679
606
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -689,8 +616,7 @@ export class TableBodyComponent {
689
616
  kendoGridLogicalCell
690
617
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
691
618
  [logicalColIndex]="0"
692
- aria-selected="false"
693
- >
619
+ aria-selected="false">
694
620
  </td>
695
621
  <td kendoGridLogicalCell
696
622
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -759,7 +685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
759
685
  </td>
760
686
  </tr>
761
687
  </ng-container>
762
- <tr *ngIf="data?.length === 0 || data === null" class="k-grid-norecords" role="row">
688
+ <tr *ngIf="!rowsToRender?.length" class="k-grid-norecords" role="row">
763
689
  <td [attr.colspan]="colSpan" class="k-table-td">
764
690
  <ng-template
765
691
  *ngIf="noRecordsTemplate?.templateRef"
@@ -772,8 +698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
772
698
  </ng-container>
773
699
  </td>
774
700
  </tr>
775
- <ng-container *ngFor="let item of data; trackBy: trackByWrapper; let rowIndex = index;">
776
- <tr *ngIf="isGroup(item) && isParentGroupExpanded($any(item)) && showGroupHeader(item)"
701
+ <ng-container *ngFor="let item of rowsToRender; trackBy: trackByWrapper; let rowIndex = index;">
702
+ <tr *ngIf="item.type === 'group'"
777
703
  kendoGridGroupHeader
778
704
  [columns]="columns"
779
705
  [groups]="groups"
@@ -791,8 +717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
791
717
  [logicalCellsCount]="columns.length"
792
718
  [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
793
719
  </tr>
794
- <tr
795
- *ngIf="isDataItem(item) && (!$any(item).group || isDataItemInExpandedGroup($any(item)))"
720
+ <tr *ngIf="item.showDataItem"
796
721
  kendoGridLogicalRow
797
722
  [dataRowIndex]="$any(item).index"
798
723
  [dataItem]="item.data"
@@ -805,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
805
730
  [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
806
731
  [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
807
732
  [class.k-master-row]="true"
808
- [class.k-expanded]="isDataItem(item) && isExpanded(item)"
733
+ [class.k-expanded]="item.isExpanded"
809
734
  [class.k-grid-edit-row]="isEditingRow($any(item).index)"
810
735
  [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
811
736
  [attr.data-kendo-grid-item-index]="$any(item).index"
@@ -834,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
834
759
  </a>
835
760
  </td>
836
761
  <ng-container *ngFor="let column of columns; let columnIndex = index; trackBy: trackByColumns;">
837
- <td *ngIf="column.cellRowspan ? !shouldSkipCell(rowIndex, lockedColumnsCount + columnIndex) : true"
762
+ <td *ngIf="!item.cells?.[lockedColumnsCount + columnIndex]?.skip"
838
763
  kendoGridCell
839
764
  [rowIndex]="$any(item).index"
840
765
  [columnIndex]="lockedColumnsCount + columnIndex"
@@ -851,10 +776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
851
776
  [dataItem]="item.data"
852
777
  [colIndex]="columnIndex"
853
778
  [colSpan]="column.colspan"
854
- [rowSpan]="column.cellRowspan ? getRowspan({
855
- index: rowIndex,
856
- dataItem: item
857
- }, column, lockedColumnsCount + columnIndex) : 1"
779
+ [rowSpan]="item.cells[lockedColumnsCount + columnIndex]?.rowspan"
858
780
  [attr.role]="column.tableCellsRole"
859
781
  class="k-table-td"
860
782
  [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
@@ -864,24 +786,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
864
786
  [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
865
787
  [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
866
788
  [attr.colspan]="column.colspan"
867
- [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)"
868
- >
789
+ [class.k-selected]="isSelectable && cellSelectionService.isCellSelected(item, column)">
869
790
  </td>
870
791
  </ng-container>
871
792
  </tr>
872
- <tr *ngIf="isDataItem(item) &&
873
- (!$any(item).group || isDataItemInExpandedGroup($any(item))) &&
874
- detailTemplate?.templateRef &&
875
- detailTemplate.showIf(item.data, $any(item).index) &&
876
- isExpanded(item)"
793
+ <tr *ngIf="item.showDetailRow"
877
794
  class="k-detail-row"
878
795
  kendoGridLogicalRow
879
796
  [dataRowIndex]="$any(item).index"
880
797
  [dataItem]="item.data"
881
798
  [logicalRowIndex]="logicalRowIndex(rowIndex) + 1"
882
799
  [logicalSlaveRow]="false"
883
- [logicalCellsCount]="1"
884
- >
800
+ [logicalCellsCount]="1">
885
801
  <td class="k-group-cell k-table-td k-table-group-td" *ngFor="let g of groups"></td>
886
802
  <td class="k-hierarchy-cell k-table-td"></td>
887
803
  <td class="k-detail-cell k-table-td"
@@ -893,8 +809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
893
809
  [dataItem]="item.data"
894
810
  [colIndex]="0"
895
811
  [colSpan]="allColumnsSpan + 1"
896
- role="gridcell" aria-selected="false"
897
- >
812
+ role="gridcell" aria-selected="false">
898
813
  <ng-template
899
814
  [ngTemplateOutlet]="detailTemplate.templateRef"
900
815
  [ngTemplateOutletContext]="{
@@ -905,10 +820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
905
820
  </ng-template>
906
821
  </td>
907
822
  </tr>
908
- <tr *ngIf="isFooter(item) &&
909
- $any(item).group &&
910
- (isFooterItemInExpandedGroup($any(item)) || (showGroupFooters && isParentGroupExpanded($any(item).group))) &&
911
- !$any(item.data).hideFooter"
823
+ <tr *ngIf="item.type === 'footer'"
912
824
  class="k-group-footer"
913
825
  kendoGridLogicalRow
914
826
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -924,8 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
924
836
  kendoGridLogicalCell
925
837
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
926
838
  [logicalColIndex]="0"
927
- aria-selected="false"
928
- >
839
+ aria-selected="false">
929
840
  </td>
930
841
  <td kendoGridLogicalCell
931
842
  [logicalRowIndex]="logicalRowIndex(rowIndex)"
@@ -954,7 +865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
954
865
  GroupHeaderComponent, IconWrapperComponent, NgTemplateOutlet, ResizeSensorComponent
955
866
  ]
956
867
  }]
957
- }], ctorParameters: function () { return [{ type: i1.DetailsService }, { type: i2.GroupsService }, { type: i3.ChangeNotificationService }, { type: i4.EditService }, { type: i5.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.DomEventsService }, { type: i7.SelectionService }, { type: i8.CellSelectionService }, { type: i9.ColumnInfoService }, { type: i10.NavigationService }, { type: i11.RowspanService }]; }, propDecorators: { columns: [{
868
+ }], ctorParameters: function () { return [{ type: i1.DetailsService }, { type: i2.GroupsService }, { type: i3.ChangeNotificationService }, { type: i4.EditService }, { type: i5.ContextService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i6.DomEventsService }, { type: i7.SelectionService }, { type: i8.CellSelectionService }, { type: i9.ColumnInfoService }, { type: i10.NavigationService }]; }, propDecorators: { columns: [{
958
869
  type: Input
959
870
  }], allColumns: [{
960
871
  type: Input
@@ -964,7 +875,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
964
875
  type: Input
965
876
  }], noRecordsTemplate: [{
966
877
  type: Input
967
- }], data: [{
878
+ }], rowsToRender: [{
968
879
  type: Input
969
880
  }], skip: [{
970
881
  type: Input
@@ -984,8 +895,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
984
895
  type: Input
985
896
  }], skipGroupDecoration: [{
986
897
  type: Input
987
- }], showGroupFooters: [{
988
- type: Input
989
898
  }], lockedColumnsCount: [{
990
899
  type: Input
991
900
  }], totalColumnsCount: [{
package/esm2022/utils.mjs CHANGED
@@ -199,3 +199,18 @@ export const isMultipleRangesEnabled = (selectableSettings) => {
199
199
  typeof selectableSettings === 'object' &&
200
200
  selectableSettings.selectable.multipleRanges;
201
201
  };
202
+ /**
203
+ * @hidden
204
+ * Calculates the height of a table row by inserting a temporary row into the table body when the `rowHeight` option is not set.
205
+ */
206
+ export const calcRowHeight = (tableBody) => {
207
+ let result = 0;
208
+ if (tableBody) {
209
+ const row = tableBody.insertRow(0);
210
+ const cell = row.insertCell(0);
211
+ cell.textContent = '&nbsp;';
212
+ result = row.getBoundingClientRect().height;
213
+ tableBody.deleteRow(0);
214
+ }
215
+ return result;
216
+ };