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

package/esm2020/selection/cell-selection.service.mjs

@@ -27,6 +27,7 @@ export class CellSelectionService {
         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 };
@@ -48,9 +49,13 @@ export class CellSelectionService {
             selectableSettings.drag;
         return this.active && dragAndMultiple;
     }
+    get hasNonSelectable() {
+        return this.nonSelectableRows.size > 0;
+    }
     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();
@@ -65,6 +70,9 @@ export class CellSelectionService {
                         if (selectedCellArgs.selected) {
                             this.currentSelection.push(selectedCellArgs.item);
                         }
+                        if (!settings.isRowSelectable(rowArgs)) {
+                            this.nonSelectableRows.set(rowArgs.index, rowArgs.dataItem);
+                        }
                     });
                 }
                 item = iterator.next();
@@ -74,7 +82,7 @@ export class CellSelectionService {
     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 this.options.enabled && selectedCellArgs.selected && !this.nonSelectableRows.has(item.index);
         }
         return false;
     }
@@ -89,7 +97,7 @@ export class CellSelectionService {
             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) {
@@ -130,7 +138,7 @@ export class CellSelectionService {
         if (this.isCellSelected(item, item.column)) {
             deselectedCells.push(this.lastSelectionItem);
         }
-        else {
+        else if (!this.nonSelectableRows.has(item.index)) {
             selectedCells.push(this.lastSelectionItem);
         }
         return {
@@ -145,7 +153,7 @@ export class CellSelectionService {
             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)) {
+        if (!this.isCellSelected(item, item.column) && !this.nonSelectableRows.has(item.index)) {
             selectedCells.push(this.lastSelectionItem);
         }
         this.currentSelection.forEach((selectedItem) => {
@@ -176,7 +184,7 @@ export class CellSelectionService {
         if (rowArgs) {
             const cellsToRemove = this.currentSelection.filter(selectedItem => {
                 const contender = this.settings.cellSelected(rowArgs, null, null).item;
-                return selectedItem.itemKey === contender.itemKey;
+                return selectedItem.itemKey === contender.itemKey || this.nonSelectableRows.has(rowArgs.index);
             });
             if (cellsToRemove.length) {
                 const ev = {
@@ -214,7 +222,7 @@ export class CellSelectionService {
                     if (!isInSelectionRect && selected) {
                         deselectedCells.push(item);
                     }
-                    if (isInSelectionRect && !selected) {
+                    if (isInSelectionRect && !selected && !this.nonSelectableRows.has(idx)) {
                         selectedCells.push(item);
                     }
                 });
@@ -236,7 +244,8 @@ export class CellSelectionService {
             cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
-            mode: "multiple"
+            mode: "multiple",
+            metaKeyMultiSelect: true
         };
         if (!isPresent(this.settings)) {
             return defaultOptions;
@@ -246,7 +255,8 @@ export class CellSelectionService {
                 cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
-                mode: "multiple"
+                mode: "multiple",
+                metaKeyMultiSelect: true
             };
         }
         else {

package/esm2020/selection/selectall-checkbox.directive.mjs

@@ -2,13 +2,14 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { detectIE } from './../utils';
 import { Directive, HostBinding, Renderer2, ElementRef, Input, Output, EventEmitter, NgZone } from '@angular/core';
 import { SelectionService } from './selection.service';
 import { isPresent } from '../utils';
 import { hasObservers } from '@progress/kendo-angular-common';
+import { CellSelectionService } from './cell-selection.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
+import * as i2 from "./cell-selection.service";
 /**
  * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
  *
@@ -24,8 +25,9 @@ import * as i1 from "./selection.service";
  * ```
  */
 export class SelectAllCheckboxDirective {
-    constructor(selectionService, el, renderer, ngZone) {
+    constructor(selectionService, cellSelectionService, el, renderer, ngZone) {
         this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
         this.el = el;
         this.renderer = renderer;
         this.ngZone = ngZone;
@@ -55,11 +57,11 @@ export class SelectAllCheckboxDirective {
      * @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 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';
+        const enabledAndMultiple = options.enabled && options.mode === 'multiple' && !this.cellSelectionService.active;
         const shouldEmitSelectAll = hasObservers(this.selectAllChange);
         if (enabledAndMultiple || shouldEmitSelectAll) {
             this.ngZone.run(() => {
@@ -67,7 +69,7 @@ export class SelectAllCheckboxDirective {
                     this.selectionService.updateAll(isChecked);
                 }
                 if (shouldEmitSelectAll) {
-                    this.selectAllChange.emit(isChecked ? 'checked' : 'unchecked');
+                    this.selectAllChange.emit(checkboxState);
                 }
             });
         }
@@ -95,7 +97,7 @@ export class SelectAllCheckboxDirective {
         }
     }
 }
-SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.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,
@@ -103,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: '[kendoGridSelectAllCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
                 type: Input
             }], selectAllChange: [{
                 type: Output

package/esm2020/selection/selection-checkbox.directive.mjs

@@ -6,9 +6,11 @@ import { Directive, HostBinding, ElementRef, Input, Renderer2, NgZone } from '@a
 import { SelectionService } from './selection.service';
 import { Keys } from '@progress/kendo-angular-common';
 import { CellSelectionAggregateService } from '../aggregates/selection-aggregate.service';
+import { CellSelectionService } from './cell-selection.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
-import * as i2 from "../aggregates/selection-aggregate.service";
+import * as i2 from "./cell-selection.service";
+import * as i3 from "../aggregates/selection-aggregate.service";
 /**
  * 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
@@ -28,8 +30,9 @@ import * as i2 from "../aggregates/selection-aggregate.service";
  * ```
  */
 export class SelectionCheckboxDirective {
-    constructor(selectionService, aggregateService, el, renderer, ngZone) {
+    constructor(selectionService, cellSelectionService, aggregateService, el, renderer, ngZone) {
         this.selectionService = selectionService;
+        this.cellSelectionService = cellSelectionService;
         this.aggregateService = aggregateService;
         this.el = el;
         this.renderer = renderer;
@@ -51,12 +54,25 @@ export class SelectionCheckboxDirective {
             this.destroyKeyDown();
         }
     }
-    onClick() {
+    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.selectionService.options.enabled) {
             this.ngZone.run(() => {
-                const ev = this.selectionService.toggleByIndex(this.itemIndex);
-                ev.ctrlKey = true;
-                ev.shiftKey = false;
+                let ev;
+                const ctrlKey = event.ctrlKey || event.metaKey;
+                if (event.shiftKey) {
+                    const item = { index: this.itemIndex };
+                    ev = this.selectionService.addAllTo(item, ctrlKey);
+                }
+                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);
                 }
@@ -66,17 +82,18 @@ export class SelectionCheckboxDirective {
     }
     onKeyDown(e) {
         if (e.keyCode === Keys.Enter) {
-            this.onClick();
+            this.onClick(e);
         }
     }
     /*
      * @hidden
      */
     setCheckedState() {
-        this.renderer.setProperty(this.el.nativeElement, 'checked', this.selectionService.isSelected(this.itemIndex));
+        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: i1.SelectionService }, { token: i2.CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i2.CellSelectionService }, { token: i3.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,
@@ -84,7 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: '[kendoGridSelectionCheckbox]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i2.CellSelectionService }, { type: i3.CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
                 type: Input,
                 args: ['kendoGridSelectionCheckbox']
             }], type: [{

package/esm2020/selection/selection-default.mjs

@@ -50,6 +50,9 @@ export 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);

package/esm2020/selection/selection.service.mjs

@@ -28,6 +28,7 @@ export class SelectionService {
         this.ctxService = ctxService;
         this.changes = new EventEmitter();
         this.currentSelection = [];
+        this.nonSelectableRows = new Map();
         this.selectAllChecked = false;
         this.active = false;
         this.dragging = false;
@@ -48,6 +49,9 @@ export class SelectionService {
             selectableSettings.drag;
         return this.active && dragAndMultiple;
     }
+    get hasNonSelectable() {
+        return this.nonSelectableRows.size > 0;
+    }
     init(settings) {
         this.settings = settings;
         if (!isPresent(this.lastSelectionStartIndex)) {
@@ -55,6 +59,7 @@ export 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;
@@ -71,6 +76,10 @@ export class SelectionService {
                     else {
                         this._selectAllState = undefined;
                     }
+                    if (!settings.isRowSelectable(rowArgs)) {
+                        this.nonSelectableRows.set(rowArgs.index, rowArgs.dataItem);
+                        this._selectAllState = undefined;
+                    }
                 }
                 item = iterator.next();
             }
@@ -81,7 +90,7 @@ export 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) {
@@ -95,7 +104,7 @@ export 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) {
@@ -132,9 +141,13 @@ export 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
@@ -167,7 +180,7 @@ export 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) => {
@@ -190,7 +203,7 @@ export 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],
@@ -216,12 +229,16 @@ export 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
@@ -237,11 +254,13 @@ export 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();
@@ -249,6 +268,10 @@ export 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,
@@ -274,7 +297,7 @@ export 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);
                 }
             }
@@ -284,6 +307,10 @@ export 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,
@@ -303,7 +330,8 @@ export class SelectionService {
             cellAggregates: false,
             checkboxOnly: false,
             enabled: true,
-            mode: "multiple"
+            mode: "multiple",
+            metaKeyMultiSelect: true
         };
         if (!isPresent(this.settings)) {
             return defaultOptions;
@@ -313,7 +341,8 @@ export class SelectionService {
                 cellAggregates: false,
                 checkboxOnly: false,
                 enabled: this.settings.selectable,
-                mode: "multiple"
+                mode: "multiple",
+                metaKeyMultiSelect: true
             };
         }
         else {