@progress/kendo-angular-treelist 3.1.5-dev.202112091351 → 4.0.0-dev.202201191257

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

@@ -213,7 +213,7 @@ var CellComponent = /** @class */ (function () {
     CellComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoTreeListCell]',
-            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input type=\"checkbox\" kendoTreeListFocusable class=\"k-checkbox\" [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
+            template: "\n        <ng-container [ngSwitch]=\"isEdited\">\n            <ng-container *ngSwitchCase=\"false\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of level | levelItems : hasChildren && expandIcons\"></span>\n                    <span class=\"k-icon\" *ngIf=\"hasChildren && expandIcons\"\n                        [ngClass]=\"{ 'k-i-collapse': isExpanded && !loading, 'k-i-expand': !isExpanded && !loading, 'k-i-loading': loading }\">\n                    </span>\n                </ng-container>\n                <ng-container *ngIf=\"column.templateRef\"\n                    [ngTemplateOutlet]=\"column.templateRef\"\n                    [ngTemplateOutletContext]=\"templateContext\">\n                </ng-container>\n                <ng-container *ngIf=\"isSpanColumn\">\n                    <ng-container *ngFor=\"let childColumn of childColumns\">\n                        {{ dataItem | valueOf: childColumn.field: childColumn.format}}\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"isBoundColumn\">{{ dataItem | valueOf: column.field: column.format}}</ng-container>\n                <ng-template [ngIf]=\"column.isCheckboxColumn && !isNew\">\n                    <input\n                        type=\"checkbox\"\n                        kendoTreeListFocusable\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [checked]=\"selected\" />\n                </ng-template>\n            </ng-container>\n            <ng-container *ngSwitchCase=\"true\">\n                <ng-container\n                    *ngIf=\"column.editTemplateRef\"\n                    [ngTemplateOutlet]=\"column.editTemplateRef\"\n                    [ngTemplateOutletContext]=\"editTemplateContext\">\n                </ng-container>\n                <ng-container [ngSwitch]=\"column.editor\" *ngIf=\"!column.editTemplateRef\">\n                    <kendo-numerictextbox\n                        *ngSwitchCase=\"'numeric'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-numerictextbox>\n\n                    <kendo-datepicker\n                        *ngSwitchCase=\"'date'\"\n                        [format]=\"format\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    ></kendo-datepicker>\n\n                    <input\n                        *ngSwitchCase=\"'boolean'\"\n                        type=\"checkbox\"\n                        class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n\n                    <input\n                        *ngSwitchDefault\n                        type=\"text\"\n                        class=\"k-textbox k-input k-rounded-md\"\n                        [formControl]=\"formGroup.get(column.field)\"\n                        kendoTreeListFocusable\n                    />\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [edit_service_1.EditService,
             focus_group_1.FocusGroup])

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

@@ -18,6 +18,8 @@ var core_1 = require("@angular/core");
  * * `column`—Defines an instance of the [`ColumnComponent`]({% slug api_treelist_columncomponent %}) option.
  * * `columnIndex`—Defines the current column index.
  * * `field`—The name of the column field, if set.
+ * * `items`—The data items on this level.
+ * * `parentItem`—The parent data item; `null` for root level items.
  *
  *
  * {% meta height:500 %}

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

