@progress/kendo-angular-grid 17.3.0-develop.1 → 18.0.0-develop.1

package/column-menu/column-list.component.d.ts

@@ -55,6 +55,7 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private updateDisabled;
     private updateColumnState;
     private setDisabledState;
+    private handleCheckBoxClick;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnListComponent, "kendo-grid-columnlist", never, { "columns": { "alias": "columns"; "required": false; }; "autoSync": { "alias": "autoSync"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; "applyText": { "alias": "applyText"; "required": false; }; "resetText": { "alias": "resetText"; "required": false; }; "actionsClass": { "alias": "actionsClass"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; }, { "reset": "reset"; "apply": "apply"; "columnChange": "columnChange"; }, never, never, true, never>;
 }

package/dragdrop/draggable-column.directive.d.ts

@@ -25,7 +25,6 @@ export declare class DraggableColumnDirective implements OnInit, OnDestroy {
     context: DragAndDropContext;
     set enableDrag(enabled: boolean);
     drag: EventEmitter<any>;
-    get hostClass(): boolean;
     private subscriptions;
     private enabled;
     constructor(draggable: DraggableDirective, element: ElementRef, zone: NgZone, service: DragAndDropService, hint: DragHintService, cue: DropCueService, nav: NavigationService, renderer: Renderer2);

package/esm2022/column-menu/column-list.component.mjs

@@ -72,33 +72,7 @@ export class ColumnListComponent {
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    const closestItem = e.target.closest('.k-column-list-item');
-                    if (closestItem) {
-                        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-                        const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
-                        const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-                        if (this.autoSync) {
-                            if (!this.columns[index]) {
-                                return;
-                            }
-                            const column = this.columns[index];
-                            const hidden = !checkbox.checkedState;
-                            if (Boolean(column.hidden) !== hidden) {
-                                this.ngZone.run(() => {
-                                    column.hidden = hidden;
-                                    this.columnChange.emit([column]);
-                                });
-                            }
-                        }
-                        else {
-                            this.updateDisabled();
-                        }
-                        if (index !== this.listNavigationService.activeIndex) {
-                            this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                            this.listNavigationService.activeIndex = index;
-                            this.listNavigationService.toggle(index, true);
-                        }
-                    }
+                    this.handleCheckBoxClick(e);
                 });
             }));
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
@@ -217,6 +191,35 @@ export class ColumnListComponent {
         this.renderer[classCommand](parentElement, 'k-disabled');
         this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
     }
+    handleCheckBoxClick = (e) => {
+        const closestItem = e.target.closest('.k-column-list-item');
+        if (closestItem) {
+            const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
+            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
+            const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
+            if (this.autoSync) {
+                if (!this.columns[index]) {
+                    return;
+                }
+                const column = this.columns[index];
+                const hidden = !checkbox.checkedState;
+                if (Boolean(column.hidden) !== hidden) {
+                    this.ngZone.run(() => {
+                        column.hidden = hidden;
+                        this.columnChange.emit([column]);
+                    });
+                }
+            }
+            else {
+                this.updateDisabled();
+            }
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
+            }
+        }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 

package/esm2022/column-menu/column-menu.component.mjs

