@progress/kendo-angular-grid 6.0.4-dev.202202221309 → 6.1.0-dev.202203010950

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 (45) hide show
  1. package/dist/cdn/js/kendo-angular-grid.js +2 -2
  2. package/dist/cdn/main.js +1 -1
  3. package/dist/es/columns/sort-settings.js +2 -1
  4. package/dist/es/grid.component.js +22 -4
  5. package/dist/es/main.js +1 -0
  6. package/dist/es/package-metadata.js +1 -1
  7. package/dist/es/rendering/body.module.js +5 -2
  8. package/dist/es/rendering/common/loading.component.js +7 -2
  9. package/dist/es/rendering/header/header.component.js +31 -6
  10. package/dist/es/rendering/list.component.js +5 -1
  11. package/dist/es/rendering/loading-template.directive.js +24 -0
  12. package/dist/es/rendering/table-body.component.js +2 -2
  13. package/dist/es2015/columns/sort-settings.d.ts +33 -69
  14. package/dist/es2015/columns/sort-settings.js +2 -1
  15. package/dist/es2015/grid.component.d.ts +7 -3
  16. package/dist/es2015/grid.component.js +19 -4
  17. package/dist/es2015/index.metadata.json +1 -1
  18. package/dist/es2015/main.d.ts +2 -1
  19. package/dist/es2015/main.js +1 -0
  20. package/dist/es2015/package-metadata.js +1 -1
  21. package/dist/es2015/rendering/body.module.js +5 -2
  22. package/dist/es2015/rendering/common/loading.component.d.ts +2 -0
  23. package/dist/es2015/rendering/common/loading.component.js +13 -4
  24. package/dist/es2015/rendering/header/header.component.d.ts +14 -2
  25. package/dist/es2015/rendering/header/header.component.js +30 -6
  26. package/dist/es2015/rendering/list.component.d.ts +1 -0
  27. package/dist/es2015/rendering/list.component.js +7 -3
  28. package/dist/es2015/rendering/loading-template.directive.d.ts +14 -0
  29. package/dist/es2015/rendering/loading-template.directive.js +23 -0
  30. package/dist/es2015/rendering/table-body.component.d.ts +1 -1
  31. package/dist/es2015/rendering/table-body.component.js +3 -2
  32. package/dist/fesm2015/index.js +94 -23
  33. package/dist/fesm5/index.js +90 -19
  34. package/dist/npm/columns/sort-settings.js +2 -1
  35. package/dist/npm/grid.component.js +22 -4
  36. package/dist/npm/main.js +2 -0
  37. package/dist/npm/package-metadata.js +1 -1
  38. package/dist/npm/rendering/body.module.js +5 -2
  39. package/dist/npm/rendering/common/loading.component.js +6 -1
  40. package/dist/npm/rendering/header/header.component.js +31 -6
  41. package/dist/npm/rendering/list.component.js +5 -1
  42. package/dist/npm/rendering/loading-template.directive.js +26 -0
  43. package/dist/npm/rendering/table-body.component.js +2 -2
  44. package/dist/systemjs/kendo-angular-grid.js +1 -1
  45. package/package.json +5 -3
@@ -72,6 +72,7 @@ var default_track_by_1 = require("./common/default-track-by");
72
72
  var cell_selection_service_1 = require("./selection/cell-selection.service");
73
73
  var column_sticky_change_event_1 = require("./column-menu/column-sticky-change-event");
74
74
  var cell_loading_template_directive_1 = require("./rendering/cell-loading.template.directive");
