@progress/kendo-angular-treelist 11.0.0-develop.81 → 11.0.0-develop.83

package/esm2020/treelist.component.mjs

@@ -390,6 +390,7 @@ export class TreeListComponent {
          * A query list of all declared columns.
          */
         this.columns = new QueryList();
+        this.hostClasses = true;
         this.footer = new QueryList();
         this.columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
             if (!isUniversal()) {
@@ -685,9 +686,6 @@ export class TreeListComponent {
     get dir() {
         return this.direction;
     }
-    get hostClasses() {
-        return true;
-    }
     get lockedClasses() {
         return this.lockedLeafColumns.length > 0;
     }
@@ -1881,7 +1879,7 @@ export class TreeListComponent {
     }
 }
 TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeListComponent, deps: [{ token: i1.BrowserSupportService }, { token: i0.ElementRef }, { token: i2.ChangeNotificationService }, { token: i3.EditService }, { token: i4.FilterService }, { token: i5.PDFService }, { token: i6.ResponsiveService }, { token: i0.Renderer2 }, { token: i7.ExcelService }, { token: i0.NgZone }, { token: i8.ScrollSyncService }, { token: i9.DomEventsService }, { token: i10.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i11.ColumnReorderService }, { token: i12.ColumnInfoService }, { token: i13.NavigationService }, { token: i14.SortService }, { token: i15.ScrollRequestService }, { token: i16.ExpandStateService }, { token: i17.OptionChangesService }, { token: i18.SelectionService }, { token: i19.LocalizationService }, { token: i20.ContextService }], target: i0.ɵɵFactoryTarget.Component });
-TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange" }, host: { properties: { "attr.dir": "this.dir", "class.k-widget": "this.hostClasses", "class.k-grid": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -2072,140 +2070,152 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
+
+            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            selectPage="Select page"
          >
         </ng-container>