@@ -512,7 +512,7 @@ export class ColumnMenuComponent {
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,

package/esm2022/dragdrop/draggable-column.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, EventEmitter, Host, Input, NgZone, Output, Renderer2, HostBinding } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, Host, Input, NgZone, Output, Renderer2 } from '@angular/core';
 import { Subscription, of } from 'rxjs';
 import { DraggableDirective, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { DragAndDropService } from './drag-and-drop.service';
@@ -51,9 +51,6 @@ export class DraggableColumnDirective {
         this.updateTouchAction();
     }
     drag = new EventEmitter();
-    get hostClass() {
-        return this.enabled;
-    }
     subscriptions = new Subscription();
     enabled;
     constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
@@ -121,7 +118,7 @@ export class DraggableColumnDirective {
             this.renderer.removeClass(this.element.nativeElement, 'k-touch-action-none');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.DragAndDropService }, { token: i3.DragHintService }, { token: i4.DropCueService }, { token: i5.NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, host: { properties: { "class.k-grid-draggable-header": "this.hostClass" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, decorators: [{
             type: Directive,
@@ -137,7 +134,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], drag: [{
                 type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-draggable-header']
             }] } });

package/esm2022/editing-directives/local-edit.service.mjs

@@ -24,7 +24,9 @@ export class LocalEditService {
         this.dataChanged();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    update(_item) { }
+    update(_item) {
+        /* noop */
+    }
     remove(item) {
         const data = this.data;
         for (let idx = 0; idx < data.length; idx++) {

package/esm2022/grid.component.mjs

@@ -2527,6 +2527,7 @@ export class GridComponent {
             <ng-container *ngIf="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
+                    [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
                     [style.padding]="headerPadding">
                     <div *ngIf="isLocked"
@@ -3233,6 +3234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngIf="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
+                    [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
                     [style.padding]="headerPadding">
                     <div *ngIf="isLocked"

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736179371,
-    version: '17.3.0-develop.1',
+    publishDate: 1736249922,
+    version: '18.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/rendering/header/header.component.mjs

@@ -111,9 +111,6 @@ export class HeaderComponent {
     tabIndex;
     size = 'medium';
     sortedFields = {};
-    get headerClass() {
-        return !this.scrollable;
-    }
     hostClass = true;
     get sortableLabel() {
         return this.contextService.localization.get('sortable');
@@ -493,7 +490,7 @@ export class HeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.DragHintService }, { token: i3.DropCueService }, { token: i4.ColumnReorderService }, { token: i5.IdService }, { token: i6.SortService }, { token: i7.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i8.ContextService }, { token: i9.NavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
@@ -983,9 +980,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], headerClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-header']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-thead']

package/esm2022/rendering/list.component.mjs

@@ -708,7 +708,7 @@ export class ListComponent {
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -762,7 +762,7 @@ export class ListComponent {
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -831,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -885,7 +885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">

package/esm2022/rendering/table-body.component.mjs

@@ -526,7 +526,7 @@ export class TableBodyComponent {
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
@@ -755,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, Host, Output, HostBinding, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, Host, Output, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, Observable, zip as zip$1, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
@@ -2512,9 +2512,6 @@ class DraggableColumnDirective {
         this.updateTouchAction();
     }
     drag = new EventEmitter();
-    get hostClass() {
-        return this.enabled;
-    }
     subscriptions = new Subscription();
     enabled;
     constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
@@ -2582,7 +2579,7 @@ class DraggableColumnDirective {
             this.renderer.removeClass(this.element.nativeElement, 'k-touch-action-none');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1$3.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DragAndDropService }, { token: DragHintService }, { token: DropCueService }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, host: { properties: { "class.k-grid-draggable-header": "this.hostClass" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, decorators: [{
             type: Directive,
@@ -2598,9 +2595,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], drag: [{
                 type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-draggable-header']
             }] } });
 
 /**
@@ -10793,33 +10787,7 @@ class ColumnListComponent {
         this.ngZone.runOutsideAngular(() => {
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'click', (e) => {
                 this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                    const closestItem = e.target.closest('.k-column-list-item');
-                    if (closestItem) {
-                        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-                        const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
-                        const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
-                        if (this.autoSync) {
-                            if (!this.columns[index]) {
-                                return;
-                            }
-                            const column = this.columns[index];
-                            const hidden = !checkbox.checkedState;
-                            if (Boolean(column.hidden) !== hidden) {
-                                this.ngZone.run(() => {
-                                    column.hidden = hidden;
-                                    this.columnChange.emit([column]);
-                                });
-                            }
-                        }
-                        else {
-                            this.updateDisabled();
-                        }
-                        if (index !== this.listNavigationService.activeIndex) {
-                            this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
-                            this.listNavigationService.activeIndex = index;
-                            this.listNavigationService.toggle(index, true);
-                        }
-                    }
+                    this.handleCheckBoxClick(e);
                 });
             }));
             this.domSubscriptions.add(this.renderer.listen(this.element.nativeElement, 'keydown', this.onKeydown));
@@ -10938,6 +10906,35 @@ class ColumnListComponent {
         this.renderer[classCommand](parentElement, 'k-disabled');
         this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
     }
+    handleCheckBoxClick = (e) => {
+        const closestItem = e.target.closest('.k-column-list-item');
+        if (closestItem) {
+            const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
+            const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
+            const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
+            if (this.autoSync) {
+                if (!this.columns[index]) {
+                    return;
+                }
+                const column = this.columns[index];
+                const hidden = !checkbox.checkedState;
+                if (Boolean(column.hidden) !== hidden) {
+                    this.ngZone.run(() => {
+                        column.hidden = hidden;
+                        this.columnChange.emit([column]);
+                    });
+                }
+            }
+            else {
+                this.updateDisabled();
+            }
+            if (index !== this.listNavigationService.activeIndex) {
+                this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
+                this.listNavigationService.activeIndex = index;
+                this.listNavigationService.toggle(index, true);
+            }
+        }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ColumnListKeyboardNavigation }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnListComponent, isStandalone: true, selector: "kendo-grid-columnlist", inputs: { columns: "columns", autoSync: "autoSync", ariaLabel: "ariaLabel", allowHideAll: "allowHideAll", applyText: "applyText", resetText: "resetText", actionsClass: "actionsClass", isLast: "isLast", isExpanded: "isExpanded", service: "service" }, outputs: { reset: "reset", apply: "apply", columnChange: "columnChange" }, host: { properties: { "class.k-column-list-wrapper": "this.className" } }, providers: [ColumnListKeyboardNavigation], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["applyButton"], descendants: true }, { propertyName: "options", predicate: ColumnMenuChooserItemCheckedDirective, descendants: true }, { propertyName: "checkboxes", predicate: CheckBoxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div 
@@ -13213,7 +13210,7 @@ class ColumnMenuComponent {
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
@@ -15933,9 +15930,6 @@ class HeaderComponent {
     tabIndex;
     size = 'medium';
     sortedFields = {};
-    get headerClass() {
-        return !this.scrollable;
-    }
     hostClass = true;
     get sortableLabel() {
         return this.contextService.localization.get('sortable');
@@ -16315,7 +16309,7 @@ class HeaderComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: NavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, isStandalone: true, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
@@ -16805,9 +16799,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], size: [{
                 type: Input
-            }], headerClass: [{
-                type: HostBinding,
-                args: ['class.k-grid-header']
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-thead']
@@ -18166,7 +18157,7 @@ class TableBodyComponent {
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
@@ -18395,7 +18386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
-            class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
+            class="{{ isOdd(item) ?  'k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
@@ -19213,8 +19204,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736179371,
-    version: '17.3.0-develop.1',
+    publishDate: 1736249922,
+    version: '18.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21865,7 +21856,7 @@ class ListComponent {
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -21919,7 +21910,7 @@ class ListComponent {
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -21988,7 +21979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
         </div>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
     </div>
@@ -22042,7 +22033,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
         </div>
         <kendo-resize-sensor *ngIf="isLocked || virtualColumns"></kendo-resize-sensor>
-        <div class="k-height-container" role="presentation">
+        <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
         <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
@@ -25300,6 +25291,7 @@ class GridComponent {
             <ng-container *ngIf="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
+                    [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
                     [style.padding]="headerPadding">
                     <div *ngIf="isLocked"
@@ -26006,6 +25998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <ng-container *ngIf="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
+                    [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
                     [style.padding]="headerPadding">
                     <div *ngIf="isLocked"
@@ -26804,7 +26797,9 @@ class LocalEditService {
         this.dataChanged();
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    update(_item) { }
+    update(_item) {
+        /* noop */
+    }
     remove(item) {
         const data = this.data;
         for (let idx = 0; idx < data.length; idx++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "17.3.0-develop.1",
+  "version": "18.0.0-develop.1",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -33,27 +33,27 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.3.0-develop.1",
-    "@progress/kendo-angular-common": "17.3.0-develop.1",
-    "@progress/kendo-angular-dateinputs": "17.3.0-develop.1",
-    "@progress/kendo-angular-layout": "17.3.0-develop.1",
-    "@progress/kendo-angular-dropdowns": "17.3.0-develop.1",
-    "@progress/kendo-angular-excel-export": "17.3.0-develop.1",
-    "@progress/kendo-angular-icons": "17.3.0-develop.1",
-    "@progress/kendo-angular-inputs": "17.3.0-develop.1",
-    "@progress/kendo-angular-intl": "17.3.0-develop.1",
-    "@progress/kendo-angular-l10n": "17.3.0-develop.1",
-    "@progress/kendo-angular-label": "17.3.0-develop.1",
-    "@progress/kendo-angular-pager": "17.3.0-develop.1",
-    "@progress/kendo-angular-pdf-export": "17.3.0-develop.1",
-    "@progress/kendo-angular-popup": "17.3.0-develop.1",
-    "@progress/kendo-angular-toolbar": "17.3.0-develop.1",
-    "@progress/kendo-angular-utils": "17.3.0-develop.1",
+    "@progress/kendo-angular-buttons": "18.0.0-develop.1",
+    "@progress/kendo-angular-common": "18.0.0-develop.1",
+    "@progress/kendo-angular-dateinputs": "18.0.0-develop.1",
+    "@progress/kendo-angular-layout": "18.0.0-develop.1",
+    "@progress/kendo-angular-dropdowns": "18.0.0-develop.1",
+    "@progress/kendo-angular-excel-export": "18.0.0-develop.1",
+    "@progress/kendo-angular-icons": "18.0.0-develop.1",
+    "@progress/kendo-angular-inputs": "18.0.0-develop.1",
+    "@progress/kendo-angular-intl": "18.0.0-develop.1",
+    "@progress/kendo-angular-l10n": "18.0.0-develop.1",
+    "@progress/kendo-angular-label": "18.0.0-develop.1",
+    "@progress/kendo-angular-pager": "18.0.0-develop.1",
+    "@progress/kendo-angular-pdf-export": "18.0.0-develop.1",
+    "@progress/kendo-angular-popup": "18.0.0-develop.1",
+    "@progress/kendo-angular-toolbar": "18.0.0-develop.1",
+    "@progress/kendo-angular-utils": "18.0.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.3.0-develop.1",
+    "@progress/kendo-angular-schematics": "18.0.0-develop.1",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/rendering/header/header.component.d.ts

@@ -66,7 +66,6 @@ export declare class HeaderComponent implements AfterViewInit, OnInit, OnChanges
     tabIndex: string;
     size: GridSize;
     sortedFields: any;
-    get headerClass(): boolean;
     hostClass: boolean;
     get sortableLabel(): string;
     get columnMenuSettings(): ColumnMenuSettings;

package/schematics/ngAdd/index.js

@@ -4,14 +4,14 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
             // peer deps of the dropdowns
-            '@progress/kendo-angular-treeview': '17.3.0-develop.1',
-            '@progress/kendo-angular-navigation': '17.3.0-develop.1',
+            '@progress/kendo-angular-treeview': '18.0.0-develop.1',
+            '@progress/kendo-angular-navigation': '18.0.0-develop.1',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '17.3.0-develop.1',
+            '@progress/kendo-angular-dialog': '18.0.0-develop.1',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '17.3.0-develop.1'
+            '@progress/kendo-angular-progressbar': '18.0.0-develop.1'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }