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

package/dist/npm/rendering/body.module.js

@@ -27,6 +27,7 @@ var group_module_1 = require("../grouping/group.module");
 var kendo_angular_inputs_1 = require("@progress/kendo-angular-inputs");
 var kendo_angular_dateinputs_1 = require("@progress/kendo-angular-dateinputs");
 var cell_loading_template_directive_1 = require("./cell-loading.template.directive");
+var loading_template_directive_1 = require("./loading-template.directive");
 var exported = [
     command_column_component_1.CommandColumnComponent,
     checkbox_column_component_1.CheckboxColumnComponent,
@@ -41,7 +42,8 @@ var exported = [
     save_command_directive_1.SaveCommandDirective,
     remove_command_directive_1.RemoveCommandDirective,
     add_command_directive_1.AddCommandDirective,
-    cell_loading_template_directive_1.CellLoadingTemplateDirective
+    cell_loading_template_directive_1.CellLoadingTemplateDirective,
+    loading_template_directive_1.LoadingTemplateDirective
 ];
 var importedModules = [
     common_1.CommonModule,
@@ -72,7 +74,8 @@ var BodyModule = /** @class */ (function () {
             save_command_directive_1.SaveCommandDirective,
             remove_command_directive_1.RemoveCommandDirective,
             add_command_directive_1.AddCommandDirective,
-            cell_loading_template_directive_1.CellLoadingTemplateDirective
+            cell_loading_template_directive_1.CellLoadingTemplateDirective,
+            loading_template_directive_1.LoadingTemplateDirective
         ];
     };
     BodyModule = tslib_1.__decorate([

package/dist/npm/rendering/common/loading.component.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var loading_template_directive_1 = require("../loading-template.directive");
 /**
  * @hidden
  */
@@ -26,10 +27,14 @@ var LoadingComponent = /** @class */ (function () {
         core_1.HostBinding('class.k-loading-mask'),
         tslib_1.__metadata("design:type", Boolean)
     ], LoadingComponent.prototype, "hostClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", loading_template_directive_1.LoadingTemplateDirective)
+    ], LoadingComponent.prototype, "loadingTemplate", void 0);
     LoadingComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoGridLoading]',
-            template: "\n        <span class=\"k-loading-text\">{{ loadingText }}</span>\n        <div class=\"k-loading-image\"></div>\n        <div class=\"k-loading-color\"></div>\n    "
+            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    "
         }),
         tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService])
     ], LoadingComponent);

package/dist/npm/rendering/list.component.js

@@ -735,6 +735,10 @@ var ListComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ListComponent.prototype, "isVirtual", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", core_1.TemplateRef)
+    ], ListComponent.prototype, "cellLoadingTemplate", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
@@ -780,7 +784,7 @@ var ListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-grid-list',
-            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    "
+            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    "
         }),
         tslib_1.__param(0, core_1.Inject(exports.SCROLLER_FACTORY_TOKEN)),
         tslib_1.__metadata("design:paramtypes", [Object, details_service_1.DetailsService,

package/dist/npm/rendering/loading-template.directive.js

@@ -0,0 +1,26 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var core_1 = require("@angular/core");
+/**
+ * Creates a loading template that overrides the default loading indicator of the Grid Component.
+ * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
+ * [see example]({% slug databinding_grid %}#toc-loading-template).
+ */
+var LoadingTemplateDirective = /** @class */ (function () {
+    function LoadingTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    LoadingTemplateDirective = tslib_1.__decorate([
+        core_1.Directive({
+            selector: '[kendoGridLoadingTemplate]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [core_1.TemplateRef])
+    ], LoadingTemplateDirective);
+    return LoadingTemplateDirective;
+}());
+exports.LoadingTemplateDirective = LoadingTemplateDirective;

package/dist/npm/rendering/table-body.component.js

@@ -451,7 +451,7 @@ var TableBodyComponent = /** @class */ (function () {
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
-    ], TableBodyComponent.prototype, "loadingTemplate", void 0);
+    ], TableBodyComponent.prototype, "cellLoadingTemplate", void 0);
     tslib_1.__decorate([
         core_1.Input(),
         tslib_1.__metadata("design:type", Boolean)
@@ -487,7 +487,7 @@ var TableBodyComponent = /** @class */ (function () {
     TableBodyComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoGridTableBody]',
-            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    "
+            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    "
         }),
         tslib_1.__metadata("design:paramtypes", [details_service_1.DetailsService,
             groups_service_1.GroupsService,