-        <kendo-treelist-toolbar *ngIf="showTopToolbar" position="top"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showTopToolbar"
+            position="top" 
+            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel"
-            >
-        <ng-template [ngIf]="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                    [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
-                        <colgroup kendoTreeListColGroup
-                            role="presentation"
-                            [columns]="$any(lockedLeafColumns)">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length">
-                        </thead>
-                    </table>
-                </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table role="presentation" [style.width.px]="nonLockedWidth" [virtualColumns]="virtualColumns">
-                        <colgroup kendoTreeListColGroup
+            [attr.aria-label]="ariaLabel">
+            <ng-template [ngIf]="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                        [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                         #lockedHeader
+                         role="presentation"
+                         class="k-grid-header-locked"
+                         [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="headerLeafColumns">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
+                            [style.width.px]="lockedWidth"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="$any(lockedLeafColumns)">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="headerLeafColumns">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                role="presentation"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-treelist-list
-                [view]="view"
-                [loading]="showLoading"
-                [rowHeight]="rowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [filterable]="filterable"
-                [noRecordsTemplate]="noRecordsTemplate"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [isVirtual]="isVirtual"
-                [virtualColumns]="virtualColumns"
-                [expandIcons]="expandIcons"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-
-                kendoDraggable
-                kendoTreeListSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                >
-            </kendo-treelist-list>
-        </ng-template>
-        <ng-template [ngIf]="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
-                <colgroup kendoTreeListColGroup
-                    [columns]="$any(leafColumns)">
-                </colgroup>
-                <thead kendoTreeListHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate">
-                </thead>
-                <tbody kendoTreeListTableBody
+                <kendo-treelist-list
                     [view]="view"
+                    [loading]="showLoading"
+                    [rowHeight]="rowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [filterable]="filterable"
                     [noRecordsTemplate]="noRecordsTemplate"
-                    [trackBy]="trackBy"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [isVirtual]="isVirtual"
+                    [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
-
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"   
                     kendoDraggable
                     kendoTreeListSelectionMarquee
-                    [enableDrag]="marqueeSelection"
-                    >
-                </tbody>
-            </table>
-            <div *ngIf="showLoading" kendoTreeListLoading>
-            </div>
-        </ng-template>
+                    [enableDrag]="marqueeSelection">
+                </kendo-treelist-list>
+            </ng-template>
+            <ng-template [ngIf]="!isScrollable">
+                <table 
+                    class="k-table k-table-md k-grid-header-table"
+                    [style.table-layout]="resizable ? 'fixed' : null">
+                    <colgroup kendoTreeListColGroup
+                        [columns]="$any(leafColumns)">
+                    </colgroup>
+                    <thead kendoTreeListHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate">
+                    </thead>
+                    <tbody kendoTreeListTableBody
+                        [view]="view"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        [expandIcons]="expandIcons"
+                        kendoDraggable
+                        kendoTreeListSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                </table>
+                <div *ngIf="showLoading" kendoTreeListLoading>
+                </div>
+            </ng-template>
         </div>
         <kendo-treelist-pager
             *ngIf="showPager"
@@ -2217,7 +2227,10 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
-        <kendo-treelist-toolbar *ngIf="showBottomToolbar" position="bottom"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showBottomToolbar"
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
+            position="bottom"></kendo-treelist-toolbar>
     `, isInline: true, components: [{ type: i21.ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position"] }, { type: i22.ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: i23.HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: i24.ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i25.TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: i26.LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: i27.PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: i28.LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i29.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i30.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i31.ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i32.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i33.MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
@@ -2418,140 +2431,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
             i18n-columnsReset="kendo.treelist.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
+
+            i18n-selectPage="kendo.treelist.selectPage|The text of the title and aria-label attributes applied to the page chooser in the TreeList Pager"
+            selectPage="Select page"
          >
         </ng-container>
-        <kendo-treelist-toolbar *ngIf="showTopToolbar" position="top"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showTopToolbar"
+            position="top" 
+            class="k-toolbar k-grid-toolbar k-toolbar-md"></kendo-treelist-toolbar>
         <div #ariaRoot
             class="k-grid-aria-root"
             role="treegrid"
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel"
-            >
-        <ng-template [ngIf]="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                    [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table [locked]="true" role="presentation" [style.width.px]="lockedWidth">
-                        <colgroup kendoTreeListColGroup
+            [attr.aria-label]="ariaLabel">
+            <ng-template [ngIf]="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                        [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                         #lockedHeader
+                         role="presentation"
+                         class="k-grid-header-locked"
+                         [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length">
-                        </thead>
-                    </table>
-                </div><div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table role="presentation" [style.width.px]="nonLockedWidth" [virtualColumns]="virtualColumns">
-                        <colgroup kendoTreeListColGroup
-                            role="presentation"
-                            [columns]="headerLeafColumns">
-                        </colgroup>
-                        <thead kendoTreeListHeader
-                            [resizable]="resizable"
+                            [style.width.px]="lockedWidth"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="$any(lockedLeafColumns)">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoTreeListResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            class="k-grid-header-table k-table k-table-md">
+                            <colgroup kendoTreeListColGroup
+                                role="presentation"
+                                [columns]="headerLeafColumns">
+                            </colgroup>
+                            <thead kendoTreeListHeader
+                                [resizable]="resizable"
+                                role="presentation"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-treelist-list
-                [view]="view"
-                [loading]="showLoading"
-                [rowHeight]="rowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [filterable]="filterable"
-                [noRecordsTemplate]="noRecordsTemplate"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [isVirtual]="isVirtual"
-                [virtualColumns]="virtualColumns"
-                [expandIcons]="expandIcons"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-
-                kendoDraggable
-                kendoTreeListSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                >
-            </kendo-treelist-list>
-        </ng-template>
-        <ng-template [ngIf]="!isScrollable">
-            <table [style.table-layout]="resizable ? 'fixed' : null">
-                <colgroup kendoTreeListColGroup
-                    [columns]="$any(leafColumns)">
-                </colgroup>
-                <thead kendoTreeListHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate">
-                </thead>
-                <tbody kendoTreeListTableBody
+                <kendo-treelist-list
                     [view]="view"
+                    [loading]="showLoading"
+                    [rowHeight]="rowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [filterable]="filterable"
                     [noRecordsTemplate]="noRecordsTemplate"
-                    [trackBy]="trackBy"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [isVirtual]="isVirtual"
+                    [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
-
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"   
                     kendoDraggable
                     kendoTreeListSelectionMarquee
-                    [enableDrag]="marqueeSelection"
-                    >
-                </tbody>
-            </table>
-            <div *ngIf="showLoading" kendoTreeListLoading>
-            </div>
-        </ng-template>
+                    [enableDrag]="marqueeSelection">
+                </kendo-treelist-list>
+            </ng-template>
+            <ng-template [ngIf]="!isScrollable">
+                <table 
+                    class="k-table k-table-md k-grid-header-table"
+                    [style.table-layout]="resizable ? 'fixed' : null">
+                    <colgroup kendoTreeListColGroup
+                        [columns]="$any(leafColumns)">
+                    </colgroup>
+                    <thead kendoTreeListHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate">
+                    </thead>
+                    <tbody kendoTreeListTableBody
+                        [view]="view"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        [expandIcons]="expandIcons"
+                        kendoDraggable
+                        kendoTreeListSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                </table>
+                <div *ngIf="showLoading" kendoTreeListLoading>
+                </div>
+            </ng-template>
         </div>
         <kendo-treelist-pager
             *ngIf="showPager"
@@ -2563,7 +2588,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [options]="pageable"
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-treelist-pager>
-        <kendo-treelist-toolbar *ngIf="showBottomToolbar" position="bottom"></kendo-treelist-toolbar>
+        <kendo-treelist-toolbar
+            *ngIf="showBottomToolbar"
+            class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom k-toolbar-md"
+            position="bottom"></kendo-treelist-toolbar>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i0.ElementRef }, { type: i2.ChangeNotificationService }, { type: i3.EditService }, { type: i4.FilterService }, { type: i5.PDFService }, { type: i6.ResponsiveService }, { type: i0.Renderer2 }, { type: i7.ExcelService }, { type: i0.NgZone }, { type: i8.ScrollSyncService }, { type: i9.DomEventsService }, { type: i10.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i11.ColumnReorderService }, { type: i12.ColumnInfoService }, { type: i13.NavigationService }, { type: i14.SortService }, { type: i15.ScrollRequestService }, { type: i16.ExpandStateService }, { type: i17.OptionChangesService }, { type: i18.SelectionService }, { type: i19.LocalizationService }, { type: i20.ContextService }]; }, propDecorators: { ariaLabel: [{
@@ -2678,10 +2706,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['attr.dir']
             }], hostClasses: [{
                 type: HostBinding,
-                args: ['class.k-widget']
+                args: ['class.k-grid']
             }, {
                 type: HostBinding,
-                args: ['class.k-grid']
+                args: ['class.k-grid-md']
             }, {
                 type: HostBinding,
                 args: ['class.k-treelist']