75
+ var loading_template_directive_1 = require("./rendering/loading-template.directive");
75
76
  var createControl = function (source) { return function (acc, key) {
76
77
  acc[key] = new forms_1.FormControl(source[key]);
77
78
  return acc;
@@ -830,15 +831,28 @@ var GridComponent = /** @class */ (function () {
830
831
  enumerable: true,
831
832
  configurable: true
832
833
  });
833
- Object.defineProperty(GridComponent.prototype, "loadingTemplate", {
834
+ Object.defineProperty(GridComponent.prototype, "cellLoadingTemplate", {
834
835
  get: function () {
835
- if (this._customLoadingTemplate) {
836
+ if (this._cellLoadingTemplate) {
836
837
  return this._customDetailTemplate;
837
838
  }
839
+ return this.cellLoadingTemplateChildren ? this.cellLoadingTemplateChildren.first : undefined;
840
+ },
841
+ set: function (cellLoadingTemplate) {
842
+ this._cellLoadingTemplate = cellLoadingTemplate;
843
+ },
844
+ enumerable: true,
845
+ configurable: true
846
+ });
847
+ Object.defineProperty(GridComponent.prototype, "loadingTemplate", {
848
+ get: function () {
849
+ if (this._loadingTemplate) {
850
+ return this._loadingTemplate;
851
+ }
838
852
  return this.loadingTemplateChildren ? this.loadingTemplateChildren.first : undefined;
839
853
  },
840
854
  set: function (loadingTemplate) {
841
- this._customLoadingTemplate = loadingTemplate;
855
+ this._loadingTemplate = loadingTemplate;
842
856
  },
843
857
  enumerable: true,
844
858
  configurable: true
@@ -2595,6 +2609,10 @@ var GridComponent = /** @class */ (function () {
2595
2609
  tslib_1.__decorate([
2596
2610
  core_1.ContentChildren(cell_loading_template_directive_1.CellLoadingTemplateDirective),
2597
2611
  tslib_1.__metadata("design:type", core_1.QueryList)
2612
+ ], GridComponent.prototype, "cellLoadingTemplateChildren", void 0);
2613
+ tslib_1.__decorate([
2614
+ core_1.ContentChildren(loading_template_directive_1.LoadingTemplateDirective),
2615
+ tslib_1.__metadata("design:type", core_1.QueryList)
2598
2616
  ], GridComponent.prototype, "loadingTemplateChildren", void 0);
2599
2617
  tslib_1.__decorate([
2600
2618
  core_1.ContentChildren(no_records_template_directive_1.NoRecordsTemplateDirective),
@@ -2688,7 +2706,7 @@ var GridComponent = /** @class */ (function () {
2688
2706
  // Styles for backwards compatibility with kendo-theme-default@v2.46.0 and earlier.
2689
2707
  " .k-grid .k-grid-aria-root {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .k-grid .k-filter-row td {\n white-space: nowrap;\n }"
2690
2708
  ],
2691
- template: "\n <ng-container kendoGridLocalizedMessages\n i18n-groupPanelEmpty=\"kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty\"\n groupPanelEmpty=\"Drag a column header and drop it here to group by that column\"\n\n i18n-noRecords=\"kendo.grid.noRecords|The label visible in the Grid when there are no records\"\n noRecords=\"No records available.\"\n\n i18n-pagerLabel=\"kendo.grid.pagerLabel|The label for the Grid pager\"\n pagerLabel=\"{{ 'Page navigation, page {currentPage} of {totalPages}' }}\"\n\n i18n-pagerFirstPage=\"kendo.grid.pagerFirstPage|The label for the first page button in Grid pager\"\n pagerFirstPage=\"Go to the first page\"\n\n i18n-pagerPreviousPage=\"kendo.grid.pagerPreviousPage|The label for the previous page button in Grid pager\"\n pagerPreviousPage=\"Go to the previous page\"\n\n i18n-pagerNextPage=\"kendo.grid.pagerNextPage|The label for the next page button in Grid pager\"\n pagerNextPage=\"Go to the next page\"\n\n i18n-pagerLastPage=\"kendo.grid.pagerLastPage|The label for the last page button in Grid pager\"\n pagerLastPage=\"Go to the last page\"\n\n i18n-pagerPage=\"kendo.grid.pagerPage|The label before the current page number in the Grid pager\"\n pagerPage=\"Page\"\n\n i18n-pagerOf=\"kendo.grid.pagerOf|The label before the total pages number in the Grid pager\"\n pagerOf=\"of\"\n\n i18n-pagerItems=\"kendo.grid.pagerItems|The label after the total pages number in the Grid pager\"\n pagerItems=\"items\"\n\n i18n-pagerPageNumberInputTitle=\"kendo.grid.pagerPageNumberInputTitle|The label for the pager input in the Grid pager\"\n pagerPageNumberInputTitle=\"Page Number\"\n\n i18n-pagerItemsPerPage=\"kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager\"\n pagerItemsPerPage=\"items per page\"\n\n i18n-filter=\"kendo.grid.filter|The label of the filter cell or icon\"\n filter=\"Filter\"\n\n i18n-filterInputLabel=\"kendo.grid.filterInputLabel|The label of the filter row and menu inputs\"\n filterInputLabel=\"{{ '{columnName} Filter' }}\"\n\n i18n-filterMenuTitle=\"kendo.grid.filterMenuTitle|The title of the filter menu icon\"\n filterMenuTitle=\"{{ '{columnName} Filter Menu' }}\"\n\n i18n-filterMenuOperatorsDropDownLabel=\"kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown\"\n filterMenuOperatorsDropDownLabel=\"{{ '{columnName} Filter Operators' }}\"\n\n i18n-filterMenuLogicDropDownLabel=\"kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown\"\n filterMenuLogicDropDownLabel=\"{{ '{columnName} Filter Logic' }}\"\n\n i18n-filterEqOperator=\"kendo.grid.filterEqOperator|The text of the equal filter operator\"\n filterEqOperator=\"Is equal to\"\n\n i18n-filterNotEqOperator=\"kendo.grid.filterNotEqOperator|The text of the not equal filter operator\"\n filterNotEqOperator=\"Is not equal to\"\n\n i18n-filterIsNullOperator=\"kendo.grid.filterIsNullOperator|The text of the is null filter operator\"\n filterIsNullOperator=\"Is null\"\n\n i18n-filterIsNotNullOperator=\"kendo.grid.filterIsNotNullOperator|The text of the is not null filter operator\"\n filterIsNotNullOperator=\"Is not null\"\n\n i18n-filterIsEmptyOperator=\"kendo.grid.filterIsEmptyOperator|The text of the is empty filter operator\"\n filterIsEmptyOperator=\"Is empty\"\n\n i18n-filterIsNotEmptyOperator=\"kendo.grid.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n filterIsNotEmptyOperator=\"Is not empty\"\n\n i18n-filterStartsWithOperator=\"kendo.grid.filterStartsWithOperator|The text of the starts with filter operator\"\n filterStartsWithOperator=\"Starts with\"\n\n i18n-filterContainsOperator=\"kendo.grid.filterContainsOperator|The text of the contains filter operator\"\n filterContainsOperator=\"Contains\"\n\n i18n-filterNotContainsOperator=\"kendo.grid.filterNotContainsOperator|The text of the does not contain filter operator\"\n filterNotContainsOperator=\"Does not contain\"\n\n i18n-filterEndsWithOperator=\"kendo.grid.filterEndsWithOperator|The text of the ends with filter operator\"\n filterEndsWithOperator=\"Ends with\"\n\n i18n-filterGteOperator=\"kendo.grid.filterGteOperator|The text of the greater than or equal filter operator\"\n filterGteOperator=\"Is greater than or equal to\"\n\n i18n-filterGtOperator=\"kendo.grid.filterGtOperator|The text of the greater than filter operator\"\n filterGtOperator=\"Is greater than\"\n\n i18n-filterLteOperator=\"kendo.grid.filterLteOperator|The text of the less than or equal filter operator\"\n filterLteOperator=\"Is less than or equal to\"\n\n i18n-filterLtOperator=\"kendo.grid.filterLtOperator|The text of the less than filter operator\"\n filterLtOperator=\"Is less than\"\n\n i18n-filterIsTrue=\"kendo.grid.filterIsTrue|The text of the IsTrue boolean filter option\"\n filterIsTrue=\"Is True\"\n\n i18n-filterIsFalse=\"kendo.grid.filterIsFalse|The text of the IsFalse boolean filter option\"\n filterIsFalse=\"Is False\"\n\n i18n-filterBooleanAll=\"kendo.grid.filterBooleanAll|The text of the (All) boolean filter option\"\n filterBooleanAll=\"(All)\"\n\n i18n-filterAfterOrEqualOperator=\"kendo.grid.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n filterAfterOrEqualOperator=\"Is after or equal to\"\n\n i18n-filterAfterOperator=\"kendo.grid.filterAfterOperator|The text of the after date filter operator\"\n filterAfterOperator=\"Is after\"\n\n i18n-filterBeforeOperator=\"kendo.grid.filterBeforeOperator|The text of the before date filter operator\"\n filterBeforeOperator=\"Is before\"\n\n i18n-filterBeforeOrEqualOperator=\"kendo.grid.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n i18n-filterFilterButton=\"kendo.grid.filterFilterButton|The text of the filter button\"\n filterFilterButton=\"Filter\"\n\n i18n-filterClearButton=\"kendo.grid.filterClearButton|The text of the clear filter button\"\n filterClearButton=\"Clear\"\n\n i18n-filterAndLogic=\"kendo.grid.filterAndLogic|The text of the And filter logic\"\n filterAndLogic=\"And\"\n\n i18n-filterOrLogic=\"kendo.grid.filterOrLogic|The text of the Or filter logic\"\n filterOrLogic=\"Or\"\n\n i18n-loading=\"kendo.grid.loading|The loading text\"\n loading=\"Loading\"\n\n i18n-gridLabel=\"kendo.grid.gridLabel|The Grid aria-label\"\n gridLabel=\"Data table\"\n\n i18n-columnMenu=\"kendo.grid.columnMenu|The title of the column menu icon\"\n columnMenu=\"{{ '{columnName} Column Menu' }}\"\n\n i18n-columns=\"kendo.grid.columns|The text shown in the column menu for the columns item\"\n columns=\"Columns\"\n\n i18n-lock=\"kendo.grid.lock|The text shown in the column menu for the lock item\"\n lock=\"Lock\"\n\n i18n-unlock=\"kendo.grid.unlock|The text shown in the column menu for the unlock item\"\n unlock=\"Unlock\"\n\n i18n-setColumnPosition=\"kendo.grid.setColumnPosition|The text shown in the column menu for the set column position item\"\n setColumnPosition=\"Set Column Position\"\n\n i18n-stick=\"kendo.grid.stick|The text shown in the column menu for the stick item\"\n stick=\"Stick\"\n\n i18n-unstick=\"kendo.grid.unstick|The text shown in the column menu for the unstick item\"\n unstick=\"Unstick\"\n\n i18n-sortable=\"kendo.grid.sortable|The label of the sort icon\"\n sortable=\"Sortable\"\n\n i18n-sortAscending=\"kendo.grid.sortAscending|The text shown in the column menu for the sort ascending item\"\n sortAscending=\"Sort Ascending\"\n\n i18n-sortDescending=\"kendo.grid.sortDescending|The text shown in the column menu for the sort descending item\"\n sortDescending=\"Sort Descending\"\n\n i18n-sortedAscending=\"kendo.grid.sortedAscending|The status announcement when a column is sorted ascending\"\n sortedAscending=\"Sorted Ascending\"\n\n i18n-sortedDescending=\"kendo.grid.sortedDescending|The status announcement when a column is sorted descending\"\n sortedDescending=\"Sorted Descending\"\n\n i18n-sortedDefault=\"kendo.grid.sortedDefault|The status announcement when a column is no longer sorted\"\n sortedDefault=\"Not Sorted\"\n\n i18n-columnsApply=\"kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n columnsApply=\"Apply\"\n\n i18n-columnsReset=\"kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n columnsReset=\"Reset\"\n\n i18n-detailExpand=\"kendo.grid.detailExpand|The title of the expand icon of detail rows.\"\n detailExpand=\"Expand Details\"\n\n i18n-detailCollapse=\"kendo.grid.detailCollapse|The title of the collapse icon of detail rows.\"\n detailCollapse=\"Collapse Details\"\n\n i18n-filterDateToday=\"kendo.grid.filterDateToday|The text of the Today button of the Date filter.\"\n filterDateToday=\"TODAY\"\n\n i18n-filterDateToggle=\"kendo.grid.filterDateToggle|The title of the Toggle button of the Date filter.\"\n filterDateToggle=\"Toggle Calendar\"\n\n i18n-filterNumericDecrement=\"kendo.grid.filterNumericDecrement|The title of the Decrement button of the Numeric filter.\"\n filterNumericDecrement=\"Decrement\"\n\n i18n-filterNumericIncrement=\"kendo.grid.filterNumericIncrement|The title of the Increment button of the Numeric filter.\"\n filterNumericIncrement=\"Increment\"\n\n i18n-selectionCheckboxLabel=\"kendo.grid.selectionCheckboxLabel|The labels of the checkbox column checkboxes.\"\n selectionCheckboxLabel=\"Select Row\"\n\n i18n-selectAllCheckboxLabel=\"kendo.grid.selectAllCheckboxLabel|The label of the checkbox column select all checkbox.\"\n selectAllCheckboxLabel=\"Select All Rows\"\n\n i18n-groupCollapse=\"kendo.grid.groupCollapse|The text of the title and aria-label attributes applied to the collapse icon of group rows.\"\n groupCollapse=\"Collapse Group\"\n\n i18n-groupExpand=\"kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows.\"\n groupExpand=\"Expand Group\"\n >\n </ng-container>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar\" *ngIf=\"showTopToolbar\" position=\"top\"></kendo-grid-toolbar>\n <kendo-pager\n *ngIf=\"showTopPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n class=\"k-grid-pager-top\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-group-panel\n *ngIf=\"showGroupPanel\"\n [text]=\"groupableEmptyText\"\n [groups]=\"group\"\n (change)=\"groupChange.emit($event)\">\n </kendo-grid-group-panel>\n <div #ariaRoot\n class=\"k-grid-aria-root\"\n role=\"grid\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-rowcount]=\"ariaRowCount\"\n [attr.aria-colcount]=\"ariaColCount\">\n <ng-template [ngIf]=\"isScrollable\">\n <div *ngIf=\"!hideHeader\"\n class=\"k-grid-header\"\n role=\"presentation\"\n [style.padding]=\"headerPadding\">\n <div *ngIf=\"isLocked\"\n #lockedHeader\n role=\"presentation\"\n class=\"k-grid-header-locked\"\n [style.width.px]=\"lockedWidth\">\n <table [locked]=\"true\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [columns]=\"lockedColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [groups]=\"group\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n </div><div #header class=\"k-grid-header-wrap\" role=\"presentation\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 2\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\" [virtualColumns]=\"virtualColumns\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"headerLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n role=\"presentation\"\n [scrollable]=\"true\"\n [columns]=\"headerColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [groups]=\"isLocked ? [] : group\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"columnsContainer.unlockedWidth\"></div>\n </div>\n </div>\n </div>\n <kendo-grid-list\n [data]=\"view\"\n [rowHeight]=\"rowHeight\"\n [detailRowHeight]=\"detailRowHeight\"\n [total]=\"totalCount\"\n [take]=\"pageSize\"\n [groups]=\"group\"\n [groupable]=\"groupable\"\n [skip]=\"skip\"\n [trackBy]=\"trackBy\"\n [columns]=\"columnsContainer\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n (pageChange)=\"notifyPageChange('list', $event)\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [loading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [loadingTemplate]=\"loadingTemplate?.templateRef\"\n [virtualColumns]=\"virtualColumns\"\n (scrollBottom)=\"notifyScrollBottom()\"\n (contentScroll)=\"contentScroll.emit($event)\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\"\n >\n </kendo-grid-list>\n <div\n *ngIf=\"showFooter\"\n class=\"k-grid-footer\"\n [style.padding]=\"headerPadding\">\n <div\n *ngIf=\"lockedLeafColumns.length\"\n class=\"k-grid-footer-locked\"\n [style.width.px]=\"lockedWidth\">\n <table role=\"presentation\" [locked]=\"true\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [scrollable]=\"true\"\n [groups]=\"group\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [logicalRowIndex]=\"ariaRowCount\">\n </tfoot>\n </table>\n </div><div #footer\n class=\"k-grid-footer-wrap\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 3\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"nonLockedLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [logicalRowIndex]=\"ariaRowCount\"\n [scrollable]=\"true\"\n [groups]=\"isLocked ? [] : group\"\n [columns]=\"nonLockedLeafColumns\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"!isScrollable\">\n <table [style.table-layout]=\"resizable ? 'fixed' : null\">\n <colgroup kendoGridColGroup\n [columns]=\"leafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n *ngIf=\"!hideHeader\"\n [resizable]=\"resizable\"\n [scrollable]=\"false\"\n [columns]=\"visibleColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [groups]=\"group\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sort]=\"sort\"\n [sortable]=\"sortable\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n <tbody kendoGridTableBody\n [isLoading]=\"loading\"\n [groups]=\"group\"\n [data]=\"view\"\n [skip]=\"skip\"\n [columns]=\"leafColumns\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showGroupFooters\"\n [trackBy]=\"trackBy\"\n [rowClass]=\"rowClass\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\">\n </tbody>\n <tfoot kendoGridFooter\n *ngIf=\"showFooter\"\n [scrollable]=\"false\"\n [logicalRowIndex]=\"ariaRowCount\"\n [groups]=\"group\"\n [columns]=\"leafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n <div *ngIf=\"loading\" kendoGridLoading>\n </div>\n </ng-template>\n </div>\n <kendo-pager\n *ngIf=\"showBottomPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar k-grid-toolbar-bottom\" *ngIf=\"showBottomToolbar\" position=\"bottom\"></kendo-grid-toolbar>\n "
2709
+ template: "\n <ng-container kendoGridLocalizedMessages\n i18n-groupPanelEmpty=\"kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty\"\n groupPanelEmpty=\"Drag a column header and drop it here to group by that column\"\n\n i18n-noRecords=\"kendo.grid.noRecords|The label visible in the Grid when there are no records\"\n noRecords=\"No records available.\"\n\n i18n-pagerLabel=\"kendo.grid.pagerLabel|The label for the Grid pager\"\n pagerLabel=\"{{ 'Page navigation, page {currentPage} of {totalPages}' }}\"\n\n i18n-pagerFirstPage=\"kendo.grid.pagerFirstPage|The label for the first page button in Grid pager\"\n pagerFirstPage=\"Go to the first page\"\n\n i18n-pagerPreviousPage=\"kendo.grid.pagerPreviousPage|The label for the previous page button in Grid pager\"\n pagerPreviousPage=\"Go to the previous page\"\n\n i18n-pagerNextPage=\"kendo.grid.pagerNextPage|The label for the next page button in Grid pager\"\n pagerNextPage=\"Go to the next page\"\n\n i18n-pagerLastPage=\"kendo.grid.pagerLastPage|The label for the last page button in Grid pager\"\n pagerLastPage=\"Go to the last page\"\n\n i18n-pagerPage=\"kendo.grid.pagerPage|The label before the current page number in the Grid pager\"\n pagerPage=\"Page\"\n\n i18n-pagerOf=\"kendo.grid.pagerOf|The label before the total pages number in the Grid pager\"\n pagerOf=\"of\"\n\n i18n-pagerItems=\"kendo.grid.pagerItems|The label after the total pages number in the Grid pager\"\n pagerItems=\"items\"\n\n i18n-pagerPageNumberInputTitle=\"kendo.grid.pagerPageNumberInputTitle|The label for the pager input in the Grid pager\"\n pagerPageNumberInputTitle=\"Page Number\"\n\n i18n-pagerItemsPerPage=\"kendo.grid.pagerItemsPerPage|The label for the page size chooser in the Grid pager\"\n pagerItemsPerPage=\"items per page\"\n\n i18n-filter=\"kendo.grid.filter|The label of the filter cell or icon\"\n filter=\"Filter\"\n\n i18n-filterInputLabel=\"kendo.grid.filterInputLabel|The label of the filter row and menu inputs\"\n filterInputLabel=\"{{ '{columnName} Filter' }}\"\n\n i18n-filterMenuTitle=\"kendo.grid.filterMenuTitle|The title of the filter menu icon\"\n filterMenuTitle=\"{{ '{columnName} Filter Menu' }}\"\n\n i18n-filterMenuOperatorsDropDownLabel=\"kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown\"\n filterMenuOperatorsDropDownLabel=\"{{ '{columnName} Filter Operators' }}\"\n\n i18n-filterMenuLogicDropDownLabel=\"kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown\"\n filterMenuLogicDropDownLabel=\"{{ '{columnName} Filter Logic' }}\"\n\n i18n-filterEqOperator=\"kendo.grid.filterEqOperator|The text of the equal filter operator\"\n filterEqOperator=\"Is equal to\"\n\n i18n-filterNotEqOperator=\"kendo.grid.filterNotEqOperator|The text of the not equal filter operator\"\n filterNotEqOperator=\"Is not equal to\"\n\n i18n-filterIsNullOperator=\"kendo.grid.filterIsNullOperator|The text of the is null filter operator\"\n filterIsNullOperator=\"Is null\"\n\n i18n-filterIsNotNullOperator=\"kendo.grid.filterIsNotNullOperator|The text of the is not null filter operator\"\n filterIsNotNullOperator=\"Is not null\"\n\n i18n-filterIsEmptyOperator=\"kendo.grid.filterIsEmptyOperator|The text of the is empty filter operator\"\n filterIsEmptyOperator=\"Is empty\"\n\n i18n-filterIsNotEmptyOperator=\"kendo.grid.filterIsNotEmptyOperator|The text of the is not empty filter operator\"\n filterIsNotEmptyOperator=\"Is not empty\"\n\n i18n-filterStartsWithOperator=\"kendo.grid.filterStartsWithOperator|The text of the starts with filter operator\"\n filterStartsWithOperator=\"Starts with\"\n\n i18n-filterContainsOperator=\"kendo.grid.filterContainsOperator|The text of the contains filter operator\"\n filterContainsOperator=\"Contains\"\n\n i18n-filterNotContainsOperator=\"kendo.grid.filterNotContainsOperator|The text of the does not contain filter operator\"\n filterNotContainsOperator=\"Does not contain\"\n\n i18n-filterEndsWithOperator=\"kendo.grid.filterEndsWithOperator|The text of the ends with filter operator\"\n filterEndsWithOperator=\"Ends with\"\n\n i18n-filterGteOperator=\"kendo.grid.filterGteOperator|The text of the greater than or equal filter operator\"\n filterGteOperator=\"Is greater than or equal to\"\n\n i18n-filterGtOperator=\"kendo.grid.filterGtOperator|The text of the greater than filter operator\"\n filterGtOperator=\"Is greater than\"\n\n i18n-filterLteOperator=\"kendo.grid.filterLteOperator|The text of the less than or equal filter operator\"\n filterLteOperator=\"Is less than or equal to\"\n\n i18n-filterLtOperator=\"kendo.grid.filterLtOperator|The text of the less than filter operator\"\n filterLtOperator=\"Is less than\"\n\n i18n-filterIsTrue=\"kendo.grid.filterIsTrue|The text of the IsTrue boolean filter option\"\n filterIsTrue=\"Is True\"\n\n i18n-filterIsFalse=\"kendo.grid.filterIsFalse|The text of the IsFalse boolean filter option\"\n filterIsFalse=\"Is False\"\n\n i18n-filterBooleanAll=\"kendo.grid.filterBooleanAll|The text of the (All) boolean filter option\"\n filterBooleanAll=\"(All)\"\n\n i18n-filterAfterOrEqualOperator=\"kendo.grid.filterAfterOrEqualOperator|The text of the after or equal date filter operator\"\n filterAfterOrEqualOperator=\"Is after or equal to\"\n\n i18n-filterAfterOperator=\"kendo.grid.filterAfterOperator|The text of the after date filter operator\"\n filterAfterOperator=\"Is after\"\n\n i18n-filterBeforeOperator=\"kendo.grid.filterBeforeOperator|The text of the before date filter operator\"\n filterBeforeOperator=\"Is before\"\n\n i18n-filterBeforeOrEqualOperator=\"kendo.grid.filterBeforeOrEqualOperator|The text of the before or equal date filter operator\"\n filterBeforeOrEqualOperator=\"Is before or equal to\"\n\n i18n-filterFilterButton=\"kendo.grid.filterFilterButton|The text of the filter button\"\n filterFilterButton=\"Filter\"\n\n i18n-filterClearButton=\"kendo.grid.filterClearButton|The text of the clear filter button\"\n filterClearButton=\"Clear\"\n\n i18n-filterAndLogic=\"kendo.grid.filterAndLogic|The text of the And filter logic\"\n filterAndLogic=\"And\"\n\n i18n-filterOrLogic=\"kendo.grid.filterOrLogic|The text of the Or filter logic\"\n filterOrLogic=\"Or\"\n\n i18n-loading=\"kendo.grid.loading|The loading text\"\n loading=\"Loading\"\n\n i18n-gridLabel=\"kendo.grid.gridLabel|The Grid aria-label\"\n gridLabel=\"Data table\"\n\n i18n-columnMenu=\"kendo.grid.columnMenu|The title of the column menu icon\"\n columnMenu=\"{{ '{columnName} Column Menu' }}\"\n\n i18n-columns=\"kendo.grid.columns|The text shown in the column menu for the columns item\"\n columns=\"Columns\"\n\n i18n-lock=\"kendo.grid.lock|The text shown in the column menu for the lock item\"\n lock=\"Lock\"\n\n i18n-unlock=\"kendo.grid.unlock|The text shown in the column menu for the unlock item\"\n unlock=\"Unlock\"\n\n i18n-setColumnPosition=\"kendo.grid.setColumnPosition|The text shown in the column menu for the set column position item\"\n setColumnPosition=\"Set Column Position\"\n\n i18n-stick=\"kendo.grid.stick|The text shown in the column menu for the stick item\"\n stick=\"Stick\"\n\n i18n-unstick=\"kendo.grid.unstick|The text shown in the column menu for the unstick item\"\n unstick=\"Unstick\"\n\n i18n-sortable=\"kendo.grid.sortable|The label of the sort icon\"\n sortable=\"Sortable\"\n\n i18n-sortAscending=\"kendo.grid.sortAscending|The text shown in the column menu for the sort ascending item\"\n sortAscending=\"Sort Ascending\"\n\n i18n-sortDescending=\"kendo.grid.sortDescending|The text shown in the column menu for the sort descending item\"\n sortDescending=\"Sort Descending\"\n\n i18n-sortedAscending=\"kendo.grid.sortedAscending|The status announcement when a column is sorted ascending\"\n sortedAscending=\"Sorted Ascending\"\n\n i18n-sortedDescending=\"kendo.grid.sortedDescending|The status announcement when a column is sorted descending\"\n sortedDescending=\"Sorted Descending\"\n\n i18n-sortedDefault=\"kendo.grid.sortedDefault|The status announcement when a column is no longer sorted\"\n sortedDefault=\"Not Sorted\"\n\n i18n-columnsApply=\"kendo.grid.columnsApply|The text shown in the column menu or column chooser for the columns apply button\"\n columnsApply=\"Apply\"\n\n i18n-columnsReset=\"kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button\"\n columnsReset=\"Reset\"\n\n i18n-detailExpand=\"kendo.grid.detailExpand|The title of the expand icon of detail rows.\"\n detailExpand=\"Expand Details\"\n\n i18n-detailCollapse=\"kendo.grid.detailCollapse|The title of the collapse icon of detail rows.\"\n detailCollapse=\"Collapse Details\"\n\n i18n-filterDateToday=\"kendo.grid.filterDateToday|The text of the Today button of the Date filter.\"\n filterDateToday=\"TODAY\"\n\n i18n-filterDateToggle=\"kendo.grid.filterDateToggle|The title of the Toggle button of the Date filter.\"\n filterDateToggle=\"Toggle Calendar\"\n\n i18n-filterNumericDecrement=\"kendo.grid.filterNumericDecrement|The title of the Decrement button of the Numeric filter.\"\n filterNumericDecrement=\"Decrement\"\n\n i18n-filterNumericIncrement=\"kendo.grid.filterNumericIncrement|The title of the Increment button of the Numeric filter.\"\n filterNumericIncrement=\"Increment\"\n\n i18n-selectionCheckboxLabel=\"kendo.grid.selectionCheckboxLabel|The labels of the checkbox column checkboxes.\"\n selectionCheckboxLabel=\"Select Row\"\n\n i18n-selectAllCheckboxLabel=\"kendo.grid.selectAllCheckboxLabel|The label of the checkbox column select all checkbox.\"\n selectAllCheckboxLabel=\"Select All Rows\"\n\n i18n-groupCollapse=\"kendo.grid.groupCollapse|The text of the title and aria-label attributes applied to the collapse icon of group rows.\"\n groupCollapse=\"Collapse Group\"\n\n i18n-groupExpand=\"kendo.grid.groupExpand|The text of the title and aria-label attributes applied to the expand icon of group rows.\"\n groupExpand=\"Expand Group\"\n >\n </ng-container>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar\" *ngIf=\"showTopToolbar\" position=\"top\"></kendo-grid-toolbar>\n <kendo-pager\n *ngIf=\"showTopPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n class=\"k-grid-pager-top\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-group-panel\n *ngIf=\"showGroupPanel\"\n [text]=\"groupableEmptyText\"\n [groups]=\"group\"\n (change)=\"groupChange.emit($event)\">\n </kendo-grid-group-panel>\n <div #ariaRoot\n class=\"k-grid-aria-root\"\n role=\"grid\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-rowcount]=\"ariaRowCount\"\n [attr.aria-colcount]=\"ariaColCount\">\n <ng-template [ngIf]=\"isScrollable\">\n <div *ngIf=\"!hideHeader\"\n class=\"k-grid-header\"\n role=\"presentation\"\n [style.padding]=\"headerPadding\">\n <div *ngIf=\"isLocked\"\n #lockedHeader\n role=\"presentation\"\n class=\"k-grid-header-locked\"\n [style.width.px]=\"lockedWidth\">\n <table [locked]=\"true\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n [scrollable]=\"true\"\n [columns]=\"lockedColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [groups]=\"group\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n </div><div #header class=\"k-grid-header-wrap\" role=\"presentation\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 2\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\" [virtualColumns]=\"virtualColumns\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [columns]=\"headerLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n [resizable]=\"resizable\"\n role=\"presentation\"\n [scrollable]=\"true\"\n [columns]=\"headerColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [sort]=\"sort\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [groups]=\"isLocked ? [] : group\"\n [sortable]=\"sortable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n </table>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"columnsContainer.unlockedWidth\"></div>\n </div>\n </div>\n </div>\n <kendo-grid-list\n [data]=\"view\"\n [rowHeight]=\"rowHeight\"\n [detailRowHeight]=\"detailRowHeight\"\n [total]=\"totalCount\"\n [take]=\"pageSize\"\n [groups]=\"group\"\n [groupable]=\"groupable\"\n [skip]=\"skip\"\n [trackBy]=\"trackBy\"\n [columns]=\"columnsContainer\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n (pageChange)=\"notifyPageChange('list', $event)\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [loading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate?.templateRef\"\n [loadingTemplate]=\"loadingTemplate?.templateRef\"\n [virtualColumns]=\"virtualColumns\"\n (scrollBottom)=\"notifyScrollBottom()\"\n (contentScroll)=\"contentScroll.emit($event)\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\"\n >\n </kendo-grid-list>\n <div\n *ngIf=\"showFooter\"\n class=\"k-grid-footer\"\n [style.padding]=\"headerPadding\">\n <div\n *ngIf=\"lockedLeafColumns.length\"\n class=\"k-grid-footer-locked\"\n [style.width.px]=\"lockedWidth\">\n <table role=\"presentation\" [locked]=\"true\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"lockedLeafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [scrollable]=\"true\"\n [groups]=\"group\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [logicalRowIndex]=\"ariaRowCount\">\n </tfoot>\n </table>\n </div><div #footer\n class=\"k-grid-footer-wrap\" data-scrollable\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + scrollbarWidth + 3\">\n <table role=\"presentation\" [style.width.px]=\"nonLockedWidth\">\n <colgroup kendoGridColGroup\n [columns]=\"nonLockedLeafColumns\"\n [groups]=\"isLocked ? [] : group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tfoot kendoGridFooter\n [logicalRowIndex]=\"ariaRowCount\"\n [scrollable]=\"true\"\n [groups]=\"isLocked ? [] : group\"\n [columns]=\"nonLockedLeafColumns\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n </div>\n </div>\n </ng-template>\n <ng-template [ngIf]=\"!isScrollable\">\n <table [style.table-layout]=\"resizable ? 'fixed' : null\">\n <colgroup kendoGridColGroup\n [columns]=\"leafColumns\"\n [groups]=\"group\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <thead kendoGridHeader\n *ngIf=\"!hideHeader\"\n [resizable]=\"resizable\"\n [scrollable]=\"false\"\n [columns]=\"visibleColumns\"\n [totalColumnLevels]=\"totalColumnLevels\"\n [groups]=\"group\"\n [groupable]=\"showGroupPanel\"\n [reorderable]=\"reorderable\"\n [sort]=\"sort\"\n [sortable]=\"sortable\"\n [filter]=\"filter\"\n [filterable]=\"filterable\"\n [columnMenu]=\"columnMenuOptions\"\n [columnMenuTemplate]=\"columnMenuTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [tabIndex]=\"navigable ? '-1' : '0'\">\n </thead>\n <tbody kendoGridTableBody\n [isLoading]=\"loading\"\n [groups]=\"group\"\n [data]=\"view\"\n [skip]=\"skip\"\n [columns]=\"leafColumns\"\n [selectable]=\"selectable\"\n [filterable]=\"filterable\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showGroupFooters\"\n [trackBy]=\"trackBy\"\n [rowClass]=\"rowClass\"\n kendoDraggable\n kendoGridSelectionMarquee\n [enableDrag]=\"marqueeSelection\">\n </tbody>\n <tfoot kendoGridFooter\n *ngIf=\"showFooter\"\n [scrollable]=\"false\"\n [logicalRowIndex]=\"ariaRowCount\"\n [groups]=\"group\"\n [columns]=\"leafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </tfoot>\n </table>\n <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n </div>\n </ng-template>\n </div>\n <kendo-pager\n *ngIf=\"showBottomPager\"\n [tabindex]=\"navigable ? '0' : '-1'\"\n [attr.role]=\"navigable ? 'navigation' : undefined\"\n [template]=\"pagerTemplate\"\n [pageSize]=\"pageSize\"\n [total]=\"view.total\"\n [skip]=\"skip\"\n [options]=\"pageable\"\n (pageChange)=\"notifyPageChange('pager', $event)\">\n </kendo-pager>\n <kendo-grid-toolbar class=\"k-toolbar k-grid-toolbar k-grid-toolbar-bottom\" *ngIf=\"showBottomToolbar\" position=\"bottom\"></kendo-grid-toolbar>\n "
2692
2710
  }),
2693
2711
  tslib_1.__metadata("design:paramtypes", [browser_support_service_1.BrowserSupportService,
2694
2712
  selection_service_1.SelectionService,
package/dist/npm/main.js CHANGED
@@ -30,6 +30,8 @@ var cell_template_directive_1 = require("./rendering/cell-template.directive");
30
30
  exports.CellTemplateDirective = cell_template_directive_1.CellTemplateDirective;
31
31
  var cell_loading_template_directive_1 = require("./rendering/cell-loading.template.directive");
32
32
  exports.CellLoadingTemplateDirective = cell_loading_template_directive_1.CellLoadingTemplateDirective;
33
+ var loading_template_directive_1 = require("./rendering/loading-template.directive");
34
+ exports.LoadingTemplateDirective = loading_template_directive_1.LoadingTemplateDirective;
33
35
  var header_template_directive_1 = require("./rendering/header/header-template.directive");
34
36
  exports.HeaderTemplateDirective = header_template_directive_1.HeaderTemplateDirective;
35
37
  var footer_template_directive_1 = require("./rendering/footer/footer-template.directive");
@@ -11,7 +11,7 @@ exports.packageMetadata = {
11
11
  name: '@progress/kendo-angular-grid',
12
12
  productName: 'Kendo UI for Angular',
13
13
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
14
- publishDate: 1645534887,
14
+ publishDate: 1646127685,
15
15
  version: '',
16
16
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
17
17
  };
@@ -27,6 +27,7 @@ var group_module_1 = require("../grouping/group.module");
27
27
  var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
28
28
  var kendo_angular_dateinputs_1 = require("@progress/kendo-angular-dateinputs");
29
29
  var cell_loading_template_directive_1 = require("./cell-loading.template.directive");
30
+ var loading_template_directive_1 = require("./loading-template.directive");
30
31
  var exported = [
31
32
  command_column_component_1.CommandColumnComponent,
32
33
  checkbox_column_component_1.CheckboxColumnComponent,
@@ -41,7 +42,8 @@ var exported = [
41
42
  save_command_directive_1.SaveCommandDirective,
42
43
  remove_command_directive_1.RemoveCommandDirective,
43
44
  add_command_directive_1.AddCommandDirective,
44
- cell_loading_template_directive_1.CellLoadingTemplateDirective
45
+ cell_loading_template_directive_1.CellLoadingTemplateDirective,
46
+ loading_template_directive_1.LoadingTemplateDirective
45
47
  ];
46
48
  var importedModules = [
47
49
  common_1.CommonModule,
@@ -72,7 +74,8 @@ var BodyModule = /** @class */ (function () {
72
74
  save_command_directive_1.SaveCommandDirective,
73
75
  remove_command_directive_1.RemoveCommandDirective,
74
76
  add_command_directive_1.AddCommandDirective,
75
- cell_loading_template_directive_1.CellLoadingTemplateDirective
77
+ cell_loading_template_directive_1.CellLoadingTemplateDirective,
78
+ loading_template_directive_1.LoadingTemplateDirective
76
79
  ];
77
80
  };
78
81
  BodyModule = tslib_1.__decorate([
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
7
7
  var tslib_1 = require("tslib");
8
8
  var core_1 = require("@angular/core");
9
9
  var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
10
+ var loading_template_directive_1 = require("../loading-template.directive");
10
11
  /**
11
12
  * @hidden
12
13
  */
@@ -26,10 +27,14 @@ var LoadingComponent = /** @class */ (function () {
26
27
  core_1.HostBinding('class.k-loading-mask'),
27
28
  tslib_1.__metadata("design:type", Boolean)
28
29
  ], LoadingComponent.prototype, "hostClass", void 0);
30
+ tslib_1.__decorate([
31
+ core_1.Input(),
32
+ tslib_1.__metadata("design:type", loading_template_directive_1.LoadingTemplateDirective)
33
+ ], LoadingComponent.prototype, "loadingTemplate", void 0);
29
34
  LoadingComponent = tslib_1.__decorate([
30
35
  core_1.Component({
31
36
  selector: '[kendoGridLoading]',
32
- template: "\n <span class=\"k-loading-text\">{{ loadingText }}</span>\n <div class=\"k-loading-image\"></div>\n <div class=\"k-loading-color\"></div>\n "
37
+ template: "\n <ng-container *ngIf=\"!loadingTemplate\">\n <span class=\"k-loading-text\">{{ loadingText }}</span>\n <div class=\"k-loading-image\"></div>\n <div class=\"k-loading-color\"></div>\n </ng-container>\n <ng-template *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate?.templateRef\">\n </ng-template>\n "
33
38
  }),
34
39
  tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
35
40
  ], LoadingComponent);
@@ -103,6 +103,7 @@ var lockable = function (_a) {
103
103
  var ɵ10 = lockable;
104
104
  exports.ɵ10 = ɵ10;
105
105
  var rules = utils_1.and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, utils_1.not(lastNonLocked), lockable);
106
+ var modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
106
107
  /**
107
108
  * @hidden
108
109
  */
@@ -153,8 +154,8 @@ var HeaderComponent = /** @class */ (function () {
153
154
  enumerable: true,
154
155
  configurable: true
155
156
  });
156
- HeaderComponent.prototype.sortColumn = function (column) {
157
- this.sortService.sort(this.toggleSort(column));
157
+ HeaderComponent.prototype.sortColumn = function (descriptor) {
158
+ this.sortService.sort(descriptor);
158
159
  };
159
160
  HeaderComponent.prototype.onSortClick = function (column, event, link) {
160
161
  var target = event.target;
@@ -165,7 +166,9 @@ var HeaderComponent = /** @class */ (function () {
165
166
  return;
166
167
  }
167
168
  }
168
- this.sortColumn(column);
169
+ var modifier = this.matchModifier(event);
170
+ var toggledColumn = this.toggleSort(column, modifier);
171
+ this.sortColumn(toggledColumn);
169
172
  };
170
173
  HeaderComponent.prototype.onHeaderKeydown = function (column, args) {
171
174
  if (args.keyCode === kendo_angular_common_1.Keys.ArrowDown && args.altKey && this.showFilterMenu) {
@@ -184,7 +187,8 @@ var HeaderComponent = /** @class */ (function () {
184
187
  return;
185
188
  }
186
189
  if (args.keyCode === kendo_angular_common_1.Keys.Enter && utils_1.isPresent(column.field)) {
187
- this.sortService.sort(this.toggleSort(column));
190
+ var modifier = this.matchModifier(args);
191
+ this.sortService.sort(this.toggleSort(column, modifier));
188
192
  }
189
193
  };
190
194
  HeaderComponent.prototype.showSortNumbering = function (column) {
@@ -240,14 +244,35 @@ var HeaderComponent = /** @class */ (function () {
240
244
  }
241
245
  return this.localization.get(msg);
242
246
  };
243
- HeaderComponent.prototype.toggleSort = function (column) {
247
+ /**
248
+ *
249
+ * @param column
250
+ * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
251
+ * @returns - SortDescriptor[]
252
+ */
253
+ HeaderComponent.prototype.toggleSort = function (column, modifier) {
254
+ if (modifier === void 0) { modifier = true; }
244
255
  var _a = sort_settings_1.normalize(this.sortable, column.sortable), allowUnsort = _a.allowUnsort, mode = _a.mode, initialDirection = _a.initialDirection;
245
256
  var descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
246
- if (mode === 'single') {
257
+ if (mode === 'single' || !modifier) {
247
258
  return [descriptor];
248
259
  }
249
260
  return this.sort.filter(function (desc) { return desc.field !== column.field; }).concat([descriptor]);
250
261
  };
262
+ /**
263
+ *
264
+ * Determines whether the modifier key (if any) passed
265
+ * with a click/keyboard event matches the user-defined multiSortKey.
266
+ */
267
+ HeaderComponent.prototype.matchModifier = function (event) {
268
+ var multiSortKey = sort_settings_1.normalize(this.sortable).multiSortKey;
269
+ if (multiSortKey === 'none') {
270
+ return modifierKeys.every(function (key) { return !event[key + "Key"]; });
271
+ }
272
+ return multiSortKey === 'ctrl'
273
+ ? event.ctrlKey || event.metaKey
274
+ : event[multiSortKey + "Key"];
275
+ };
251
276
  HeaderComponent.prototype.ngAfterViewInit = function () {
252
277
  this.subscription.add(utils_1.observe(this.dropTargets)
253
278
  .subscribe(this.attachTargets.bind(this)));
@@ -735,6 +735,10 @@ var ListComponent = /** @class */ (function () {
735
735
  core_1.Input(),
736
736
  tslib_1.__metadata("design:type", Boolean)
737
737
  ], ListComponent.prototype, "isVirtual", void 0);
738
+ tslib_1.__decorate([
739
+ core_1.Input(),
740
+ tslib_1.__metadata("design:type", core_1.TemplateRef)
741
+ ], ListComponent.prototype, "cellLoadingTemplate", void 0);
738
742
  tslib_1.__decorate([
739
743
  core_1.Input(),
740
744
  tslib_1.__metadata("design:type", core_1.TemplateRef)
@@ -780,7 +784,7 @@ var ListComponent = /** @class */ (function () {
780
784
  }
781
785
  ],
782
786
  selector: 'kendo-grid-list',
783
- template: "\n <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\"\n [kendoEventsOutsideAngular]=\"{\n keydown: lockedKeydown,\n scroll: lockedScroll,\n mousewheel: lockedMousewheel,\n DOMMouseScroll: lockedMousewheel\n }\"\n [scope]=\"this\"\n >\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"groups\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [groups]=\"groups\"\n [isLocked]=\"true\"\n [data]=\"data\"\n [noRecordsText]=\"''\"\n [columns]=\"lockedLeafColumns\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showFooter\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [loadingTemplate]=\"loadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor></kendo-resize-sensor>\n </div>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n </div><div #container\n class=\"k-grid-content k-virtual-content\"\n role=\"presentation\" tabindex=\"-1\"\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + 1\">\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n class=\"k-grid-table\" role=\"presentation\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"isLocked ? [] : groups\"\n [columns]=\"nonLockedColumnsToRender\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [skipGroupDecoration]=\"isLocked\"\n [data]=\"data\"\n [groups]=\"groups\"\n [showGroupFooters]=\"showFooter\"\n [columns]=\"nonLockedColumnsToRender\"\n [allColumns]=\"nonLockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [virtualColumns]=\"virtualColumns\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [loadingTemplate]=\"loadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n </div>\n <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"totalWidth\"></div>\n </div>\n </div>\n <div *ngIf=\"loading\" kendoGridLoading>\n </div>\n "
787
+ template: "\n <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\"\n [kendoEventsOutsideAngular]=\"{\n keydown: lockedKeydown,\n scroll: lockedScroll,\n mousewheel: lockedMousewheel,\n DOMMouseScroll: lockedMousewheel\n }\"\n [scope]=\"this\"\n >\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"groups\"\n [columns]=\"lockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [groups]=\"groups\"\n [isLocked]=\"true\"\n [data]=\"data\"\n [noRecordsText]=\"''\"\n [columns]=\"lockedLeafColumns\"\n [totalColumnsCount]=\"leafColumns.length\"\n [detailTemplate]=\"detailTemplate\"\n [showGroupFooters]=\"showFooter\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor></kendo-resize-sensor>\n </div>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n </div><div #container\n class=\"k-grid-content k-virtual-content\"\n role=\"presentation\" tabindex=\"-1\"\n [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n [lockedWidth]=\"lockedWidth + 1\">\n <div role=\"presentation\" class=\"k-grid-table-wrap\">\n <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n class=\"k-grid-table\" role=\"presentation\">\n <colgroup kendoGridColGroup\n role=\"presentation\"\n [groups]=\"isLocked ? [] : groups\"\n [columns]=\"nonLockedColumnsToRender\"\n [detailTemplate]=\"detailTemplate\">\n </colgroup>\n <tbody kendoGridTableBody\n role=\"presentation\"\n [skipGroupDecoration]=\"isLocked\"\n [data]=\"data\"\n [groups]=\"groups\"\n [showGroupFooters]=\"showFooter\"\n [columns]=\"nonLockedColumnsToRender\"\n [allColumns]=\"nonLockedLeafColumns\"\n [detailTemplate]=\"detailTemplate\"\n [noRecordsTemplate]=\"noRecordsTemplate\"\n [lockedColumnsCount]=\"lockedLeafColumns.length\"\n [totalColumnsCount]=\"leafColumns.length\"\n [skip]=\"skip\"\n [selectable]=\"selectable\"\n [trackBy]=\"trackBy\"\n [filterable]=\"filterable\"\n [rowClass]=\"rowClass\"\n [rowSticky]=\"rowSticky\"\n [virtualColumns]=\"virtualColumns\"\n [isLoading]=\"loading\"\n [isVirtual]=\"isVirtual\"\n [cellLoadingTemplate]=\"cellLoadingTemplate\">\n </tbody>\n </table>\n <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n </div>\n <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n <div class=\"k-height-container\" role=\"presentation\">\n <div [style.height.px]=\"totalHeight\"></div>\n </div>\n <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n <div [style.width.px]=\"totalWidth\"></div>\n </div>\n </div>\n <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n </div>\n "
784
788
  }),
785
789
  tslib_1.__param(0, core_1.Inject(exports.SCROLLER_FACTORY_TOKEN)),
786
790
  tslib_1.__metadata("design:paramtypes", [Object, details_service_1.DetailsService,
@@ -0,0 +1,26 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ "use strict";
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ var tslib_1 = require("tslib");
8
+ var core_1 = require("@angular/core");
9
+ /**
10
+ * Creates a loading template that overrides the default loading indicator of the Grid Component.
11
+ * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
12
+ * [see example]({% slug databinding_grid %}#toc-loading-template).
13
+ */
14
+ var LoadingTemplateDirective = /** @class */ (function () {
15
+ function LoadingTemplateDirective(templateRef) {
16
+ this.templateRef = templateRef;
17
+ }
18
+ LoadingTemplateDirective = tslib_1.__decorate([
19
+ core_1.Directive({
20
+ selector: '[kendoGridLoadingTemplate]'
21
+ }),
22
+ tslib_1.__metadata("design:paramtypes", [core_1.TemplateRef])
23
+ ], LoadingTemplateDirective);
24
+ return LoadingTemplateDirective;
25
+ }());
26
+ exports.LoadingTemplateDirective = LoadingTemplateDirective;
@@ -451,7 +451,7 @@ var TableBodyComponent = /** @class */ (function () {
451
451
  tslib_1.__decorate([
452
452
  core_1.Input(),
453
453
  tslib_1.__metadata("design:type", core_1.TemplateRef)
454
- ], TableBodyComponent.prototype, "loadingTemplate", void 0);
454
+ ], TableBodyComponent.prototype, "cellLoadingTemplate", void 0);
455
455
  tslib_1.__decorate([
456
456
  core_1.Input(),
457
457
  tslib_1.__metadata("design:type", Boolean)
@@ -487,7 +487,7 @@ var TableBodyComponent = /** @class */ (function () {
487
487
  TableBodyComponent = tslib_1.__decorate([
488
488
  core_1.Component({
489
489
  selector: '[kendoGridTableBody]',
490
- template: "\n <ng-template [ngIf]=\"editService.hasNewItem\">\n <tr class=\"k-grid-add-row k-grid-edit-row\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\" role=\"presentation\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </td>\n <td *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\"\n kendoGridCell\n [rowIndex]=\"-1\"\n [columnIndex]=\"lockedColumnsCount + columnIndex\"\n [isNew]=\"true\"\n [column]=\"column\"\n [dataItem]=\"newDataItem\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [ngClass]=\"column.cssClass\"\n [style.left]=\"column.sticky ? '0' : undefined\"\n [ngStyle]=\"column.sticky ? addStickyColumnStyles(column) : column.style\"\n [attr.colspan]=\"column.colspan\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [colSpan]=\"column.colspan\"\n role=\"gridcell\">\n </td>\n </tr>\n </ng-template>\n <tr *ngIf=\"data?.length === 0 || data == null\" class=\"k-grid-norecords\">\n <td [attr.colspan]=\"colSpan\">\n <ng-template\n [ngIf]=\"noRecordsTemplate?.templateRef\"\n [templateContext]=\"{\n templateRef: noRecordsTemplate?.templateRef\n }\">\n </ng-template>\n <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n {{noRecordsText}}\n </ng-container>\n </td>\n </tr>\n <ng-template ngFor\n [ngForOf]=\"data\"\n [ngForTrackBy]=\"trackByWrapper\"\n let-item\n let-rowIndex=\"index\">\n <tr *ngIf=\"isGroup(item) && isParentGroupExpanded(item) && showGroupHeader(item)\"\n kendoGridGroupHeader\n [columns]=\"columns\"\n [groups]=\"groups\"\n [item]=\"item\"\n [hasDetails]=\"detailTemplate?.templateRef\"\n [skipGroupDecoration]=\"skipGroupDecoration\"\n [hasGroupHeaderColumn]=\"hasGroupHeaderColumn\"\n [groupHeaderColumns]=\"groupHeaderColumns\"\n [rowIndex]=\"rowIndex + 1\"\n [totalColumnsCount]=\"totalColumnsCount\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"groupHeaderSlaveCellsCount\">\n </tr>\n <tr\n *ngIf=\"isDataItem(item) && (!item.group || isDataItemInExpandedGroup(item))\"\n kendoGridLogicalRow\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n [class.k-grid-row-sticky]=\"rowSticky ? rowSticky({ dataItem: item.data, index: item.index }) : false\"\n [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n [class.k-alt]=\"isOdd(item)\"\n [class.k-master-row]=\"detailTemplate?.templateRef\"\n [class.k-grid-edit-row]=\"isEditingRow(item.index)\"\n [attr.data-kendo-grid-item-index]=\"item.index\"\n [class.k-state-selected]=\"isSelectable() && isRowSelected(item)\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\" role=\"presentation\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"0\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [detailExpandCell]=\"true\"\n aria-selected=\"false\"\n >\n <a class=\"k-icon\"\n *ngIf=\"detailTemplate.showIf(item.data, item.index)\"\n [ngClass]=\"detailButtonStyles(item)\"\n [attr.title]=\"detailButtonTitle(item)\"\n [attr.aria-label]=\"detailButtonTitle(item)\"\n href=\"#\" tabindex=\"-1\" (click)=\"toggleRow(item.index, item.data)\"></a>\n </td>\n <td\n kendoGridCell\n [rowIndex]=\"item.index\"\n [columnIndex]=\"lockedColumnsCount + columnIndex\"\n [attr.data-kendo-grid-column-index]=\"lockedColumnsCount + columnIndex\"\n [column]=\"column\"\n [dataItem]=\"item.data\"\n [isLoading]=\"isLoading\"\n [isVirtual]=\"isVirtual\"\n [loadingTemplate]=\"loadingTemplate\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [colIndex]=\"columnIndex\"\n [colSpan]=\"column.colspan\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isSelectable() ? isAriaSelected(item, column) : undefined\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [class.k-touch-action-none]=\"isSelectable() && $any(selectable).drag\"\n [class.k-touch-action-auto]=\"!(isSelectable() && $any(selectable).drag)\"\n [ngClass]=\"column.cssClass\"\n [class.k-grid-edit-cell]=\"isEditingCell(item.index, column)\"\n [ngStyle]=\"column.sticky ? addStickyColumnStyles(column) : column.style\"\n [attr.colspan]=\"column.colspan\"\n [class.k-state-selected]=\"isSelectable && cellSelectionService.isCellSelected(item, column)\"\n *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n </td>\n </tr>\n <tr *ngIf=\"isDataItem(item) &&\n (!item.group || isDataItemInExpandedGroup(item)) &&\n detailTemplate?.templateRef &&\n detailTemplate.showIf(item.data, item.index) &&\n isExpanded(item)\"\n class=\"k-detail-row\"\n [class.k-alt]=\"isOdd(item)\"\n kendoGridLogicalRow\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [logicalRowIndex]=\"logicalRowIndex(rowIndex) + 1\"\n [logicalSlaveRow]=\"false\"\n [logicalCellsCount]=\"1\"\n >\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\"></td>\n <td class=\"k-hierarchy-cell\"></td>\n <td class=\"k-detail-cell\"\n [attr.colspan]=\"columnsSpan\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex) + 1\"\n [logicalColIndex]=\"0\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [colIndex]=\"0\"\n [colSpan]=\"allColumnsSpan + 1\"\n role=\"gridcell\" aria-selected=\"false\"\n >\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n dataItem: item.data,\n rowIndex: item.index,\n $implicit: item.data\n }\">\n </ng-template>\n </td>\n </tr>\n <tr *ngIf=\"isFooter(item) &&\n item.group &&\n (isFooterItemInExpandedGroup(item) || (showGroupFooters && isParentGroupExpanded(item.group))) &&\n !item.data.hideFooter\"\n class=\"k-group-footer\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </td>\n <td kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [attr.data-skip]=\"skipGroupDecoration\"\n *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n <ng-template\n [templateContext]=\"{\n templateRef: column.groupFooterTemplateRef,\n group: item.data,\n field: column.field,\n column: column,\n aggregates: item.data?.aggregates,\n $implicit: item.data?.aggregates\n }\">\n </ng-template>\n </td>\n </tr>\n </ng-template>\n <kendo-resize-sensor *ngIf=\"rowSticky\" (resize)=\"resizeHandler()\"></kendo-resize-sensor>\n "
490
+ template: "\n <ng-template [ngIf]=\"editService.hasNewItem\">\n <tr class=\"k-grid-add-row k-grid-edit-row\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\" role=\"presentation\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </td>\n <td *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\"\n kendoGridCell\n [rowIndex]=\"-1\"\n [columnIndex]=\"lockedColumnsCount + columnIndex\"\n [isNew]=\"true\"\n [column]=\"column\"\n [dataItem]=\"newDataItem\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [ngClass]=\"column.cssClass\"\n [style.left]=\"column.sticky ? '0' : undefined\"\n [ngStyle]=\"column.sticky ? addStickyColumnStyles(column) : column.style\"\n [attr.colspan]=\"column.colspan\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"addRowLogicalIndex()\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [colSpan]=\"column.colspan\"\n role=\"gridcell\">\n </td>\n </tr>\n </ng-template>\n <tr *ngIf=\"data?.length === 0 || data == null\" class=\"k-grid-norecords\">\n <td [attr.colspan]=\"colSpan\">\n <ng-template\n [ngIf]=\"noRecordsTemplate?.templateRef\"\n [templateContext]=\"{\n templateRef: noRecordsTemplate?.templateRef\n }\">\n </ng-template>\n <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n {{noRecordsText}}\n </ng-container>\n </td>\n </tr>\n\n <ng-template ngFor\n [ngForOf]=\"data\"\n [ngForTrackBy]=\"trackByWrapper\"\n let-item\n let-rowIndex=\"index\">\n <tr *ngIf=\"isGroup(item) && isParentGroupExpanded(item) && showGroupHeader(item)\"\n kendoGridGroupHeader\n [columns]=\"columns\"\n [groups]=\"groups\"\n [item]=\"item\"\n [hasDetails]=\"detailTemplate?.templateRef\"\n [skipGroupDecoration]=\"skipGroupDecoration\"\n [hasGroupHeaderColumn]=\"hasGroupHeaderColumn\"\n [groupHeaderColumns]=\"groupHeaderColumns\"\n [rowIndex]=\"rowIndex + 1\"\n [totalColumnsCount]=\"totalColumnsCount\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"groupHeaderSlaveCellsCount\">\n </tr>\n <tr\n *ngIf=\"isDataItem(item) && (!item.group || isDataItemInExpandedGroup(item))\"\n kendoGridLogicalRow\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n [class.k-grid-row-sticky]=\"rowSticky ? rowSticky({ dataItem: item.data, index: item.index }) : false\"\n [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n [class.k-alt]=\"isOdd(item)\"\n [class.k-master-row]=\"detailTemplate?.templateRef\"\n [class.k-grid-edit-row]=\"isEditingRow(item.index)\"\n [attr.data-kendo-grid-item-index]=\"item.index\"\n [class.k-state-selected]=\"isSelectable() && isRowSelected(item)\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\" role=\"presentation\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"0\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [detailExpandCell]=\"true\"\n aria-selected=\"false\"\n >\n <a class=\"k-icon\"\n *ngIf=\"detailTemplate.showIf(item.data, item.index)\"\n [ngClass]=\"detailButtonStyles(item)\"\n [attr.title]=\"detailButtonTitle(item)\"\n [attr.aria-label]=\"detailButtonTitle(item)\"\n href=\"#\" tabindex=\"-1\" (click)=\"toggleRow(item.index, item.data)\"></a>\n </td>\n <td\n kendoGridCell\n [rowIndex]=\"item.index\"\n [columnIndex]=\"lockedColumnsCount + columnIndex\"\n [attr.data-kendo-grid-column-index]=\"lockedColumnsCount + columnIndex\"\n [column]=\"column\"\n [dataItem]=\"item.data\"\n [isLoading]=\"isLoading\"\n [isVirtual]=\"isVirtual\"\n [loadingTemplate]=\"cellLoadingTemplate\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [colIndex]=\"columnIndex\"\n [colSpan]=\"column.colspan\"\n role=\"gridcell\"\n [attr.aria-selected]=\"isSelectable() ? isAriaSelected(item, column) : undefined\"\n [class.k-grid-content-sticky]=\"column.sticky\"\n [class.k-touch-action-none]=\"isSelectable() && $any(selectable).drag\"\n [class.k-touch-action-auto]=\"!(isSelectable() && $any(selectable).drag)\"\n [ngClass]=\"column.cssClass\"\n [class.k-grid-edit-cell]=\"isEditingCell(item.index, column)\"\n [ngStyle]=\"column.sticky ? addStickyColumnStyles(column) : column.style\"\n [attr.colspan]=\"column.colspan\"\n [class.k-state-selected]=\"isSelectable && cellSelectionService.isCellSelected(item, column)\"\n *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n </td>\n </tr>\n <tr *ngIf=\"isDataItem(item) &&\n (!item.group || isDataItemInExpandedGroup(item)) &&\n detailTemplate?.templateRef &&\n detailTemplate.showIf(item.data, item.index) &&\n isExpanded(item)\"\n class=\"k-detail-row\"\n [class.k-alt]=\"isOdd(item)\"\n kendoGridLogicalRow\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [logicalRowIndex]=\"logicalRowIndex(rowIndex) + 1\"\n [logicalSlaveRow]=\"false\"\n [logicalCellsCount]=\"1\"\n >\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\"></td>\n <td class=\"k-hierarchy-cell\"></td>\n <td class=\"k-detail-cell\"\n [attr.colspan]=\"columnsSpan\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex) + 1\"\n [logicalColIndex]=\"0\"\n [dataRowIndex]=\"item.index\"\n [dataItem]=\"item.data\"\n [colIndex]=\"0\"\n [colSpan]=\"allColumnsSpan + 1\"\n role=\"gridcell\" aria-selected=\"false\"\n >\n <ng-template\n [ngTemplateOutlet]=\"detailTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{\n dataItem: item.data,\n rowIndex: item.index,\n $implicit: item.data\n }\">\n </ng-template>\n </td>\n </tr>\n <tr *ngIf=\"isFooter(item) &&\n item.group &&\n (isFooterItemInExpandedGroup(item) || (showGroupFooters && isParentGroupExpanded(item.group))) &&\n !item.data.hideFooter\"\n class=\"k-group-footer\"\n kendoGridLogicalRow\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n [logicalCellsCount]=\"columns.length\"\n [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n <ng-template [ngIf]=\"!skipGroupDecoration\">\n <td class=\"k-group-cell\" *ngFor=\"let g of groups\"></td>\n </ng-template>\n <td class=\"k-hierarchy-cell\"\n *ngIf=\"detailTemplate?.templateRef\"\n kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"0\"\n aria-selected=\"false\"\n >\n </td>\n <td kendoGridLogicalCell\n [logicalRowIndex]=\"logicalRowIndex(rowIndex)\"\n [logicalColIndex]=\"logicalColIndex(column)\"\n [attr.data-skip]=\"skipGroupDecoration\"\n *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n <ng-template\n [templateContext]=\"{\n templateRef: column.groupFooterTemplateRef,\n group: item.data,\n field: column.field,\n column: column,\n aggregates: item.data?.aggregates,\n $implicit: item.data?.aggregates\n }\">\n </ng-template>\n </td>\n </tr>\n </ng-template>\n <kendo-resize-sensor *ngIf=\"rowSticky\" (resize)=\"resizeHandler()\"></kendo-resize-sensor>\n "
491
491
  }),
492
492
  tslib_1.__metadata("design:paramtypes", [details_service_1.DetailsService,
493
493
  groups_service_1.GroupsService,