@progress/kendo-angular-grid 16.11.0-develop.1 → 16.11.0-develop.2

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

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, Host, Output, HostBinding, QueryList, isDevMode, Component, ContentChildren, ContentChild, forwardRef, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ElementRef, ViewEncapsulation, NgModule } from '@angular/core';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, Observable, zip as zip$1, BehaviorSubject } from 'rxjs';
 import * as i9 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, isPresent as isPresent$1, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService, DraggableModule } 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, DraggableModule } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
@@ -1067,6 +1067,10 @@ class NavigationCursor {
         if (cell.colSpan > 1 && cell.colIndex <= virtualCol && virtualCol < cell.colIndex + cell.colSpan) {
             nextColIndex = offset > 0 ? Math.min(cell.colIndex + cell.colSpan, lastIndex) : Math.max(0, cell.colIndex + offset);
             const nextCell = this.model.findCell(nextColIndex, prevRow);
+            if (!nextCell) {
+                this.virtualCol = nextColIndex;
+                return this.activate(cell.rowIndex, nextColIndex);
+            }
             if (cell !== nextCell) {
                 cell = nextCell;
                 this.virtualCol = cell.colIndex;
@@ -1074,7 +1078,9 @@ class NavigationCursor {
             else {
                 this.virtualCol = virtualCol;
             }
+            return this.activate(cell.rowIndex, this.virtualCol);
         }
+        this.virtualCol = cell.colIndex;
         return this.activate(cell.rowIndex, cell.colIndex);
     }
     offsetRow(offset) {
@@ -1101,6 +1107,9 @@ class NavigationCursor {
                 }
                 if (cell.rowIndex <= this.virtualRow && offset > 0 && cell.rowSpan > 1) {
                     cell = this.model.findCell(this.virtualCol, this.model.findRow(cell.rowIndex + cell.rowSpan - 1 + offset));
+                    if (!cell) {
+                        return;
+                    }
                 }
                 nextIndex = cell.rowIndex;
                 nextColIndex = cell.colIndex;
@@ -1856,7 +1865,7 @@ class NavigationService {
     get activeRow() {
         if (this.mode !== 0 /* NavigationMode.Standby */) {
             return Object.assign({}, this.cursor.row, {
-                cells: this.cursor.row.cells.toArray()
+                cells: this.cursor.row?.cells.toArray()
             });
         }
     }
@@ -2128,16 +2137,56 @@ class NavigationService {
         const row = this.cursor.row;
         switch (args.keyCode) {
             case Keys.ArrowDown:
-                preventDefault = this.cursor.moveDown(step);
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.cursor.moveDown(step);
+                    if (this.activeRow?.dataItem) {
+                        this.handleVerticalArrowSelection(step);
+                    }
+                }
+                else {
+                    preventDefault = this.cursor.moveDown(step);
+                }
                 break;
             case Keys.ArrowUp:
-                preventDefault = this.cursor.moveUp(step);
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.cursor.moveUp(step);
+                    if (this.activeRow?.dataItem) {
+                        this.handleVerticalArrowSelection(-step);
+                    }
+                }
+                else {
+                    preventDefault = this.cursor.moveUp(step);
+                }
                 break;
             case Keys.ArrowRight:
-                preventDefault = this.moveCursorFwd();
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.moveCursorFwd();
+                    this.handleHorizontalArrowSelection(args);
+                }
+                else {
+                    preventDefault = this.moveCursorFwd();
+                }
                 break;
             case Keys.ArrowLeft:
-                preventDefault = this.moveCursorBwd();
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.moveCursorBwd();
+                    this.handleHorizontalArrowSelection(args);
+                }
+                else {
+                    preventDefault = this.moveCursorBwd();
+                }
                 break;
             case Keys.PageDown:
                 if (this.metadata.isVirtual && this.viewport) {
@@ -2328,6 +2377,58 @@ class NavigationService {
         this.leaveCell();
         this.cursor.reset();
     }
+    handleVerticalArrowSelection(args) {
+        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
+        const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
+        if (cellSelectionEnabled || rowSelectionEnabled) {
+            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
+            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
+            const rowIdx = this.activeRow.dataRowIndex - this.ctx.grid.skip;
+            const dataItem = selectionService.settings.view.at(rowIdx);
+            const item = { index: this.activeRow.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
+            if (selectionService.options.mode === 'multiple') {
+                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item) : this.handleMultipleArrowRowSelection(item);
+            }
+            else {
+                selectionService.handleClick(item, args);
+            }
+        }
+    }
+    handleHorizontalArrowSelection(args) {
+        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
+        if (cellSelectionEnabled) {
+            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
+            const row = this.activeRow;
+            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
+            const dataItem = selectionService.settings.view.at(row.dataRowIndex - this.ctx.grid.skip);
+            const item = { index: row.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
+            if (!isPresent$1(dataItem) || !isPresent$1(item.column)) {
+                return;
+            }
+            if (selectionService.options.mode === 'multiple') {
+                this.handleMultipleArrowCellSelection(item);
+            }
+            else {
+                selectionService.handleClick(item, args);
+            }
+        }
+    }
+    handleMultipleArrowCellSelection(item) {
+        const cellSelectionService = this.ctx.grid.cellSelectionService;
+        const startRowIndex = Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const startColIndex = Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const endRowIndex = Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const endColIndex = Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+        cellSelectionService.changes.emit(ev);
+    }
+    handleMultipleArrowRowSelection(item) {
+        const rowSelectionService = this.ctx.grid.selectionService;
+        const startRowIndex = Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
+        const endRowIndex = Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
+        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
+        rowSelectionService.changes.emit(ev);
+    }
 }
 NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
 NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
@@ -14073,6 +14174,7 @@ class SelectionService {
         this.ctxService = ctxService;
         this.changes = new EventEmitter();
         this.currentSelection = [];
+        this.nonSelectableRows = new Map();
         this.selectAllChecked = false;
         this.active = false;
         this.dragging = false;
@@ -14093,6 +14195,9 @@ class SelectionService {
             selectableSettings.drag;
         return this.active && dragAndMultiple;
     }
+    get hasNonSelectable() {
+        return this.nonSelectableRows.size > 0;
+    }
     init(settings) {
         this.settings = settings;
         if (!isPresent(this.lastSelectionStartIndex)) {
@@ -14100,6 +14205,7 @@ class SelectionService {
             this.lastSelectionData = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.dataItem || {};
         }
         this.currentSelection = [];
+        this.nonSelectableRows = new Map();
         if (settings.selectable && settings.selectable.enabled !== false) {
             const iterator = this.getIterator();
             this._selectAllState = true;
@@ -14116,6 +14222,10 @@ class SelectionService {
                     else {
                         this._selectAllState = undefined;
                     }
+                    if (!settings.isRowSelectable(rowArgs)) {
+                        this.nonSelectableRows.set(rowArgs.index, rowArgs.dataItem);
+                        this._selectAllState = undefined;
+                    }
                 }
                 item = iterator.next();
             }
@@ -14126,7 +14236,7 @@ class SelectionService {
     }
     isSelected(index) {
         if (this.settings && this.active) {
-            return this.options.enabled && isPresent(this.currentSelection[index]);
+            return this.options.enabled && isPresent(this.currentSelection[index]) && !this.nonSelectableRows.has(index);
         }
     }
     handleClick(item, event) {
@@ -14140,7 +14250,7 @@ class SelectionService {
             ev = this.toggle(item);
         }
         else if (this.options.mode === "multiple") {
-            if (ctrlKey && !event.shiftKey) {
+            if ((ctrlKey || !this.options.metaKeyMultiSelect) && !event.shiftKey) {
                 ev = this.toggle(item);
             }
             else if (event.shiftKey) {
@@ -14177,9 +14287,13 @@ class SelectionService {
         if (this.isSelected(item.index)) {
             deselectedRows.push(rowArgs);
         }
-        else {
+        else if (!this.nonSelectableRows.has(item.index)) {
             selectedRows.push(rowArgs);
         }
+        if (this.hasNonSelectable) {
+            const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
+            deselectedRows.push(...nonSelectableRows);
+        }
         return {
             deselectedRows: deselectedRows,
             selectedRows: selectedRows
@@ -14212,7 +14326,7 @@ class SelectionService {
         const selectedRows = [];
         this.lastSelectionStartIndex = item.index;
         this.lastSelectionData = item.data;
-        if (!this.isSelected(item.index)) {
+        if (!this.isSelected(item.index) && !this.nonSelectableRows.has(item.index)) {
             selectedRows.push({ dataItem: item.data, index: item.index });
         }
         this.currentSelection.forEach((row) => {
@@ -14235,7 +14349,7 @@ class SelectionService {
                     dataItem: item.value.data,
                     index: item.value.index
                 };
-                if (this.isSelected(rowArgs.index)) {
+                if (this.isSelected(rowArgs.index) || this.nonSelectableRows.has(rowArgs.index)) {
                     const ev = {
                         ctrlKey: false,
                         deselectedRows: [rowArgs],
@@ -14261,12 +14375,16 @@ class SelectionService {
                 if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
                     deselectedRows.push(rowArgs);
                 }
-                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
+                if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
                 }
             }
             next = iterator.next();
         }
+        if (this.hasNonSelectable) {
+            const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
+            deselectedRows.push(...nonSelectableRows);
+        }
         return {
             deselectedRows: deselectedRows,
             selectedRows: selectedRows
@@ -14282,11 +14400,13 @@ class SelectionService {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
-                if (this.isSelected(idx) && !selectAllChecked) {
-                    deselectedRows.push(rowArgs);
-                }
-                if (!this.isSelected(idx) && selectAllChecked) {
-                    selectedRows.push(rowArgs);
+                if (!this.nonSelectableRows.has(idx)) {
+                    if (this.isSelected(idx) && !selectAllChecked) {
+                        deselectedRows.push(rowArgs);
+                    }
+                    if (!this.isSelected(idx) && selectAllChecked) {
+                        selectedRows.push(rowArgs);
+                    }
                 }
             }
             next = iterator.next();
@@ -14294,6 +14414,10 @@ class SelectionService {
         if (!selectedRows.length && !deselectedRows.length) {
             return;
         }
+        if (this.hasNonSelectable) {
+            const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
+            deselectedRows.push(...nonSelectableRows);
+        }
         const ev = {
             ctrlKey: true,
             deselectedRows: deselectedRows,
@@ -14319,7 +14443,7 @@ class SelectionService {
                 if ((idx < start || idx > end) && this.isSelected(idx)) {
                     deselectedRows.push(rowArgs);
                 }
-                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
+                if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
                 }
             }
@@ -14329,6 +14453,10 @@ class SelectionService {
         if (this.options.cellAggregates) {
             cellAggregates = this.aggregateService.onSelectionChange({ selectedRows, deselectedRows });
         }
+        if (this.hasNonSelectable) {
+            const nonSelectableRows = this.currentSelection.filter(i => this.nonSelectableRows.has(i.index));
+            deselectedRows.push(...nonSelectableRows);
+        }
         return {
             deselectedRows: deselectedRows,
             selectedRows: selectedRows,
@@ -14348,7 +14476,8 @@ class SelectionService {
             cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
-            mode: "multiple"
+            mode: "multiple",
+            metaKeyMultiSelect: true
         };
         if (!isPresent(this.settings)) {
             return defaultOptions;
@@ -14358,7 +14487,8 @@ class SelectionService {
                 cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
-                mode: "multiple"
+                mode: "multiple",
+                metaKeyMultiSelect: true
             };
         }
         else {
@@ -14435,523 +14565,836 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }], ctorParameters: function () { return [{ type: DomEventsService }, { type: CellSelectionAggregateService }, { type: LocalDataChangesService }, { type: NavigationService }, { type: ContextService }]; } });
 
 /**
- * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
- *
- * @example
- * ```html
- * <input
- *   type="checkbox"
- *   kendoCheckBox
- *   kendoGridSelectAllCheckbox
- *   [state]="selectAllState"
- *   (selectAllChange)="onSelectAllChange($event)"
- * />
- * ```
+ * @hidden
  */
-class SelectAllCheckboxDirective {
-    constructor(selectionService, el, renderer, ngZone) {
-        this.selectionService = selectionService;
-        this.el = el;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        /**
-         * Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
-         * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
-         */
-        this.selectAllChange = new EventEmitter();
-        this.type = 'checkbox';
-        this.stateSet = false;
-        this.ngZone.runOutsideAngular(() => {
-            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
-        });
+class CellSelectionService {
+    constructor(domEvents, aggregateService, localDataChangesService, navigationService) {
+        this.domEvents = domEvents;
+        this.aggregateService = aggregateService;
+        this.localDataChangesService = localDataChangesService;
+        this.navigationService = navigationService;
+        this.changes = new EventEmitter();
+        this.mouseUpEvent = new EventEmitter();
+        this.currentSelection = [];
+        this.active = false;
+        this.nonSelectableRows = new Map();
+        this.dragging = false;
+        this.dragSelectDeselect = false;
+        this.lastSelectionItem = { itemKey: 0, columnKey: 0 };
+        this.lastSelectionItemRowIndex = 0;
+        this.lastSelectionItemColIndex = 0;
+        this.addSubscriptions();
     }
-    ngAfterContentChecked() {
-        this.setState();
+    get enableMarquee() {
+        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
+        if (!this.settings || checkboxOnly) {
+            return false;
+        }
+        const selectableSettings = this.settings.selectable;
+        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
+            isPresent(selectableSettings) &&
+            selectableSettings.mode === 'multiple' &&
+            selectableSettings.cell &&
+            selectableSettings.enabled !== false &&
+            selectableSettings.drag;
+        return this.active && dragAndMultiple;
     }
-    ngOnChanges() {
-        this.stateSet = true;
+    get hasNonSelectable() {
+        return this.nonSelectableRows.size > 0;
     }
-    ngOnDestroy() {
-        if (this.destroyClick) {
-            this.destroyClick();
+    init(settings) {
+        this.settings = settings;
+        this.currentSelection = [];
+        this.nonSelectableRows = new Map();
+        if (settings.selectable && settings.selectable.enabled !== false) {
+            const iterator = this.getIterator();
+            let item = iterator.next();
+            while (!item.done) {
+                if (item.value && item.value.type === "data") {
+                    const rowArgs = {
+                        dataItem: item.value.data,
+                        index: item.value.index
+                    };
+                    settings.columns.forEach(col => {
+                        const selectedCellArgs = settings.cellSelected(rowArgs, col, col.leafIndex);
+                        if (selectedCellArgs.selected) {
+                            this.currentSelection.push(selectedCellArgs.item);
+                        }
+                        if (!settings.isRowSelectable(rowArgs)) {
+                            this.nonSelectableRows.set(rowArgs.index, rowArgs.dataItem);
+                        }
+                    });
+                }
+                item = iterator.next();
+            }
         }
     }
-    /**
-     * @hidden
-     */
-    onClick() {
-        // yields consistent cross-browser behavior when clicking an indeterminate checkbox
-        const undefinedCheckedStateInIE = detectIE() && this.selectionService.selectAllState === undefined;
-        const isChecked = undefinedCheckedStateInIE ? true : this.el.nativeElement.checked;
-        const options = this.selectionService.options;
-        const enabledAndMultiple = options.enabled && options.mode === 'multiple';
-        const shouldEmitSelectAll = hasObservers(this.selectAllChange);
-        if (enabledAndMultiple || shouldEmitSelectAll) {
-            this.ngZone.run(() => {
-                if (enabledAndMultiple) {
-                    this.selectionService.updateAll(isChecked);
-                }
-                if (shouldEmitSelectAll) {
-                    this.selectAllChange.emit(isChecked ? 'checked' : 'unchecked');
-                }
-            });
+    isCellSelected(item, col) {
+        if (this.settings && this.active) {
+            const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
+            return this.options.enabled && selectedCellArgs.selected && !this.nonSelectableRows.has(item.index);
         }
+        return false;
     }
-    /**
-     * @hidden
-     */
-    setState() {
-        const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
-        const elem = this.el.nativeElement;
-        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
-        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
+    handleClick(item, event) {
+        if (this.dragging) {
+            this.dragging = false;
+            return;
+        }
+        let ev;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {
+            ev = this.toggle(item);
+        }
+        else if (this.options.mode === "multiple") {
+            if ((ctrlKey || !this.options.metaKeyMultiSelect) && !event.shiftKey) {
+                ev = this.toggle(item);
+            }
+            else if (event.shiftKey) {
+                const startRowIndex = Math.min(this.lastSelectionItemRowIndex, item.index);
+                const startColIndex = Math.min(this.lastSelectionItemColIndex, item.column.leafIndex);
+                const endRowIndex = Math.max(this.lastSelectionItemRowIndex, item.index);
+                const endColIndex = Math.max(this.lastSelectionItemColIndex, item.column.leafIndex);
+                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+            }
+        }
+        if (!isPresent(ev)) {
+            ev = this.select(item);
+            this.currentSelection = [this.lastSelectionItem];
+        }
+        if (!ev.selectedCells.length && !ev.deselectedCells.length) {
+            return;
+        }
+        ev.ctrlKey = ctrlKey;
+        ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates && !event.shiftKey) {
+            ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartCell = this.lastSelectionItem;
+            ev.rangeEndCell = {
+                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
+            };
+        }
+        this.changes.emit(ev);
     }
-    /**
-     * @hidden
-     */
-    stateToBool() {
-        switch (this.state) {
-            case 'checked':
-                return true;
-            case 'unchecked':
-                return false;
-            default:
-                return undefined;
+    toggle(item) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        this.lastSelectionItem =
+            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
+        this.lastSelectionItemRowIndex = item.index;
+        this.lastSelectionItemColIndex = item.column.leafIndex;
+        if (this.isCellSelected(item, item.column)) {
+            deselectedCells.push(this.lastSelectionItem);
+        }
+        else if (!this.nonSelectableRows.has(item.index)) {
+            selectedCells.push(this.lastSelectionItem);
         }
+        return {
+            deselectedCells,
+            selectedCells
+        };
     }
-}
-SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SelectAllCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridSelectAllCheckbox]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
-                type: Input
-            }], selectAllChange: [{
-                type: Output
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }] } });
-
-const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
-const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
-/**
- * @hidden
- */
-const isRootLevel = ({ parent }) => !isTruthy(parent);
-const ofColumnType = ({ draggable }) => ['column', 'columnGroup']
-    .indexOf(draggable.context.type) >= 0;
-const notSameElement = ({ draggable, target }) => draggable.element.nativeElement !== target.element.nativeElement;
-const inSameParent = (x, y) => x.parent === y.parent ||
-    (isInSpanColumn$1(y) && inSameParent(x, y.parent));
-const sameParent = ({ draggable, target }) => inSameParent(draggable.context.column, target.context.column);
-const lastNonLocked = ({ draggable }) => !isTruthy(draggable.context.column.locked) &&
-    isRootLevel(draggable.context.column) &&
-    draggable.context.lastColumn;
-const notInSpanColumn = ({ draggable }) => !isInSpanColumn$1(draggable.context.column);
-const reorderable = ({ draggable }) => draggable.context.column.reorderable;
-const lockable = ({ draggable, target }) => draggable.context.column.lockable !== false ||
-    draggable.context.column.isLocked === target.context.column.isLocked;
-const rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
-const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
-/**
- * @hidden
- */
-class HeaderComponent {
-    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService, navigationService) {
-        this.popupService = popupService;
-        this.hint = hint;
-        this.cue = cue;
-        this.reorderService = reorderService;
-        this.idService = idService;
-        this.sortService = sortService;
-        this.columnInfoService = columnInfoService;
-        this.cd = cd;
-        this.contextService = contextService;
-        this.navigationService = navigationService;
-        this.columns = [];
-        this.groups = [];
-        this.sort = new Array();
-        this.sortable = false;
-        this.groupable = false;
-        this.lockedColumnsCount = 0;
-        this.resizable = false;
-        this.reorderable = false;
-        this.columnMenu = false;
-        this.totalColumnsCount = 0;
-        this.size = 'medium';
-        this.sortedFields = {};
-        this.hostClass = true;
-        this.dropTargets = new QueryList();
-        this.sortAscSmallIcon = sortAscSmallIcon;
-        this.sortDescSmallIcon = sortDescSmallIcon;
-        this.subscription = new Subscription();
-    }
-    get headerClass() {
-        return !this.scrollable;
-    }
-    get sortableLabel() {
-        return this.contextService.localization.get('sortable');
-    }
-    get columnMenuSettings() {
-        return this.columnMenu;
-    }
-    // Number of unlocked columns in the next table, if any
-    get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
-    }
-    sortColumn(descriptor) {
-        this.sortService.sort(descriptor);
-    }
-    getColumnComponent(column) {
-        return column;
-    }
-    onSortClick(column, event, link) {
-        const target = event.target;
-        if (column.headerTemplateRef && target !== link) {
-            const hasFocusableParent = Boolean(closestInScope(target, isFocusable, link));
-            if (hasFocusableParent) {
-                // Do not sort when clicking focusable template elements.
-                return;
-            }
+    select(item) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        this.lastSelectionItem =
+            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
+        this.lastSelectionItemRowIndex = item.index;
+        this.lastSelectionItemColIndex = item.column.leafIndex;
+        if (!this.isCellSelected(item, item.column) && !this.nonSelectableRows.has(item.index)) {
+            selectedCells.push(this.lastSelectionItem);
         }
-        const modifier = this.matchModifier(event);
-        const toggledColumn = this.toggleSort(column, modifier);
-        this.sortColumn(toggledColumn);
+        this.currentSelection.forEach((selectedItem) => {
+            if (selectedItem.itemKey !== this.lastSelectionItem.itemKey || selectedItem.columnKey !== this.lastSelectionItem.columnKey) {
+                deselectedCells.push(selectedItem);
+            }
+        });
+        return {
+            deselectedCells,
+            selectedCells
+        };
     }
-    onHeaderKeydown(column, args) {
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
-            args.preventDefault();
-            args.stopImmediatePropagation();
-            const filterMenu = this.filterMenus.find(fm => fm.column === column);
-            filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
-            return;
-        }
-        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
-            args.preventDefault();
-            args.stopImmediatePropagation();
-            const columnMenu = this.columnMenus.find(cm => cm.column === column);
-            columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
-            return;
+    //Used to manually deselect removed items
+    deselect(removedItem) {
+        const iterator = this.getIterator();
+        let item = iterator.next();
+        let rowArgs;
+        while (!item.done) {
+            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
+                rowArgs = {
+                    dataItem: item.value.data,
+                    index: item.value.index
+                };
+                break;
+            }
+            item = iterator.next();
         }
-        const isCtrlOrMeta = args.ctrlKey || args.metaKey;
-        const isGroupingKeyShortcut = (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) && isCtrlOrMeta;
-        if (isGroupingKeyShortcut && this.isGroupable(column)) {
-            args.preventDefault();
-            args.stopImmediatePropagation();
-            const isGroupedByField = this.groups.some(gr => gr.field === column.field);
-            if (isGroupedByField) {
-                this.groups = this.groups.filter(gr => gr.field !== column.field);
+        if (rowArgs) {
+            const cellsToRemove = this.currentSelection.filter(selectedItem => {
+                const contender = this.settings.cellSelected(rowArgs, null, null).item;
+                return selectedItem.itemKey === contender.itemKey || this.nonSelectableRows.has(rowArgs.index);
+            });
+            if (cellsToRemove.length) {
+                const ev = {
+                    ctrlKey: false,
+                    deselectedCells: cellsToRemove,
+                    selectedCells: []
+                };
+                this.changes.emit(ev);
             }
-            else {
-                this.groups.push({
-                    field: column.field
+        }
+    }
+    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        const selectionStartRow = Math.min(startRowIndex, endRowIndex);
+        const selectionStartCol = Math.min(startColIndex, endColIndex);
+        const selectionEndRow = Math.max(startRowIndex, endRowIndex);
+        const selectionEndCol = Math.max(startColIndex, endColIndex);
+        const iterator = this.getIterator();
+        let next = iterator.next();
+        while (!next.done) {
+            if (next.value && next.value.type === "data") {
+                const idx = next.value.index;
+                const data = next.value.data;
+                const rowArgs = {
+                    dataItem: data,
+                    index: idx
+                };
+                this.settings.columns.forEach(col => {
+                    const { item } = this.settings.cellSelected(rowArgs, col, col.leafIndex);
+                    const selected = this.isCellSelected(next.value, col);
+                    const isInRowRange = selectionStartRow <= idx && idx <= selectionEndRow;
+                    const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
+                    const isInSelectionRect = isInRowRange && isInColRange;
+                    if (!isInSelectionRect && selected) {
+                        deselectedCells.push(item);
+                    }
+                    if (isInSelectionRect && !selected && !this.nonSelectableRows.has(idx)) {
+                        selectedCells.push(item);
+                    }
                 });
             }
-            this.contextService.grid.groupChange.emit(this.groups);
-            return;
-        }
-        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
-        const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
-        if (isReorderingKeyShortcut && this.isReorderable(column)) {
-            args.preventDefault();
-            const columnsCount = this.columnInfoService.leafNamedColumns.length;
-            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
-            const rtlMultiplier = this.contextService.localization.rtl ? -1 : 1;
-            const reorderDirectionOffset = reorderDirection * rtlMultiplier;
-            const newIndex = column.leafIndex + reorderDirectionOffset;
-            const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
-            const gridInstance = this.contextService.grid;
-            gridInstance.reorderColumn(column, normalizedNewIndex, { before: reorderDirectionOffset < 0 });
-            gridInstance.columnReorder.emit(new ColumnReorderEvent({
-                column,
-                newIndex: normalizedNewIndex,
-                oldIndex: column.leafIndex
-            }));
-            return;
-        }
-        if (!this.sortable || args.defaultPrevented || column.sortable === false) {
-            return;
+            next = iterator.next();
         }
-        if (args.keyCode === Keys.Enter && isPresent(column.field)) {
-            const modifier = this.matchModifier(args);
-            this.sortService.sort(this.toggleSort(column, modifier));
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            cellAggregates = this.aggregateService.onSelectionChange({ selectedCells, deselectedCells });
         }
+        return {
+            deselectedCells,
+            selectedCells,
+            cellAggregates
+        };
     }
-    showSortNumbering(column) {
-        const { showIndexes } = normalize$1(this.sortable);
-        return showIndexes
-            && this.sort
-            && this.sort.filter(({ dir }) => isPresent(dir)).length > 1
-            && this.sortOrder(column.field) > 0;
-    }
-    sortOrder(field) {
-        return this.sort
-            .filter(({ dir }) => isPresent(dir))
-            .findIndex(x => x.field === field)
-            + 1;
-    }
-    sortState(column) {
-        if (!this.isInteractive(column, 'sortable')) {
-            return;
+    get options() {
+        const defaultOptions = {
+            cellAggregates: false,
+            checkboxOnly: false,
+            enabled: true,
+            mode: "multiple",
+            metaKeyMultiSelect: true
+        };
+        if (!isPresent(this.settings)) {
+            return defaultOptions;
         }
-        const state = this.sortDescriptor(column.field);
-        if (state.dir === 'asc') {
-            return 'ascending';
+        if (typeof this.settings.selectable === 'boolean') {
+            return {
+                cellAggregates: false,
+                checkboxOnly: false,
+                enabled: this.settings.selectable,
+                mode: "multiple",
+                metaKeyMultiSelect: true
+            };
         }
-        if (state.dir === 'desc') {
-            return 'descending';
+        else {
+            return Object.assign(defaultOptions, this.settings.selectable);
         }
     }
-    get isNavigable() {
-        return this.navigationService.tableEnabled;
+    ngOnDestroy() {
+        this.removeSubscriptions();
     }
-    /**
-     *
-     * @param column
-     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
-     * @returns - SortDescriptor[]
-     */
-    toggleSort(column, modifier = true) {
-        const { allowUnsort, mode, initialDirection } = normalize$1(this.sortable, column.sortable);
-        const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single' || !modifier) {
-            return [descriptor];
-        }
-        return [...this.sort.filter(desc => desc.field !== column.field), descriptor];
-    }
-    /**
-     *
-     * Determines whether the modifier key (if any) passed
-     * with a click/keyboard event matches the user-defined multiSortKey.
-     */
-    matchModifier(event) {
-        const { multiSortKey } = normalize$1(this.sortable);
-        if (multiSortKey === 'none') {
-            return modifierKeys.every(key => !event[`${key}Key`]);
-        }
-        return multiSortKey === 'ctrl'
-            ? event.ctrlKey || event.metaKey
-            : event[`${multiSortKey}Key`];
-    }
-    ngAfterViewInit() {
-        this.subscription.add(observe(this.dropTargets)
-            .subscribe(this.attachTargets.bind(this)));
-    }
-    ngDoCheck() {
-        this._leafColumns = columnsToRender(this.columns || []).filter(x => !isColumnGroupComponent(x));
-    }
-    ngOnChanges(changes) {
-        const sortChange = changes.sort;
-        if (sortChange && !sortChange.isFirstChange()) {
-            sortChange.currentValue.forEach(change => {
-                this.sortedFields[change.field] = true;
+    addSubscriptions() {
+        if (!this.cellClickSubscription) {
+            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
+                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
+                    if (this.active) {
+                        this.handleClick({ index: args.rowIndex, data: args.dataItem, column: args.column }, args.originalEvent);
+                    }
+                }
             });
         }
-    }
-    ngOnInit() {
-        this.subscription.add(this.contextService.localization.changes
-            .subscribe(() => this.cd.markForCheck()));
-    }
-    ngOnDestroy() {
-        if (this.targetSubscription) {
-            this.targetSubscription.unsubscribe();
+        if (!this.mousedownSubscription) {
+            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
+                this.mouseDownEventArgs = args;
+                if (this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
+                    !this.options.checkboxOnly && args.originalEvent.shiftKey) {
+                    if (this.active) {
+                        args.originalEvent.preventDefault();
+                        this.navigationService.focusCellByElement(args.originalEvent.target);
+                    }
+                }
+            });
         }
-        if (this.popupService) {
-            this.popupService.destroy();
+        if (this.localDataChangesService && !this.dataChangedSubscription) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
+                if (this.active) {
+                    if (isPresent(args.action) && args.action === 'remove') {
+                        this.deselect(args.item);
+                    }
+                }
+            });
         }
-        this.subscription.unsubscribe();
-    }
-    selectAllCheckboxId() {
-        return this.idService.selectAllCheckboxId();
-    }
-    get selectAllCheckboxLabel() {
-        return this.contextService.localization.get('selectAllCheckboxLabel');
-    }
-    isFirstOnRow(column, index) {
-        const isTailing = (c) => c &&
-            (this.columnsForLevel(c.level).indexOf(c) > 0 || isTailing(c.parent));
-        return index === 0 && !this.groups.length && !this.detailTemplate && isTailing(column.parent);
     }
-    logicalColumnIndex(column) {
-        const index = column.leafIndex;
-        if (isPresent(index)) {
-            return index + (isPresent(this.detailTemplate) ? 1 : 0);
+    getIterator() {
+        const accessor = this.settings.view.accessor();
+        if (!accessor) {
+            return;
         }
-        return -1;
-    }
-    get showFilterMenu() {
-        return !this.columnMenu && hasFilterMenu(this.filterable);
-    }
-    get showFilterRow() {
-        return hasFilterRow(this.filterable);
-    }
-    showColumnMenu(column) {
-        return this.columnMenu && column.columnMenu &&
-            (this.columnMenuTemplate || column.columnMenuTemplates.length || hasItems(this.columnMenu, column));
-    }
-    isFilterable(column) {
-        return !isNullOrEmptyString(column.field) && column.filterable === true;
-    }
-    canDrop(draggable, target) {
-        return this.reorderable && rules({ draggable, target });
+        return accessor[iterator]();
     }
-    shouldActivate(column) {
-        const canReorder = this.isReorderable(column);
-        if (!canReorder && !isColumnComponent(column)) {
-            return false;
+    removeSubscriptions() {
+        if (this.cellClickSubscription) {
+            this.cellClickSubscription.unsubscribe();
+            this.cellClickSubscription = null;
         }
-        const groupable = this.isGroupable(column);
-        return groupable || canReorder;
-    }
-    isInteractive(column, prop) {
-        return !isNullOrEmptyString(column.field)
-            && isTruthy(this[prop]) && isTruthy(column[prop]);
-    }
-    isCheckboxColumn(column) {
-        return isCheckboxColumn(column) && !column.templateRef;
-    }
-    trackByIndex(index, _item) {
-        return index;
-    }
-    addStickyStyles(column) {
-        const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
-        return { ...column.headerStyle, ...stickyStyles };
-    }
-    toggleDirection(field, allowUnsort, initialDirection) {
-        const descriptor = this.sortDescriptor(field);
-        const [first, second] = directions(initialDirection);
-        let dir = first;
-        if (descriptor.dir === first) {
-            dir = second;
+        if (this.mousedownSubscription) {
+            this.mousedownSubscription.unsubscribe();
+            this.mousedownSubscription = null;
         }
-        else if (descriptor.dir === second && allowUnsort) {
-            dir = undefined;
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+            this.dataChangedSubscription = null;
         }
-        return { dir, field };
-    }
-    columnsForLevel(level) {
-        const columns = this.columns ? this.columns.filter(column => column.level === level) : [];
-        return sortColumns(columnsToRender(columns));
     }
-    isColumnGroupComponent(column) {
-        return isColumnGroupComponent(column);
+}
+CellSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, deps: [{ token: DomEventsService }, { token: CellSelectionAggregateService }, { token: LocalDataChangesService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
+CellSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: CellSelectionAggregateService }, { type: LocalDataChangesService }, { type: NavigationService }]; } });
+
+/**
+ * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
+ *
+ * @example
+ * ```html
+ * <input
+ *   type="checkbox"
+ *   kendoCheckBox
+ *   kendoGridSelectAllCheckbox
+ *   [state]="selectAllState"
+ *   (selectAllChange)="onSelectAllChange($event)"
+ * />
+ * ```
+ */
+class SelectAllCheckboxDirective {
+    constructor(selectionService, cellSelectionService, el, renderer, ngZone) {
+        this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        /**
+         * Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
+         * ([see example](slug:grid_row_selection#toc-select-all-checkbox)).
+         */
+        this.selectAllChange = new EventEmitter();
+        this.type = 'checkbox';
+        this.stateSet = false;
+        this.ngZone.runOutsideAngular(() => {
+            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+        });
     }
-    sortDescriptor(field) {
-        return this.sort.find(item => item.field === field) || { field };
+    ngAfterContentChecked() {
+        this.setState();
     }
-    get columnLevels() {
-        return new Array((this.totalColumnLevels || 0) + 1);
+    ngOnChanges() {
+        this.stateSet = true;
     }
-    get leafColumns() {
-        return this._leafColumns;
+    ngOnDestroy() {
+        if (this.destroyClick) {
+            this.destroyClick();
+        }
     }
-    isReorderable(column) {
-        return this.reorderable && column.reorderable;
+    /**
+     * @hidden
+     */
+    onClick() {
+        const uncheckedState = this.el.nativeElement.indeterminate ? 'indeterminate' : 'unchecked';
+        const checkboxState = this.el.nativeElement.checked ? 'checked' : uncheckedState;
+        const isChecked = this.selectionService.hasNonSelectable ? !this.selectionService.selectAllChecked : this.el.nativeElement.checked;
+        const options = this.selectionService.options;
+        const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
+        const shouldEmitSelectAll = hasObservers(this.selectAllChange);
+        if (enabledAndMultiple || shouldEmitSelectAll) {
+            this.ngZone.run(() => {
+                if (enabledAndMultiple) {
+                    this.selectionService.updateAll(isChecked);
+                }
+                if (shouldEmitSelectAll) {
+                    this.selectAllChange.emit(checkboxState);
+                }
+            });
+        }
     }
-    isGroupable(column) {
-        return this.groupable && isColumnComponent(column) && column.groupable !== false;
+    /**
+     * @hidden
+     */
+    setState() {
+        const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
+        const elem = this.el.nativeElement;
+        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
+        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
     }
-    attachTargets() {
-        if (this.targetSubscription) {
-            this.targetSubscription.unsubscribe();
+    /**
+     * @hidden
+     */
+    stateToBool() {
+        switch (this.state) {
+            case 'checked':
+                return true;
+            case 'unchecked':
+                return false;
+            default:
+                return undefined;
         }
-        this.targetSubscription = new Subscription();
-        const enterStream = merge(...this.dropTargets.map(target => target.enter));
-        const leaveStream = merge(...this.dropTargets.map(target => target.leave));
-        const dropStream = merge(...this.dropTargets.map(target => target.drop));
-        this.targetSubscription.add(enterStream.pipe(tap(({ target, draggable }) => {
-            if (draggable.context.type === 'groupIndicator') {
-                return;
-            }
-            const targetLocked = isTruthy(target.context.column.isLocked);
-            const draggableLocked = isTruthy(draggable.context.column.isLocked);
-            if (this.lockedColumnsCount > 0 || targetLocked || draggableLocked) {
-                this.hint.toggleLock(targetLocked);
-            }
-        }), filter(({ draggable, target }) => this.canDrop(draggable, target)), switchMap(this.trackMove.bind(this, leaveStream, dropStream)), map((e) => mergeObjects(e, { before: this.calculateBefore(e), changeContainer: e.changeContainer })), map(this.normalizeTarget.bind(this)), tap(this.enter.bind(this)), switchMap((args) => dropStream.pipe(map(() => args), takeUntil(leaveStream.pipe(tap(this.leave.bind(this)))))))
-            .subscribe(this.drop.bind(this)));
     }
-    normalizeTarget(e) {
-        let target = e.target;
-        const parent = target.context.column.parent;
-        if (parent && parent.isSpanColumn) {
-            const arr = this.dropTargets.toArray();
-            const firstSpan = arr.find(t => t.context.column.parent === parent);
-            const index = arr.indexOf(firstSpan);
-            const adjust = e.before ? 0 : parent.childColumns.length - 1;
-            target = arr[index + adjust];
-        }
-        return mergeObjects(e, { target });
+}
+SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectAllCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectAllCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectAllCheckbox]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+                type: Input
+            }], selectAllChange: [{
+                type: Output
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }] } });
+
+const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
+const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
+/**
+ * @hidden
+ */
+const isRootLevel = ({ parent }) => !isTruthy(parent);
+const ofColumnType = ({ draggable }) => ['column', 'columnGroup']
+    .indexOf(draggable.context.type) >= 0;
+const notSameElement = ({ draggable, target }) => draggable.element.nativeElement !== target.element.nativeElement;
+const inSameParent = (x, y) => x.parent === y.parent ||
+    (isInSpanColumn$1(y) && inSameParent(x, y.parent));
+const sameParent = ({ draggable, target }) => inSameParent(draggable.context.column, target.context.column);
+const lastNonLocked = ({ draggable }) => !isTruthy(draggable.context.column.locked) &&
+    isRootLevel(draggable.context.column) &&
+    draggable.context.lastColumn;
+const notInSpanColumn = ({ draggable }) => !isInSpanColumn$1(draggable.context.column);
+const reorderable = ({ draggable }) => draggable.context.column.reorderable;
+const lockable = ({ draggable, target }) => draggable.context.column.lockable !== false ||
+    draggable.context.column.isLocked === target.context.column.isLocked;
+const rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
+const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
+/**
+ * @hidden
+ */
+class HeaderComponent {
+    constructor(popupService, hint, cue, reorderService, idService, sortService, columnInfoService, cd, contextService, navigationService) {
+        this.popupService = popupService;
+        this.hint = hint;
+        this.cue = cue;
+        this.reorderService = reorderService;
+        this.idService = idService;
+        this.sortService = sortService;
+        this.columnInfoService = columnInfoService;
+        this.cd = cd;
+        this.contextService = contextService;
+        this.navigationService = navigationService;
+        this.columns = [];
+        this.groups = [];
+        this.sort = new Array();
+        this.sortable = false;
+        this.groupable = false;
+        this.lockedColumnsCount = 0;
+        this.resizable = false;
+        this.reorderable = false;
+        this.columnMenu = false;
+        this.totalColumnsCount = 0;
+        this.size = 'medium';
+        this.sortedFields = {};
+        this.hostClass = true;
+        this.dropTargets = new QueryList();
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
+        this.subscription = new Subscription();
     }
-    trackMove(leaveStream, dropStream, e) {
-        const column = e.target.context.column;
-        const levelColumns = this.columnsForLevel(column.level);
-        const index = levelColumns.indexOf(column);
-        const isFirst = (column.locked ? index === levelColumns.length - 1 : index === 0);
-        const changed = e.draggable.context.column.isLocked !== column.isLocked;
-        if (changed && isFirst) {
-            return e.draggable.drag
-                .pipe(takeUntil(leaveStream), takeUntil(dropStream), map(({ mouseEvent }) => mergeObjects({ changeContainer: true }, e, { mouseEvent })));
+    get headerClass() {
+        return !this.scrollable;
+    }
+    get sortableLabel() {
+        return this.contextService.localization.get('sortable');
+    }
+    get columnMenuSettings() {
+        return this.columnMenu;
+    }
+    // Number of unlocked columns in the next table, if any
+    get unlockedColumnsCount() {
+        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
+    }
+    sortColumn(descriptor) {
+        this.sortService.sort(descriptor);
+    }
+    getColumnComponent(column) {
+        return column;
+    }
+    onSortClick(column, event, link) {
+        const target = event.target;
+        if (column.headerTemplateRef && target !== link) {
+            const hasFocusableParent = Boolean(closestInScope(target, isFocusable, link));
+            if (hasFocusableParent) {
+                // Do not sort when clicking focusable template elements.
+                return;
+            }
         }
-        return of(mergeObjects({ changeContainer: changed }, e));
+        const modifier = this.matchModifier(event);
+        const toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
     }
-    calculateBefore({ draggable, target, mouseEvent, changeContainer = false }) {
-        const targetElement = target.element.nativeElement;
-        let before = false;
-        if (changeContainer) {
-            const { left } = offset(targetElement);
-            const halfWidth = targetElement.offsetWidth / 2;
-            const middle = left + halfWidth;
-            before = middle > mouseEvent.pageX;
-            if (this.contextService.localization.rtl) {
-                before = !before;
+    onHeaderKeydown(column, args) {
+        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const filterMenu = this.filterMenus.find(fm => fm.column === column);
+            filterMenu.toggle(filterMenu.anchor.nativeElement, filterMenu.template);
+            return;
+        }
+        if (args.keyCode === Keys.ArrowDown && args.altKey && this.showColumnMenu(column)) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const columnMenu = this.columnMenus.find(cm => cm.column === column);
+            columnMenu.toggle(null, columnMenu.anchor.nativeElement, columnMenu.template);
+            return;
+        }
+        const isCtrlOrMeta = args.ctrlKey || args.metaKey;
+        const isGroupingKeyShortcut = (args.keyCode === Keys.Enter || args.keyCode === Keys.Space) && isCtrlOrMeta;
+        if (isGroupingKeyShortcut && this.isGroupable(column)) {
+            args.preventDefault();
+            args.stopImmediatePropagation();
+            const isGroupedByField = this.groups.some(gr => gr.field === column.field);
+            if (isGroupedByField) {
+                this.groups = this.groups.filter(gr => gr.field !== column.field);
             }
+            else {
+                this.groups.push({
+                    field: column.field
+                });
+            }
+            this.contextService.grid.groupChange.emit(this.groups);
+            return;
         }
-        else {
-            before = isTargetBefore(draggable.element.nativeElement, targetElement);
+        const isLeftOrRightArrow = args.keyCode === Keys.ArrowLeft || args.keyCode === Keys.ArrowRight;
+        const isReorderingKeyShortcut = isLeftOrRightArrow && isCtrlOrMeta;
+        if (isReorderingKeyShortcut && this.isReorderable(column)) {
+            args.preventDefault();
+            const columnsCount = this.columnInfoService.leafNamedColumns.length;
+            const reorderDirection = args.keyCode === Keys.ArrowLeft ? -1 : 1;
+            const rtlMultiplier = this.contextService.localization.rtl ? -1 : 1;
+            const reorderDirectionOffset = reorderDirection * rtlMultiplier;
+            const newIndex = column.leafIndex + reorderDirectionOffset;
+            const normalizedNewIndex = Math.min(Math.max(0, newIndex), columnsCount - 1);
+            const gridInstance = this.contextService.grid;
+            gridInstance.reorderColumn(column, normalizedNewIndex, { before: reorderDirectionOffset < 0 });
+            gridInstance.columnReorder.emit(new ColumnReorderEvent({
+                column,
+                newIndex: normalizedNewIndex,
+                oldIndex: column.leafIndex
+            }));
+            return;
+        }
+        if (!this.sortable || args.defaultPrevented || column.sortable === false) {
+            return;
+        }
+        if (args.keyCode === Keys.Enter && isPresent(column.field)) {
+            const modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
-        return before;
     }
-    enter({ target, before }) {
-        this.hint.enable();
-        if (this.contextService.localization.rtl) {
-            before = !before;
+    showSortNumbering(column) {
+        const { showIndexes } = normalize$1(this.sortable);
+        return showIndexes
+            && this.sort
+            && this.sort.filter(({ dir }) => isPresent(dir)).length > 1
+            && this.sortOrder(column.field) > 0;
+    }
+    sortOrder(field) {
+        return this.sort
+            .filter(({ dir }) => isPresent(dir))
+            .findIndex(x => x.field === field)
+            + 1;
+    }
+    sortState(column) {
+        if (!this.isInteractive(column, 'sortable')) {
+            return;
+        }
+        const state = this.sortDescriptor(column.field);
+        if (state.dir === 'asc') {
+            return 'ascending';
+        }
+        if (state.dir === 'desc') {
+            return 'descending';
         }
-        this.cue.position(position(target.element.nativeElement, before));
     }
-    leave() {
-        this.hint.disable();
-        this.cue.hide();
+    get isNavigable() {
+        return this.navigationService.tableEnabled;
     }
-    drop({ draggable, target, before, changeContainer }) {
-        this.reorderService.reorder({
-            before,
-            changeContainer,
-            source: draggable.context.column,
-            target: target.context.column
-        });
+    /**
+     *
+     * @param column
+     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
+     * @returns - SortDescriptor[]
+     */
+    toggleSort(column, modifier = true) {
+        const { allowUnsort, mode, initialDirection } = normalize$1(this.sortable, column.sortable);
+        const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
+        if (mode === 'single' || !modifier) {
+            return [descriptor];
+        }
+        return [...this.sort.filter(desc => desc.field !== column.field), descriptor];
     }
-}
-HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
-    <ng-container>
-        <tr *ngFor="let i of columnLevels; let levelIndex = index"
-            kendoGridLogicalRow
-                [logicalRowIndex]="levelIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
-                [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
-                [totalColumns]="totalColumns">
-            <th
-                class="k-group-cell k-header k-table-th"
-                role="presentation"
-                *ngFor="let g of groups">
-            </th>
+    /**
+     *
+     * Determines whether the modifier key (if any) passed
+     * with a click/keyboard event matches the user-defined multiSortKey.
+     */
+    matchModifier(event) {
+        const { multiSortKey } = normalize$1(this.sortable);
+        if (multiSortKey === 'none') {
+            return modifierKeys.every(key => !event[`${key}Key`]);
+        }
+        return multiSortKey === 'ctrl'
+            ? event.ctrlKey || event.metaKey
+            : event[`${multiSortKey}Key`];
+    }
+    ngAfterViewInit() {
+        this.subscription.add(observe(this.dropTargets)
+            .subscribe(this.attachTargets.bind(this)));
+    }
+    ngDoCheck() {
+        this._leafColumns = columnsToRender(this.columns || []).filter(x => !isColumnGroupComponent(x));
+    }
+    ngOnChanges(changes) {
+        const sortChange = changes.sort;
+        if (sortChange && !sortChange.isFirstChange()) {
+            sortChange.currentValue.forEach(change => {
+                this.sortedFields[change.field] = true;
+            });
+        }
+    }
+    ngOnInit() {
+        this.subscription.add(this.contextService.localization.changes
+            .subscribe(() => this.cd.markForCheck()));
+    }
+    ngOnDestroy() {
+        if (this.targetSubscription) {
+            this.targetSubscription.unsubscribe();
+        }
+        if (this.popupService) {
+            this.popupService.destroy();
+        }
+        this.subscription.unsubscribe();
+    }
+    selectAllCheckboxId() {
+        return this.idService.selectAllCheckboxId();
+    }
+    get selectAllCheckboxLabel() {
+        return this.contextService.localization.get('selectAllCheckboxLabel');
+    }
+    isFirstOnRow(column, index) {
+        const isTailing = (c) => c &&
+            (this.columnsForLevel(c.level).indexOf(c) > 0 || isTailing(c.parent));
+        return index === 0 && !this.groups.length && !this.detailTemplate && isTailing(column.parent);
+    }
+    logicalColumnIndex(column) {
+        const index = column.leafIndex;
+        if (isPresent(index)) {
+            return index + (isPresent(this.detailTemplate) ? 1 : 0);
+        }
+        return -1;
+    }
+    get showFilterMenu() {
+        return !this.columnMenu && hasFilterMenu(this.filterable);
+    }
+    get showFilterRow() {
+        return hasFilterRow(this.filterable);
+    }
+    showColumnMenu(column) {
+        return this.columnMenu && column.columnMenu &&
+            (this.columnMenuTemplate || column.columnMenuTemplates.length || hasItems(this.columnMenu, column));
+    }
+    isFilterable(column) {
+        return !isNullOrEmptyString(column.field) && column.filterable === true;
+    }
+    canDrop(draggable, target) {
+        return this.reorderable && rules({ draggable, target });
+    }
+    shouldActivate(column) {
+        const canReorder = this.isReorderable(column);
+        if (!canReorder && !isColumnComponent(column)) {
+            return false;
+        }
+        const groupable = this.isGroupable(column);
+        return groupable || canReorder;
+    }
+    isInteractive(column, prop) {
+        return !isNullOrEmptyString(column.field)
+            && isTruthy(this[prop]) && isTruthy(column[prop]);
+    }
+    isCheckboxColumn(column) {
+        return isCheckboxColumn(column) && !column.templateRef;
+    }
+    trackByIndex(index, _item) {
+        return index;
+    }
+    addStickyStyles(column) {
+        const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
+        return { ...column.headerStyle, ...stickyStyles };
+    }
+    toggleDirection(field, allowUnsort, initialDirection) {
+        const descriptor = this.sortDescriptor(field);
+        const [first, second] = directions(initialDirection);
+        let dir = first;
+        if (descriptor.dir === first) {
+            dir = second;
+        }
+        else if (descriptor.dir === second && allowUnsort) {
+            dir = undefined;
+        }
+        return { dir, field };
+    }
+    columnsForLevel(level) {
+        const columns = this.columns ? this.columns.filter(column => column.level === level) : [];
+        return sortColumns(columnsToRender(columns));
+    }
+    isColumnGroupComponent(column) {
+        return isColumnGroupComponent(column);
+    }
+    sortDescriptor(field) {
+        return this.sort.find(item => item.field === field) || { field };
+    }
+    get columnLevels() {
+        return new Array((this.totalColumnLevels || 0) + 1);
+    }
+    get leafColumns() {
+        return this._leafColumns;
+    }
+    isReorderable(column) {
+        return this.reorderable && column.reorderable;
+    }
+    isGroupable(column) {
+        return this.groupable && isColumnComponent(column) && column.groupable !== false;
+    }
+    attachTargets() {
+        if (this.targetSubscription) {
+            this.targetSubscription.unsubscribe();
+        }
+        this.targetSubscription = new Subscription();
+        const enterStream = merge(...this.dropTargets.map(target => target.enter));
+        const leaveStream = merge(...this.dropTargets.map(target => target.leave));
+        const dropStream = merge(...this.dropTargets.map(target => target.drop));
+        this.targetSubscription.add(enterStream.pipe(tap(({ target, draggable }) => {
+            if (draggable.context.type === 'groupIndicator') {
+                return;
+            }
+            const targetLocked = isTruthy(target.context.column.isLocked);
+            const draggableLocked = isTruthy(draggable.context.column.isLocked);
+            if (this.lockedColumnsCount > 0 || targetLocked || draggableLocked) {
+                this.hint.toggleLock(targetLocked);
+            }
+        }), filter(({ draggable, target }) => this.canDrop(draggable, target)), switchMap(this.trackMove.bind(this, leaveStream, dropStream)), map((e) => mergeObjects(e, { before: this.calculateBefore(e), changeContainer: e.changeContainer })), map(this.normalizeTarget.bind(this)), tap(this.enter.bind(this)), switchMap((args) => dropStream.pipe(map(() => args), takeUntil(leaveStream.pipe(tap(this.leave.bind(this)))))))
+            .subscribe(this.drop.bind(this)));
+    }
+    normalizeTarget(e) {
+        let target = e.target;
+        const parent = target.context.column.parent;
+        if (parent && parent.isSpanColumn) {
+            const arr = this.dropTargets.toArray();
+            const firstSpan = arr.find(t => t.context.column.parent === parent);
+            const index = arr.indexOf(firstSpan);
+            const adjust = e.before ? 0 : parent.childColumns.length - 1;
+            target = arr[index + adjust];
+        }
+        return mergeObjects(e, { target });
+    }
+    trackMove(leaveStream, dropStream, e) {
+        const column = e.target.context.column;
+        const levelColumns = this.columnsForLevel(column.level);
+        const index = levelColumns.indexOf(column);
+        const isFirst = (column.locked ? index === levelColumns.length - 1 : index === 0);
+        const changed = e.draggable.context.column.isLocked !== column.isLocked;
+        if (changed && isFirst) {
+            return e.draggable.drag
+                .pipe(takeUntil(leaveStream), takeUntil(dropStream), map(({ mouseEvent }) => mergeObjects({ changeContainer: true }, e, { mouseEvent })));
+        }
+        return of(mergeObjects({ changeContainer: changed }, e));
+    }
+    calculateBefore({ draggable, target, mouseEvent, changeContainer = false }) {
+        const targetElement = target.element.nativeElement;
+        let before = false;
+        if (changeContainer) {
+            const { left } = offset(targetElement);
+            const halfWidth = targetElement.offsetWidth / 2;
+            const middle = left + halfWidth;
+            before = middle > mouseEvent.pageX;
+            if (this.contextService.localization.rtl) {
+                before = !before;
+            }
+        }
+        else {
+            before = isTargetBefore(draggable.element.nativeElement, targetElement);
+        }
+        return before;
+    }
+    enter({ target, before }) {
+        this.hint.enable();
+        if (this.contextService.localization.rtl) {
+            before = !before;
+        }
+        this.cue.position(position(target.element.nativeElement, before));
+    }
+    leave() {
+        this.hint.disable();
+        this.cue.hide();
+    }
+    drop({ draggable, target, before, changeContainer }) {
+        this.reorderService.reorder({
+            before,
+            changeContainer,
+            source: draggable.context.column,
+            target: target.context.column
+        });
+    }
+}
+HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 }], target: i0.ɵɵFactoryTarget.Component });
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+    <ng-container>
+        <tr *ngFor="let i of columnLevels; let levelIndex = index"
+            kendoGridLogicalRow
+                [logicalRowIndex]="levelIndex"
+                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalCellsCount]="columns.length"
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns">
+            <th
+                class="k-group-cell k-header k-table-th"
+                role="presentation"
+                *ngFor="let g of groups">
+            </th>
             <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
                 *ngIf="detailTemplate?.templateRef"
@@ -15680,9 +16123,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * ```
  */
 class CheckboxColumnComponent extends ColumnBase {
-    constructor(parent, idService) {
+    constructor(selectionService, cellSelectionService, parent, idService) {
         super(parent, idService);
+        this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
         this.parent = parent;
+        /**
+         * Determines whether checkboxes will be rendered for rows which are marked as non-selectable. By default, such checkboxes are visible and disabled.
+         */
+        this.showDisabledCheckbox = true;
         /*
          * @hidden
          */
@@ -15691,9 +16140,15 @@ class CheckboxColumnComponent extends ColumnBase {
     get templateRef() {
         return this.template ? this.template.templateRef : undefined;
     }
+    /**
+     * @hidden
+     */
+    rowSelectable(rowIdx) {
+        return !this.selectionService.nonSelectableRows.has(rowIdx) && !this.cellSelectionService.nonSelectableRows.has(rowIdx);
+    }
 }
-CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxColumnComponent, isStandalone: true, selector: "kendo-grid-checkbox-column", inputs: { showSelectAll: "showSelectAll" }, providers: [
+CheckboxColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxColumnComponent, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CheckboxColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxColumnComponent, isStandalone: true, selector: "kendo-grid-checkbox-column", inputs: { showSelectAll: "showSelectAll", showDisabledCheckbox: "showDisabledCheckbox" }, providers: [
         {
             provide: ColumnBase,
             useExisting: forwardRef(() => CheckboxColumnComponent)
@@ -15712,7 +16167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     template: ``,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: ColumnBase, decorators: [{
                     type: SkipSelf
                 }, {
                     type: Host
@@ -15722,478 +16177,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     type: Optional
                 }] }]; }, propDecorators: { showSelectAll: [{
                 type: Input
+            }], showDisabledCheckbox: [{
+                type: Input
             }], template: [{
                 type: ContentChild,
                 args: [CellTemplateDirective, { static: false }]
             }] } });
 
-/**
- * Represents the row-selection checkbox of the Grid. The directive expects the
- * index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
- * `kendoGridSelectionCheckbox` to an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
- * with the directive, a [selectionChange](slug:api_grid_gridcomponent#toc-selectionChange)
- * event is triggered.
- *
- * @example
- * ```html
- * <kendo-grid ... >
- *   <kendo-grid-column>
- *     <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
- *       <input ... [kendoGridSelectionCheckbox]="rowIndex"/>
- *     </ng-template>
- *   </kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-class SelectionCheckboxDirective {
-    constructor(selectionService, aggregateService, el, renderer, ngZone) {
-        this.selectionService = selectionService;
-        this.aggregateService = aggregateService;
-        this.el = el;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.type = 'checkbox';
-        this.ngZone.runOutsideAngular(() => {
-            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
-            this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
-        });
-    }
-    ngAfterContentChecked() {
-        this.setCheckedState();
-    }
-    ngOnDestroy() {
-        if (this.destroyClick) {
-            this.destroyClick();
-        }
-        if (this.destroyKeyDown) {
-            this.destroyKeyDown();
-        }
-    }
-    onClick() {
-        if (this.selectionService.options.enabled) {
-            this.ngZone.run(() => {
-                const ev = this.selectionService.toggleByIndex(this.itemIndex);
-                ev.ctrlKey = true;
-                ev.shiftKey = false;
-                if (this.selectionService.options.cellAggregates) {
-                    ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
-                }
-                this.selectionService.changes.emit(ev);
-            });
-        }
-    }
-    onKeyDown(e) {
-        if (e.keyCode === Keys.Enter) {
-            this.onClick();
-        }
-    }
-    /*
-     * @hidden
-     */
-    setCheckedState() {
-        this.renderer.setProperty(this.el.nativeElement, 'checked', this.selectionService.isSelected(this.itemIndex));
-    }
-}
-SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-SelectionCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridSelectionCheckbox]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
-                type: Input,
-                args: ['kendoGridSelectionCheckbox']
-            }], type: [{
-                type: HostBinding,
-                args: ['attr.type']
-            }] } });
-
-/**
- * @hidden
- */
-class ChangeNotificationService {
-    constructor(ngZone) {
-        this.ngZone = ngZone;
-        this.changes = new EventEmitter();
-    }
-    notify() {
-        if (!this.subscription || this.subscription.closed) {
-            this.subscription = this.ngZone.onStable
-                .asObservable().pipe(take(1))
-                .subscribe(() => this.changes.emit());
-        }
-    }
-}
-ChangeNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ChangeNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
-
-/**
- * Represents the no-records template of the Grid. Provides an option to customize the
- * appearance of the item that is displayed when no data is present.
- * To define the no-records template, nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate`
- * directive inside `<kendo-grid>` [see example](slug:norecordtemplate_grid).
- *
- * @example
- * ```html
- * <kendo-grid [data]="data">
- *   <ng-template kendoGridNoRecordsTemplate>
- *     There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
- *   </ng-template>
- *   <kendo-grid-column field="ProductID"></kendo-grid-column>
- *   <kendo-grid-column field="ProductName"></kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-class NoRecordsTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-NoRecordsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NoRecordsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-NoRecordsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NoRecordsTemplateDirective, isStandalone: true, selector: "[kendoGridNoRecordsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NoRecordsTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridNoRecordsTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * @hidden
- */
-function defaultTrackBy(index, item) {
-    if (item.type === 'data' && item.isEditing) {
-        return item.data;
-    }
-    return index;
-}
-
-/**
- * @hidden
- */
-const NON_DATA_CELL_CLASSES = 'k-hierarchy-cell k-detail-cell k-group-cell';
-/**
- * @hidden
- */
-const NON_DATA_ROW_CLASSES = 'k-grouping-row k-group-footer k-detail-row k-grid-norecords';
-/**
- * @hidden
- */
-const IGNORE_TARGET_CLASSSES = 'k-icon k-svg-icon';
-/**
- * @hidden
- */
-const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';
-
-/**
- * @hidden
- */
-class CellSelectionService {
-    constructor(domEvents, aggregateService, localDataChangesService, navigationService) {
-        this.domEvents = domEvents;
-        this.aggregateService = aggregateService;
-        this.localDataChangesService = localDataChangesService;
-        this.navigationService = navigationService;
-        this.changes = new EventEmitter();
-        this.mouseUpEvent = new EventEmitter();
-        this.currentSelection = [];
-        this.active = false;
-        this.dragging = false;
-        this.dragSelectDeselect = false;
-        this.lastSelectionItem = { itemKey: 0, columnKey: 0 };
-        this.lastSelectionItemRowIndex = 0;
-        this.lastSelectionItemColIndex = 0;
-        this.addSubscriptions();
-    }
-    get enableMarquee() {
-        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
-        if (!this.settings || checkboxOnly) {
-            return false;
-        }
-        const selectableSettings = this.settings.selectable;
-        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
-            isPresent(selectableSettings) &&
-            selectableSettings.mode === 'multiple' &&
-            selectableSettings.cell &&
-            selectableSettings.enabled !== false &&
-            selectableSettings.drag;
-        return this.active && dragAndMultiple;
-    }
-    init(settings) {
-        this.settings = settings;
-        this.currentSelection = [];
-        if (settings.selectable && settings.selectable.enabled !== false) {
-            const iterator = this.getIterator();
-            let item = iterator.next();
-            while (!item.done) {
-                if (item.value && item.value.type === "data") {
-                    const rowArgs = {
-                        dataItem: item.value.data,
-                        index: item.value.index
-                    };
-                    settings.columns.forEach(col => {
-                        const selectedCellArgs = settings.cellSelected(rowArgs, col, col.leafIndex);
-                        if (selectedCellArgs.selected) {
-                            this.currentSelection.push(selectedCellArgs.item);
-                        }
-                    });
-                }
-                item = iterator.next();
-            }
-        }
-    }
-    isCellSelected(item, col) {
-        if (this.settings && this.active) {
-            const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
-            return this.options.enabled && selectedCellArgs.selected;
-        }
-        return false;
-    }
-    handleClick(item, event) {
-        if (this.dragging) {
-            this.dragging = false;
-            return;
-        }
-        let ev;
-        const ctrlKey = event.ctrlKey || event.metaKey;
-        if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {
-            ev = this.toggle(item);
-        }
-        else if (this.options.mode === "multiple") {
-            if (ctrlKey && !event.shiftKey) {
-                ev = this.toggle(item);
-            }
-            else if (event.shiftKey) {
-                const startRowIndex = Math.min(this.lastSelectionItemRowIndex, item.index);
-                const startColIndex = Math.min(this.lastSelectionItemColIndex, item.column.leafIndex);
-                const endRowIndex = Math.max(this.lastSelectionItemRowIndex, item.index);
-                const endColIndex = Math.max(this.lastSelectionItemColIndex, item.column.leafIndex);
-                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
-            }
-        }
-        if (!isPresent(ev)) {
-            ev = this.select(item);
-            this.currentSelection = [this.lastSelectionItem];
-        }
-        if (!ev.selectedCells.length && !ev.deselectedCells.length) {
-            return;
-        }
-        ev.ctrlKey = ctrlKey;
-        ev.shiftKey = event.shiftKey;
-        if (this.options.cellAggregates && !event.shiftKey) {
-            ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
-        }
-        if (ev.shiftKey) {
-            ev.rangeStartCell = this.lastSelectionItem;
-            ev.rangeEndCell = {
-                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
-            };
-        }
-        this.changes.emit(ev);
-    }
-    toggle(item) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        this.lastSelectionItem =
-            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
-        this.lastSelectionItemRowIndex = item.index;
-        this.lastSelectionItemColIndex = item.column.leafIndex;
-        if (this.isCellSelected(item, item.column)) {
-            deselectedCells.push(this.lastSelectionItem);
-        }
-        else {
-            selectedCells.push(this.lastSelectionItem);
-        }
-        return {
-            deselectedCells,
-            selectedCells
-        };
-    }
-    select(item) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        this.lastSelectionItem =
-            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
-        this.lastSelectionItemRowIndex = item.index;
-        this.lastSelectionItemColIndex = item.column.leafIndex;
-        if (!this.isCellSelected(item, item.column)) {
-            selectedCells.push(this.lastSelectionItem);
-        }
-        this.currentSelection.forEach((selectedItem) => {
-            if (selectedItem.itemKey !== this.lastSelectionItem.itemKey || selectedItem.columnKey !== this.lastSelectionItem.columnKey) {
-                deselectedCells.push(selectedItem);
-            }
-        });
-        return {
-            deselectedCells,
-            selectedCells
-        };
-    }
-    //Used to manually deselect removed items
-    deselect(removedItem) {
-        const iterator = this.getIterator();
-        let item = iterator.next();
-        let rowArgs;
-        while (!item.done) {
-            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
-                rowArgs = {
-                    dataItem: item.value.data,
-                    index: item.value.index
-                };
-                break;
-            }
-            item = iterator.next();
-        }
-        if (rowArgs) {
-            const cellsToRemove = this.currentSelection.filter(selectedItem => {
-                const contender = this.settings.cellSelected(rowArgs, null, null).item;
-                return selectedItem.itemKey === contender.itemKey;
-            });
-            if (cellsToRemove.length) {
-                const ev = {
-                    ctrlKey: false,
-                    deselectedCells: cellsToRemove,
-                    selectedCells: []
-                };
-                this.changes.emit(ev);
-            }
-        }
-    }
-    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        const selectionStartRow = Math.min(startRowIndex, endRowIndex);
-        const selectionStartCol = Math.min(startColIndex, endColIndex);
-        const selectionEndRow = Math.max(startRowIndex, endRowIndex);
-        const selectionEndCol = Math.max(startColIndex, endColIndex);
-        const iterator = this.getIterator();
-        let next = iterator.next();
-        while (!next.done) {
-            if (next.value && next.value.type === "data") {
-                const idx = next.value.index;
-                const data = next.value.data;
-                const rowArgs = {
-                    dataItem: data,
-                    index: idx
-                };
-                this.settings.columns.forEach(col => {
-                    const { item } = this.settings.cellSelected(rowArgs, col, col.leafIndex);
-                    const selected = this.isCellSelected(next.value, col);
-                    const isInRowRange = selectionStartRow <= idx && idx <= selectionEndRow;
-                    const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
-                    const isInSelectionRect = isInRowRange && isInColRange;
-                    if (!isInSelectionRect && selected) {
-                        deselectedCells.push(item);
-                    }
-                    if (isInSelectionRect && !selected) {
-                        selectedCells.push(item);
-                    }
-                });
-            }
-            next = iterator.next();
-        }
-        let cellAggregates;
-        if (this.options.cellAggregates) {
-            cellAggregates = this.aggregateService.onSelectionChange({ selectedCells, deselectedCells });
-        }
-        return {
-            deselectedCells,
-            selectedCells,
-            cellAggregates
-        };
+/**
+ * Represents the row-selection checkbox of the Grid. The directive expects the
+ * index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
+ * `kendoGridSelectionCheckbox` to an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * with the directive, a [selectionChange](slug:api_grid_gridcomponent#toc-selectionChange)
+ * event is triggered.
+ *
+ * @example
+ * ```html
+ * <kendo-grid ... >
+ *   <kendo-grid-column>
+ *     <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
+ *       <input ... [kendoGridSelectionCheckbox]="rowIndex"/>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class SelectionCheckboxDirective {
+    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone) {
+        this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
+        this.aggregateService = aggregateService;
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.type = 'checkbox';
+        this.ngZone.runOutsideAngular(() => {
+            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+            this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
+        });
     }
-    get options() {
-        const defaultOptions = {
-            cellAggregates: false,
-            checkboxOnly: false,
-            enabled: true,
-            mode: "multiple"
-        };
-        if (!isPresent(this.settings)) {
-            return defaultOptions;
-        }
-        if (typeof this.settings.selectable === 'boolean') {
-            return {
-                cellAggregates: false,
-                checkboxOnly: false,
-                enabled: this.settings.selectable,
-                mode: "multiple"
-            };
-        }
-        else {
-            return Object.assign(defaultOptions, this.settings.selectable);
-        }
+    ngAfterContentChecked() {
+        this.setCheckedState();
     }
     ngOnDestroy() {
-        this.removeSubscriptions();
+        if (this.destroyClick) {
+            this.destroyClick();
+        }
+        if (this.destroyKeyDown) {
+            this.destroyKeyDown();
+        }
     }
-    addSubscriptions() {
-        if (!this.cellClickSubscription) {
-            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
-                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
-                    if (this.active) {
-                        this.handleClick({ index: args.rowIndex, data: args.dataItem, column: args.column }, args.originalEvent);
-                    }
-                }
-            });
+    onClick(event) {
+        const nonSelectableRow = this.selectionService.nonSelectableRows.has(this.itemIndex) || this.cellSelectionService.nonSelectableRows.has(this.itemIndex);
+        if (nonSelectableRow || this.cellSelectionService.options.cell) {
+            event.preventDefault();
+            return;
         }
-        if (!this.mousedownSubscription) {
-            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
-                this.mouseDownEventArgs = args;
-                if (this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
-                    !this.options.checkboxOnly && args.originalEvent.shiftKey) {
-                    if (this.active) {
-                        args.originalEvent.preventDefault();
-                        this.navigationService.focusCellByElement(args.originalEvent.target);
-                    }
+        if (this.selectionService.options.enabled) {
+            this.ngZone.run(() => {
+                let ev;
+                const ctrlKey = event.ctrlKey || event.metaKey;
+                if (event.shiftKey) {
+                    const item = { index: this.itemIndex };
+                    ev = this.selectionService.addAllTo(item, ctrlKey);
                 }
-            });
-        }
-        if (this.localDataChangesService && !this.dataChangedSubscription) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
-                if (this.active) {
-                    if (isPresent(args.action) && args.action === 'remove') {
-                        this.deselect(args.item);
-                    }
+                else {
+                    ev = this.selectionService.toggleByIndex(this.itemIndex);
+                }
+                ev.ctrlKey = event.ctrlKey;
+                ev.shiftKey = event.shiftKey;
+                if (this.selectionService.options.cellAggregates) {
+                    ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
                 }
+                this.selectionService.changes.emit(ev);
             });
         }
     }
-    getIterator() {
-        const accessor = this.settings.view.accessor();
-        if (!accessor) {
-            return;
+    onKeyDown(e) {
+        if (e.keyCode === Keys.Enter) {
+            this.onClick(e);
         }
-        return accessor[iterator]();
     }
-    removeSubscriptions() {
-        if (this.cellClickSubscription) {
-            this.cellClickSubscription.unsubscribe();
-            this.cellClickSubscription = null;
-        }
-        if (this.mousedownSubscription) {
-            this.mousedownSubscription.unsubscribe();
-            this.mousedownSubscription = null;
-        }
-        if (this.dataChangedSubscription) {
-            this.dataChangedSubscription.unsubscribe();
-            this.dataChangedSubscription = null;
+    /*
+     * @hidden
+     */
+    setCheckedState() {
+        const isSelected = this.selectionService.nonSelectableRows.has(this.itemIndex) ? false : this.selectionService.isSelected(this.itemIndex);
+        this.renderer.setProperty(this.el.nativeElement, 'checked', isSelected);
+    }
+}
+SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SelectionCheckboxDirective, isStandalone: true, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectionCheckbox]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+                type: Input,
+                args: ['kendoGridSelectionCheckbox']
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }] } });
+
+/**
+ * @hidden
+ */
+class ChangeNotificationService {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        this.changes = new EventEmitter();
+    }
+    notify() {
+        if (!this.subscription || this.subscription.closed) {
+            this.subscription = this.ngZone.onStable
+                .asObservable().pipe(take(1))
+                .subscribe(() => this.changes.emit());
         }
     }
 }
-CellSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, deps: [{ token: DomEventsService }, { token: CellSelectionAggregateService }, { token: LocalDataChangesService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
-CellSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CellSelectionService, decorators: [{
+ChangeNotificationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ChangeNotificationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChangeNotificationService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: CellSelectionAggregateService }, { type: LocalDataChangesService }, { type: NavigationService }]; } });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
+
+/**
+ * Represents the no-records template of the Grid. Provides an option to customize the
+ * appearance of the item that is displayed when no data is present.
+ * To define the no-records template, nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate`
+ * directive inside `<kendo-grid>` [see example](slug:norecordtemplate_grid).
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="data">
+ *   <ng-template kendoGridNoRecordsTemplate>
+ *     There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
+ *   </ng-template>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName"></kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class NoRecordsTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+NoRecordsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NoRecordsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+NoRecordsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: NoRecordsTemplateDirective, isStandalone: true, selector: "[kendoGridNoRecordsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NoRecordsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridNoRecordsTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+function defaultTrackBy(index, item) {
+    if (item.type === 'data' && item.isEditing) {
+        return item.data;
+    }
+    return index;
+}
+
+/**
+ * @hidden
+ */
+const NON_DATA_CELL_CLASSES = 'k-hierarchy-cell k-detail-cell k-group-cell';
+/**
+ * @hidden
+ */
+const NON_DATA_ROW_CLASSES = 'k-grouping-row k-group-footer k-detail-row k-grid-norecords';
+/**
+ * @hidden
+ */
+const IGNORE_TARGET_CLASSSES = 'k-icon k-svg-icon';
+/**
+ * @hidden
+ */
+const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';
 
 /**
  * @hidden
@@ -16279,6 +16449,9 @@ class CellComponent {
     get isRowReorderColumn() {
         return isRowReorderColumn(this.column) && !this.column.templateRef;
     }
+    get isRowSelectable() {
+        return this.column.rowSelectable(this._rowIndex);
+    }
     get isColumnEditable() {
         if (!this.column || this.isCommand(this.column)) {
             return false;
@@ -16340,13 +16513,25 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
                     </ng-container>
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [attr.aria-label]="selectionCheckboxLabel" />
-                        </span>
+                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    class="k-checkbox k-checkbox-md k-rounded-md"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [attr.aria-label]="selectionCheckboxLabel" />
+                            </span>
+                        </ng-container>
+                        <ng-template #nonSelectableRow>
+                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
+                                <input
+                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [attr.aria-label]="selectionCheckboxLabel"
+                                    [disabled]="true" />
+                            </span>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
                         <kendo-icon-wrapper
@@ -16425,13 +16610,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     </ng-container>
                     <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
                     <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <span class="k-checkbox-wrap">
-                            <input
-                                class="k-checkbox k-checkbox-md k-rounded-md"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [attr.aria-label]="selectionCheckboxLabel" />
-                        </span>
+                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
+                            <span class="k-checkbox-wrap">
+                                <input
+                                    class="k-checkbox k-checkbox-md k-rounded-md"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [attr.aria-label]="selectionCheckboxLabel" />
+                            </span>
+                        </ng-container>
+                        <ng-template #nonSelectableRow>
+                            <span class="k-checkbox-wrap" *ngIf="column.showDisabledCheckbox">
+                                <input
+                                    class="k-checkbox k-checkbox-md k-rounded-md k-disabled"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [attr.aria-label]="selectionCheckboxLabel"
+                                    [disabled]="true" />
+                            </span>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngIf="isRowReorderColumn && !isNew">
                         <kendo-icon-wrapper
@@ -16642,12 +16839,17 @@ class TableBodyComponent {
     isOdd(item) {
         return item.index % 2 !== 0;
     }
-    isSelectable() {
-        return this.selectable && this.selectable.enabled !== false;
+    isSelectable(args) {
+        const rowSelectable = this.isRowSelectable(args);
+        const selectionEnabled = this.selectable && this.selectable.enabled !== false;
+        return selectionEnabled && rowSelectable;
     }
     isRowSelected(item) {
         return this.selectionService.isSelected(item.index);
     }
+    isRowSelectable(args) {
+        return this.selectionService.settings?.isRowSelectable(args) || this.cellSelectionService.settings?.isRowSelectable(args);
+    }
     trackByWrapper(index, item) {
         if (item.type === 'data') {
             item.isEditing = this.editService.hasEdited(item.index);
@@ -16805,6 +17007,10 @@ class TableBodyComponent {
             if (!focusable && !matchesNodeName('label')(target) && !hasClasses(target, IGNORE_TARGET_CLASSSES) &&
                 !closestInScope(target, matchesClasses(IGNORE_CONTAINER_CLASSES), cell)) {
                 const args = this.cellClickArgs(cell, row, eventArg);
+                const selectionEnabled = this.selectable && this.selectable.enabled !== false;
+                if (selectionEnabled && !this.isRowSelectable({ index: args.rowIndex, dataItem: args.dataItem })) {
+                    return;
+                }
                 if (eventArg.type === 'mousedown' || eventArg.type === 'touchstart') {
                     this.domEvents.cellMousedown.emit(args);
                 }
@@ -16977,9 +17183,9 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable() && isRowSelected(item) : undefined"
+            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
-            [class.k-selected]="isSelectable() && isRowSelected(item)">
+            [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
@@ -17022,10 +17228,10 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
                     [colSpan]="column.colspan"
                     [attr.role]="column.tableCellsRole"
                     class="k-table-td"
-                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable() ? isAriaSelected(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
-                    [class.k-touch-action-none]="isSelectable() && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable() && $any(selectable).drag)"
+                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -17206,9 +17412,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable() && isRowSelected(item) : undefined"
+            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
-            [class.k-selected]="isSelectable() && isRowSelected(item)">
+            [class.k-selected]="isSelectable({ dataItem: item.data, index: $any(item).index }) && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
@@ -17251,10 +17457,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [colSpan]="column.colspan"
                     [attr.role]="column.tableCellsRole"
                     class="k-table-td"
-                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable() ? isAriaSelected(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable({ dataItem: item.data, index: $any(item).index }) ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
-                    [class.k-touch-action-none]="isSelectable() && $any(selectable).drag"
-                    [class.k-touch-action-auto]="!(isSelectable() && $any(selectable).drag)"
+                    [class.k-touch-action-none]="isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag"
+                    [class.k-touch-action-auto]="!(isSelectable({ dataItem: item.data, index: $any(item).index }) && $any(selectable).drag)"
                 [ngClass]="column.cssClass"
                 [class.k-grid-edit-cell]="isEditingCell($any(item).index, column)"
                 [ngStyle]="column.sticky ? addStickyColumnStyles(column) : column.style"
@@ -19409,8 +19615,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1727353679,
-    version: '16.11.0-develop.1',
+    publishDate: 1727423166,
+    version: '16.11.0-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -19902,6 +20108,9 @@ class Selection {
         if (!isPresent(this.ctx.grid.rowSelected)) {
             this.ctx.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
         }
+        if (!isPresent(this.ctx.grid.isRowSelectable)) {
+            this.ctx.grid.isRowSelectable = (_row) => Boolean(this.ctx.grid.selectable);
+        }
         if (!isPresent(this.ctx.grid.cellSelected)) {
             this.ctx.grid.cellSelected = (row, column, colIndex) => {
                 const contender = this.getSelectionItem(row, column, colIndex);
@@ -22766,11 +22975,16 @@ class GridComponent {
         this._data = [];
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
+        this._isRowSelectable = null;
         this._cellSelected = null;
         this._rowReorderable = false;
         this._navigable = [];
         this._size = 'medium';
         this._loading = false;
+        /**
+         * @hidden
+         */
+        this.blockArrowSelection = false;
         this.rtl = false;
         this._rowClass = () => null;
         const isValid = validatePackage(packageMetadata);
@@ -22817,6 +23031,9 @@ class GridComponent {
      */
     set data(value) {
         this._data = value;
+        if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
+            this.blockArrowSelection = false;
+        }
         if (this.notifyTimeout) {
             clearTimeout(this.notifyTimeout);
             this.notifyTimeout = null;
@@ -23042,6 +23259,19 @@ class GridComponent {
     get rowSelected() {
         return this._rowSelected;
     }
+    /**
+     * Defines a Boolean function that is executed for each data row in the component.
+     * Determines whether the row will be selectable.
+     */
+    set isRowSelectable(fn) {
+        if (isDevMode() && typeof fn !== 'function') {
+            throw new Error(GridConfigurationErrorMessages.functionType('isRowSelectable', fn));
+        }
+        this._isRowSelectable = fn;
+    }
+    get isRowSelectable() {
+        return this._isRowSelectable;
+    }
     /**
      * Defines a function that determines the selected state of a data cell.
      * Returns an object with `selected` and `item` properties.
@@ -23844,6 +24074,12 @@ class GridComponent {
     get flatData() {
         return isArray(this.data) ? this.data : this.data.data;
     }
+    /**
+     * @hidden
+     */
+    updateNavigationMetadata() {
+        this.navigationService.metadata = this.navigationMetadata();
+    }
     /**
      * @hidden
      */
@@ -23959,6 +24195,7 @@ class GridComponent {
         activeService.init({
             cellSelected: cellSelectionMode ? this.cellSelected : undefined,
             rowSelected: cellSelectionMode ? undefined : this.rowSelected,
+            isRowSelectable: this.isRowSelectable,
             selectable: this.selectable,
             view: this.view,
             columns: cellSelectionMode ? this.columnList.toArray() : undefined
@@ -24075,6 +24312,9 @@ class GridComponent {
                 .subscribe(x => {
                 this.closeCell();
                 this.cancelCell();
+                if (this.selectable && this.selectableSettings?.enabled && this.isVirtual) {
+                    this.blockArrowSelection = true;
+                }
                 this.dataStateChange.emit(x);
             });
     }
@@ -24260,9 +24500,6 @@ class GridComponent {
         const headerRows = this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
         return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer);
     }
-    updateNavigationMetadata() {
-        this.navigationService.metadata = this.navigationMetadata();
-    }
     applyAutoSize() {
         const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
         if (cols.length > 0) {
@@ -24366,7 +24603,7 @@ class GridComponent {
     }
 }
 GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1$2.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", 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", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", 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", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -25692,6 +25929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], rowSelected: [{
                 type: Input
+            }], isRowSelectable: [{
+                type: Input
             }], cellSelected: [{
                 type: Input
             }], resizable: [{
@@ -26020,6 +26259,7 @@ class DataBindingDirective {
     }
     updateGridData() {
         this.grid.data = this.process(this.state);
+        this.grid.updateNavigationMetadata();
         this.dataChanged = false;
     }
 }