@@ -499,7 +499,7 @@ var HeaderComponent = /** @class */ (function () {
     HeaderComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoTreeListHeader]',
-            template: "\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-treelist-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\">\n                        </kendo-treelist-filter-menu>\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <a #link href=\"#\" tabindex=\"-1\" class=\"k-link\" (click)=\"sortColumn(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </a>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-treelist-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\">\n                            </kendo-treelist-filter-menu>\n                            <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\">\n                            </kendo-treelist-column-menu>\n                        </span>\n                    </ng-template>\n                    <ng-container *ngIf=\"renderSelectAll(column)\">\n                        <input type=\"checkbox\" class=\"k-checkbox\" kendoTreeListFocusable\n                              (click)=\"selectAllClick($event)\" />\n                    </ng-container>\n                    <span kendoTreeListColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoTreeListColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoTreeListFilterRow\n            [columns]=\"leafColumns\"\n            [filter]=\"filter\"\n            [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoTreeListLogicalRow\n            [logicalRowIndex]=\"totalColumnLevels + 1\"\n            [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n            [logicalCellsCount]=\"columns.length\"\n            [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        >\n        </tr>\n    "
+            template: "\n        <tr *ngFor=\"let i of columnLevels; let levelIndex = index\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"levelIndex\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n            <ng-template ngFor let-column [ngForOf]=\"columnsForLevel(levelIndex)\" [ngForTrackBy]=\"trackByIndex\" let-columnIndex=\"index\" let-last=\"last\">\n                <th *ngIf=\"!isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [colSpan]=\"column.colspan\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    role=\"columnheader\"\n                    aria-selected=\"false\"\n                    [attr.aria-sort]=\"sortState(column)\"\n                    (keydown)=\"onHeaderKeydown(column, $event)\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        field: column.field,\n                        type: 'column',\n                        column: column,\n                        hint: column.title || column.field,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-filterable]=\"(showFilterMenu && isFilterable(column)) || showColumnMenu(column)\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                    <ng-template [ngIf]=\"!isSortable(column)\">\n                        <kendo-treelist-filter-menu\n                            *ngIf=\"showFilterMenu && isFilterable(column)\"\n                            [column]=\"column\"\n                            [filter]=\"filter\">\n                        </kendo-treelist-filter-menu>\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\"\n                            [sort]=\"sort\"\n                            [filter]=\"filter\"\n                            [sortable]=\"sortable\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: column.leafIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                    </ng-template>\n                    <ng-template [ngIf]=\"isSortable(column)\">\n                        <span class=\"k-cell-inner\">\n                            <a #link href=\"#\" tabindex=\"-1\" class=\"k-link\" (click)=\"sortColumn(column, $event, link)\">\n                                <ng-template\n                                    [templateContext]=\"{\n                                        templateRef: column.headerTemplateRef,\n                                        columnIndex: column.leafIndex,\n                                        column: column,\n                                        $implicit: column\n                                    }\">\n                                </ng-template>\n                                <ng-template [ngIf]=\"!column.headerTemplateRef\">\n                                    <span class=\"k-column-title\">{{column.displayTitle}}</span>\n                                </ng-template>\n                                <span [attr.aria-label]=\"sortableLabel\" [ngClass]=\"sortIcon(column.field)\"></span>\n                                <span *ngIf=\"showSortNumbering(column)\" class=\"k-sort-order\">{{sortOrder(column.field)}}</span>\n                            </a>\n                            <span role=\"status\"\n                                class=\"k-sort-status\"\n                                style=\"position: absolute; left: -10000px;\"\n                                [innerHtml]=\"sortStatus(column)\">\n                            </span>\n                            <kendo-treelist-filter-menu\n                                *ngIf=\"showFilterMenu && isFilterable(column)\"\n                                [column]=\"column\"\n                                [filter]=\"filter\">\n                            </kendo-treelist-filter-menu>\n                            <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                                [standalone]=\"false\"\n                                [settings]=\"columnMenu\"\n                                [column]=\"column\"\n                                [columnMenuTemplate]=\"columnMenuTemplate\"\n                                [sort]=\"sort\"\n                                [filter]=\"filter\"\n                                [sortable]=\"sortable\">\n                            </kendo-treelist-column-menu>\n                        </span>\n                    </ng-template>\n                    <ng-container *ngIf=\"renderSelectAll(column)\">\n                        <input\n                            type=\"checkbox\"\n                            class=\"k-checkbox k-checkbox-md k-rounded-md\"\n                            kendoTreeListFocusable\n                            (click)=\"selectAllClick($event)\" />\n                    </ng-container>\n                    <span kendoTreeListColumnHandle\n                        kendoDraggable\n                        class=\"k-column-resizer\"\n                        *ngIf=\"resizable\"\n                        [column]=\"column\"\n                        [columns]=\"columns\">\n                    </span>\n                </th>\n                <th *ngIf=\"isColumnGroupComponent(column)\"\n                    kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"levelIndex\"\n                    [logicalColIndex]=\"logicalColumnIndex(column)\"\n                    [rowSpan]=\"column.rowspan(totalColumnLevels)\"\n                    [colSpan]=\"column.colspan\"\n                    kendoDropTarget\n                    kendoDraggable\n                    kendoDraggableColumn\n                    [enableDrag]=\"shouldActivate(column)\"\n                    [context]=\"{\n                        type: 'columnGroup',\n                        column: column,\n                        hint: column.title,\n                        lastColumn: last && columnIndex === 0\n                    }\"\n                    class=\"k-header\"\n                    [class.k-first]=\"isFirstOnRow(column, columnIndex)\"\n                    [class.k-filterable]=\"showColumnMenu(column)\"\n                    [ngClass]=\"column.headerClass\"\n                    [ngStyle]=\"column.headerStyle\"\n                    [attr.rowspan]=\"column.rowspan(totalColumnLevels)\"\n                    [attr.colspan]=\"column.colspan\">\n                        <kendo-treelist-column-menu *ngIf=\"showColumnMenu(column)\"\n                            [standalone]=\"false\"\n                            [settings]=\"columnMenu\"\n                            [column]=\"column\"\n                            [columnMenuTemplate]=\"columnMenuTemplate\">\n                        </kendo-treelist-column-menu>\n                        <ng-template\n                            [templateContext]=\"{\n                                templateRef: column.headerTemplateRef,\n                                columnIndex: lockedColumnsCount + columnIndex,\n                                column: column,\n                                $implicit: column\n                            }\">\n                        </ng-template>\n                        <ng-template [ngIf]=\"!column.headerTemplateRef\">{{column.displayTitle}}</ng-template>\n                        <span kendoTreeListColumnHandle\n                            kendoDraggable\n                            class=\"k-column-resizer\"\n                            *ngIf=\"resizable\"\n                            [column]=\"column\"\n                            [columns]=\"columns\">\n                        </span>\n                </th>\n            </ng-template>\n        </tr>\n        <tr *ngIf=\"showFilterRow\"\n            kendoTreeListFilterRow\n            [columns]=\"leafColumns\"\n            [filter]=\"filter\"\n            [lockedColumnsCount]=\"lockedColumnsCount\"\n            kendoTreeListLogicalRow\n            [logicalRowIndex]=\"totalColumnLevels + 1\"\n            [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n            [logicalCellsCount]=\"columns.length\"\n            [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n        >\n        </tr>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [single_popup_service_1.SinglePopupService,
             drag_hint_service_1.DragHintService,

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

@@ -386,7 +386,7 @@ var TableBodyComponent = /** @class */ (function () {
     TableBodyComponent = tslib_1.__decorate([
         core_1.Component({
             selector: '[kendoTreeListTableBody]',
-            template: "\n    <tr *ngIf=\"!view || view.data?.length === 0 || view.data == null\" class=\"k-grid-norecords\">\n        <td [attr.colspan]=\"colSpan\">\n            <ng-container *ngIf=\"noRecordsTemplate?.templateRef\" [ngTemplateOutlet]=\"noRecordsTemplate.templateRef\">\n            </ng-container>\n            <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n                {{noRecordsText}}\n            </ng-container>\n        </td>\n    </tr>\n    <ng-container *ngFor=\"let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;\">\n        <tr *ngIf=\"item.type === 'data'\"\n            kendoTreeListLogicalRow\n                [dataRowIndex]=\"item.index\"\n                [dataItem]=\"item.data\"\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n                [isNew]=\"item.isNew\"\n            [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n            [class.k-alt]=\"isOdd(item)\"\n            [class.k-grid-edit-row]=\"isEditingRow(item)\"\n            [class.k-grid-add-row]=\"item.isNew\"\n            [class.k-state-selected]=\"item.selected\"\n            [attr.data-treelist-view-index]=\"rowIndex\">\n\n            <td kendoTreeListCell\n                    [columnIndex]=\"lockedColumnsCount + columnIndex\"\n                    [column]=\"column\"\n                    [viewItem]=\"item\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [hasChildren]=\"item.hasChildren\"\n                    [isExpanded]=\"item.expanded\"\n                    [loading]=\"item.loading\"\n                    [isNew]=\"item.isNew\"\n                    [selected]=\"item.selected\"\n                    [expandIcons]=\"expandIcons\"\n                kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [dataRowIndex]=\"item.index\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                    [colSpan]=\"column.colspan\"\n                    [expandable]=\"column.expandable\"\n                    role=\"gridcell\"\n                    [attr.aria-expanded]=\"ariaExpanded(item, column)\"\n                    [attr.aria-selected]=\"ariaSelected(item, column, lockedColumnsCount + columnIndex)\"\n                [ngClass]=\"column.cssClass\"\n                [class.k-grid-edit-cell]=\"isEditingCell(item, column)\"\n                [class.k-state-selected]=\"isCellSelected(item.data, column, lockedColumnsCount + columnIndex)\"\n                [ngStyle]=\"column.style\"\n                [attr.colspan]=\"column.colspan\"\n                *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n            </td>\n        </tr>\n        <tr *ngIf=\"item.type === 'footer' && hasFooter\"\n            class=\"k-footer\"\n            [attr.data-treelist-view-index]=\"rowIndex\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n\n            <td kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                [ngClass]=\"column.footerClass\"\n                [ngStyle]=\"column.footerStyle\"\n                *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of item.level | levelItems\"></span>\n                </ng-container>\n                <ng-container [ngTemplateOutlet]=\"column.footerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        items: item.items,\n                        field: column.field,\n                        column: column,\n                        columnIndex: columnIndex,\n                        aggregates: item.aggregates,\n                        $implicit: item.aggregates\n                    }\">\n                </ng-container>\n           </td>\n        </tr>\n    </ng-container>\n    "
+            template: "\n    <tr *ngIf=\"!view || view.data?.length === 0 || view.data == null\" class=\"k-grid-norecords\">\n        <td [attr.colspan]=\"colSpan\">\n            <ng-container *ngIf=\"noRecordsTemplate?.templateRef\" [ngTemplateOutlet]=\"noRecordsTemplate.templateRef\">\n            </ng-container>\n            <ng-container *ngIf=\"!noRecordsTemplate?.templateRef\">\n                {{noRecordsText}}\n            </ng-container>\n        </td>\n    </tr>\n    <ng-container *ngFor=\"let item of view?.data;let rowIndex = index;trackBy: trackByWrapper;\">\n        <tr *ngIf=\"item.type === 'data'\"\n            kendoTreeListLogicalRow\n                [dataRowIndex]=\"item.index\"\n                [dataItem]=\"item.data\"\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\"\n                [isNew]=\"item.isNew\"\n            [ngClass]=\"rowClass({ dataItem: item.data, index: item.index })\"\n            [class.k-alt]=\"isOdd(item)\"\n            [class.k-grid-edit-row]=\"isEditingRow(item)\"\n            [class.k-grid-add-row]=\"item.isNew\"\n            [class.k-selected]=\"item.selected\"\n            [attr.data-treelist-view-index]=\"rowIndex\">\n\n            <td kendoTreeListCell\n                    [columnIndex]=\"lockedColumnsCount + columnIndex\"\n                    [column]=\"column\"\n                    [viewItem]=\"item\"\n                    [dataItem]=\"item.data\"\n                    [level]=\"item.level\"\n                    [hasChildren]=\"item.hasChildren\"\n                    [isExpanded]=\"item.expanded\"\n                    [loading]=\"item.loading\"\n                    [isNew]=\"item.isNew\"\n                    [selected]=\"item.selected\"\n                    [expandIcons]=\"expandIcons\"\n                kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [dataRowIndex]=\"item.index\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                    [colSpan]=\"column.colspan\"\n                    [expandable]=\"column.expandable\"\n                    role=\"gridcell\"\n                    [attr.aria-expanded]=\"ariaExpanded(item, column)\"\n                    [attr.aria-selected]=\"ariaSelected(item, column, lockedColumnsCount + columnIndex)\"\n                [ngClass]=\"column.cssClass\"\n                [class.k-grid-edit-cell]=\"isEditingCell(item, column)\"\n                [class.k-selected]=\"isCellSelected(item.data, column, lockedColumnsCount + columnIndex)\"\n                [ngStyle]=\"column.style\"\n                [attr.colspan]=\"column.colspan\"\n                *ngFor=\"let column of columns; let columnIndex = index; trackBy: trackByColumns;\">\n            </td>\n        </tr>\n        <tr *ngIf=\"item.type === 'footer' && hasFooter\"\n            class=\"k-footer\"\n            [attr.data-treelist-view-index]=\"rowIndex\"\n            kendoTreeListLogicalRow\n                [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                [logicalSlaveRow]=\"lockedColumnsCount > 0\"\n                [logicalCellsCount]=\"columns.length\"\n                [logicalSlaveCellsCount]=\"unlockedColumnsCount\">\n\n            <td kendoTreeListLogicalCell\n                    [logicalRowIndex]=\"logicalRowIndex(item.rowIndex)\"\n                    [logicalColIndex]=\"logicalColIndex(column)\"\n                    [column]=\"column\"\n                    [colIndex]=\"columnIndex\"\n                [ngClass]=\"column.footerClass\"\n                [ngStyle]=\"column.footerStyle\"\n                *ngFor=\"let column of footerColumns; let columnIndex = index; trackBy: trackByColumns;\">\n                <ng-container *ngIf=\"column.expandable\">\n                    <span class=\"k-icon k-i-none\" *ngFor=\"let item of item.level | levelItems\"></span>\n                </ng-container>\n                <ng-container [ngTemplateOutlet]=\"column.footerTemplateRef\"\n                    [ngTemplateOutletContext]=\"{\n                        $implicit: item.aggregates,\n                        aggregates: item.aggregates,\n                        column: column,\n                        columnIndex: columnIndex,\n                        field: column.field,\n                        items: item.items,\n                        parentItem: item.parentItem\n                    }\">\n                </ng-container>\n           </td>\n        </tr>\n    </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [change_notification_service_1.ChangeNotificationService,
             edit_service_1.EditService,

package/dist/npm/treelist.component.js

@@ -1287,7 +1287,7 @@ var TreeListComponent = /** @class */ (function () {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button" (click)="treelist.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -1353,10 +1353,10 @@ var TreeListComponent = /** @class */ (function () {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button class="k-button" (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="treelist.autoFitColumns()">
+     *              <button kendoButton (click)="treelist.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -1540,7 +1540,7 @@ var TreeListComponent = /** @class */ (function () {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>