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

package/common/dom-events.service.d.ts

@@ -13,6 +13,7 @@ export declare class DomEventsService {
     cellMouseup: EventEmitter<any>;
     click: EventEmitter<any>;
     keydown: EventEmitter<any>;
+    shiftKeyup: EventEmitter<any>;
     focus: EventEmitter<any>;
     focusIn: EventEmitter<any>;
     focusOut: EventEmitter<any>;

package/esm2022/common/dom-events.service.mjs

@@ -13,6 +13,7 @@ export class DomEventsService {
     cellMouseup = new EventEmitter();
     click = new EventEmitter();
     keydown = new EventEmitter();
+    shiftKeyup = new EventEmitter();
     focus = new EventEmitter();
     focusIn = new EventEmitter();
     focusOut = new EventEmitter();

package/esm2022/grid.component.mjs

@@ -1990,6 +1990,11 @@ export class GridComponent {
             const keydownSubscription = this.renderer.listen(wrapper, 'keydown', (args) => {
                 this.domEvents.keydown.emit(args);
             });
+            const shiftKeyupSubscription = this.renderer.listen(wrapper, 'keyup', (args) => {
+                if (args.key === 'Shift') {
+                    this.domEvents.shiftKeyup.emit(args);
+                }
+            });
             // focusIn and focusOut are relative to the element with ARIA role "grid"
             let focused = false;
             const focusInSubscription = this.renderer.listen(ariaRoot, 'focusin', (args) => {
@@ -2004,6 +2009,7 @@ export class GridComponent {
                 const outside = !closest(next, (node) => node === ariaRoot);
                 if (outside) {
                     this.domEvents.focusOut.emit(args);
+                    this.domEvents.shiftKeyup.emit(args);
                     focused = false;
                 }
             });
@@ -2014,6 +2020,7 @@ export class GridComponent {
                 windowBlurSubscription();
                 clickSubscription();
                 keydownSubscription();
+                shiftKeyupSubscription();
                 focusInSubscription();
                 focusOutSubscription();
             };

package/esm2022/navigation/navigation.service.mjs

@@ -171,6 +171,8 @@ export class NavigationService {
     tableIsNavigable = false;
     toolbarIsNavigable = false;
     lastCellRowIndex;
+    isShiftPressed = false;
+    currentSelection = [];
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
@@ -215,6 +217,10 @@ export class NavigationService {
             .subscribe(() => this.cursor.reset(0, 0)));
         this.subs.add(this.domEvents.keydown
             .subscribe(args => this.onKeydown(args)));
+        this.subs.add(this.domEvents.shiftKeyup
+            .subscribe(() => {
+            this.isShiftPressed = false;
+        }));
         this.subs.add(this.domEvents.keydown.pipe(filter(args => args.keyCode === Keys.Tab && this.mode === 2 /* NavigationMode.Content */), switchMapTo(this.domEvents.focusOut.pipe(takeUntil(
         // Timeout if focusOut doesn't fire very soon
         interval(0).pipe(take(1))))))
@@ -452,12 +458,23 @@ export class NavigationService {
         let step = modifier ? 5 : 1;
         const rowspan = +args.target?.getAttribute('rowspan');
         let rowspanOffset = 0;
+        let startNewSelection = false;
+        const allowMultipleRanges = (this.ctx.grid.selectionService.active && this.ctx.grid.selectableSettings?.multipleRanges) ||
+            (this.ctx.grid.cellSelectionService.active && this.ctx.grid.cellSelectionService?.options?.multipleRanges);
+        if (!allowMultipleRanges) {
+            this.currentSelection = [];
+        }
         if (!this.onCellKeydown(args)) {
             return;
         }
         const row = this.cursor.row;
         const dir = args.keyCode === Keys.ArrowDown ? 'Down' : 'Up';
         const right = args.keyCode === Keys.ArrowRight;
+        const isArrowKey = args.code === 'ArrowDown' || args.code === 'ArrowUp' || args.code === 'ArrowLeft' || args.code === 'ArrowRight';
+        if (!this.isShiftPressed && args.shiftKey && isArrowKey) {
+            startNewSelection = true;
+            this.isShiftPressed = true;
+        }
         switch (args.keyCode) {
             case Keys.ArrowDown:
             case Keys.ArrowUp:
@@ -470,9 +487,10 @@ export class NavigationService {
                         return;
                     }
                     preventDefault = this.cursor[`move${dir}`](step);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
                     if (this.activeRow?.dataItem) {
                         const sign = dir === 'Down' ? 1 : -1;
-                        this.handleVerticalArrowSelection(sign * step);
+                        this.handleVerticalArrowSelection(sign * step, preserveCurrentSelection);
                     }
                 }
                 else {
@@ -491,7 +509,8 @@ export class NavigationService {
                         return;
                     }
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
-                    this.handleHorizontalArrowSelection(args);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
+                    this.handleHorizontalArrowSelection(args, preserveCurrentSelection);
                 }
                 else {
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
@@ -694,7 +713,7 @@ export class NavigationService {
         this.leaveCell();
         this.cursor.reset();
     }
-    handleVerticalArrowSelection(args) {
+    handleVerticalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
         if (cellSelectionEnabled || rowSelectionEnabled) {
@@ -704,14 +723,15 @@ export class NavigationService {
             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);
+                const startRowIndex = this.activeRow.dataRowIndex - args;
+                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item, preserveSelection, startRowIndex, colIdx) : this.handleMultipleArrowRowSelection(item, preserveSelection, startRowIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleHorizontalArrowSelection(args) {
+    handleHorizontalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         if (cellSelectionEnabled) {
             const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
@@ -723,27 +743,37 @@ export class NavigationService {
                 return;
             }
             if (selectionService.options.mode === 'multiple') {
-                this.handleMultipleArrowCellSelection(item);
+                const startColumnIndex = args.key === 'ArrowRight' ? colIdx - 1 : colIdx + 1;
+                this.handleMultipleArrowCellSelection(item, preserveSelection, row.dataRowIndex, startColumnIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleMultipleArrowCellSelection(item) {
+    handleMultipleArrowCellSelection(item, preserveSelection, startRow, startColumn) {
         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);
+        const startRowIndex = preserveSelection ? startRow : Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const startColIndex = preserveSelection ? startColumn : Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const endRowIndex = preserveSelection ? item.index : Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const endColIndex = preserveSelection ? item.column.leafIndex : Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        if (preserveSelection) {
+            cellSelectionService.lastSelectionItemRowIndex = startRow;
+            cellSelectionService.lastSelectionItemColIndex = startColumn;
+            this.currentSelection = cellSelectionService.currentSelection;
+        }
+        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection, this.currentSelection);
         cellSelectionService.changes.emit(ev);
     }
-    handleMultipleArrowRowSelection(item) {
+    handleMultipleArrowRowSelection(item, preserveSelection, startRow) {
         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);
+        const startRowIndex = preserveSelection ? startRow : Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
+        const endRowIndex = preserveSelection ? item.index : Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
+        if (preserveSelection) {
+            rowSelectionService.lastSelectionStartIndex = startRow;
+            this.currentSelection = rowSelectionService.currentSelection;
+        }
+        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex, preserveSelection, this.currentSelection);
         rowSelectionService.changes.emit(ev);
     }
     calculateRowspanOffset(direction, cellRowspan) {

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1743598444,
-    version: '18.4.1-develop.2',
+    publishDate: 1743748634,
+    version: '18.5.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, EventEmitter } from '@angular/core';
-import { iterator } from '../utils';
+import { iterator, isMultipleRangesEnabled } from '../utils';
 import { isPresent } from '../utils';
 import { DomEventsService } from '../common/dom-events.service';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
@@ -116,7 +116,12 @@ export class CellSelectionService {
                 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);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveCurrentSelection);
+                if (preserveCurrentSelection) {
+                    this.lastSelectionItemRowIndex = item.index;
+                    this.lastSelectionItemColIndex = item.column.leafIndex;
+                }
             }
         }
         if (!isPresent(ev)) {
@@ -207,7 +212,7 @@ export class CellSelectionService {
             }
         }
     }
-    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
+    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection = false, existingSelections = []) {
         const selectedCells = [];
         const deselectedCells = [];
         const selectionStartRow = Math.min(startRowIndex, endRowIndex);
@@ -231,7 +236,10 @@ export class CellSelectionService {
                     const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
                     const isInSelectionRect = isInRowRange && isInColRange;
                     if (!isInSelectionRect && selected) {
-                        deselectedCells.push(item);
+                        const deselectCell = !(preserveSelection || existingSelections.find((value) => value && value.itemKey === item.itemKey && value.columnKey === item.columnKey));
+                        if (deselectCell) {
+                            deselectedCells.push(item);
+                        }
                     }
                     if (isInSelectionRect && !selected && !this.nonSelectableRows.has(idx)) {
                         selectedCells.push(item);

package/esm2022/selection/marquee.directive.mjs

@@ -9,6 +9,7 @@ import { SelectionService } from './selection.service';
 import { CellSelectionService } from './cell-selection.service';
 import { take, delay } from 'rxjs/operators';
 import { merge } from 'rxjs';
+import { isMultipleRangesEnabled } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-common";
 import * as i2 from "./selection.service";
@@ -115,13 +116,17 @@ export class GridMarqueeDirective {
     }
     endSelection(args) {
         if (args.type === 'mouseup' || args.type === 'touchend') {
+            const modifier = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+            const preserveCurrentSelection = modifier &&
+                (isMultipleRangesEnabled(this.selection.settings) ||
+                    isMultipleRangesEnabled(this.cellSelection.settings));
             if (this.cellSelection.active) {
                 this.cellSelection.dragging = true;
-                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex));
+                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex, preserveCurrentSelection));
             }
             else if (this.selection.active) {
                 this.selection.dragging = true;
-                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex));
+                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex, preserveCurrentSelection));
             }
         }
         this.clean();

package/esm2022/selection/selection.service.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, EventEmitter } from '@angular/core';
 import { iterator } from '../utils';
-import { isPresent } from '../utils';
+import { isPresent, isMultipleRangesEnabled } from '../utils';
 import { DomEventsService } from '../common/dom-events.service';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { NavigationService } from '../navigation/navigation.service';
@@ -121,7 +121,8 @@ export class SelectionService {
                 ev = this.toggle(item);
             }
             else if (event.shiftKey) {
-                ev = this.addAllTo(item, ctrlKey);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.addAllTo(item, ctrlKey, preserveCurrentSelection);
             }
         }
         if (!isPresent(ev)) {
@@ -228,7 +229,7 @@ export class SelectionService {
             item = iterator.next();
         }
     }
-    addAllTo(item, ctrlKey) {
+    addAllTo(item, ctrlKey, preserveSelection = false) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(this.lastSelectionStartIndex, item.index);
@@ -239,7 +240,7 @@ export class SelectionService {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
-                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
+                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey && !preserveSelection) {
                     deselectedRows.push(rowArgs);
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
@@ -296,7 +297,7 @@ export class SelectionService {
         }
         this.changes.emit(ev);
     }
-    selectRange(startIndex, endIndex) {
+    selectRange(startIndex, endIndex, preserveSelection, existingSelections = []) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(startIndex, endIndex);
@@ -308,7 +309,10 @@ export class SelectionService {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
                 if ((idx < start || idx > end) && this.isSelected(idx)) {
-                    deselectedRows.push(rowArgs);
+                    const deselectRow = !(preserveSelection || existingSelections.find((value) => value && value.dataItem === rowArgs.dataItem && value.index === rowArgs.index));
+                    if (deselectRow) {
+                        deselectedRows.push(rowArgs);
+                    }
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);

package/esm2022/utils.mjs

@@ -190,3 +190,12 @@ const findRowSpan = (data, index, field) => {
     }
     return rowspan;
 };
+/**
+ * @hidden
+ * Determines whether selection of multiple ranges is enabled in the selectable settings.
+ */
+export const isMultipleRangesEnabled = (selectableSettings) => {
+    return selectableSettings &&
+        typeof selectableSettings === 'object' &&
+        selectableSettings.selectable.multipleRanges;
+};

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

@@ -506,6 +506,15 @@ const findRowSpan = (data, index, field) => {
     }
     return rowspan;
 };
+/**
+ * @hidden
+ * Determines whether selection of multiple ranges is enabled in the selectable settings.
+ */
+const isMultipleRangesEnabled = (selectableSettings) => {
+    return selectableSettings &&
+        typeof selectableSettings === 'object' &&
+        selectableSettings.selectable.multipleRanges;
+};
 
 /**
  * @hidden
@@ -1416,6 +1425,7 @@ class DomEventsService {
     cellMouseup = new EventEmitter();
     click = new EventEmitter();
     keydown = new EventEmitter();
+    shiftKeyup = new EventEmitter();
     focus = new EventEmitter();
     focusIn = new EventEmitter();
     focusOut = new EventEmitter();
@@ -3452,6 +3462,8 @@ class NavigationService {
     tableIsNavigable = false;
     toolbarIsNavigable = false;
     lastCellRowIndex;
+    isShiftPressed = false;
+    currentSelection = [];
     get activeDataRow() {
         return Math.max(0, this.activeRowIndex - this.meta.headerRows);
     }
@@ -3496,6 +3508,10 @@ class NavigationService {
             .subscribe(() => this.cursor.reset(0, 0)));
         this.subs.add(this.domEvents.keydown
             .subscribe(args => this.onKeydown(args)));
+        this.subs.add(this.domEvents.shiftKeyup
+            .subscribe(() => {
+            this.isShiftPressed = false;
+        }));
         this.subs.add(this.domEvents.keydown.pipe(filter(args => args.keyCode === Keys.Tab && this.mode === 2 /* NavigationMode.Content */), switchMapTo(this.domEvents.focusOut.pipe(takeUntil(
         // Timeout if focusOut doesn't fire very soon
         interval(0).pipe(take(1))))))
@@ -3733,12 +3749,23 @@ class NavigationService {
         let step = modifier ? 5 : 1;
         const rowspan = +args.target?.getAttribute('rowspan');
         let rowspanOffset = 0;
+        let startNewSelection = false;
+        const allowMultipleRanges = (this.ctx.grid.selectionService.active && this.ctx.grid.selectableSettings?.multipleRanges) ||
+            (this.ctx.grid.cellSelectionService.active && this.ctx.grid.cellSelectionService?.options?.multipleRanges);
+        if (!allowMultipleRanges) {
+            this.currentSelection = [];
+        }
         if (!this.onCellKeydown(args)) {
             return;
         }
         const row = this.cursor.row;
         const dir = args.keyCode === Keys.ArrowDown ? 'Down' : 'Up';
         const right = args.keyCode === Keys.ArrowRight;
+        const isArrowKey = args.code === 'ArrowDown' || args.code === 'ArrowUp' || args.code === 'ArrowLeft' || args.code === 'ArrowRight';
+        if (!this.isShiftPressed && args.shiftKey && isArrowKey) {
+            startNewSelection = true;
+            this.isShiftPressed = true;
+        }
         switch (args.keyCode) {
             case Keys.ArrowDown:
             case Keys.ArrowUp:
@@ -3751,9 +3778,10 @@ class NavigationService {
                         return;
                     }
                     preventDefault = this.cursor[`move${dir}`](step);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
                     if (this.activeRow?.dataItem) {
                         const sign = dir === 'Down' ? 1 : -1;
-                        this.handleVerticalArrowSelection(sign * step);
+                        this.handleVerticalArrowSelection(sign * step, preserveCurrentSelection);
                     }
                 }
                 else {
@@ -3772,7 +3800,8 @@ class NavigationService {
                         return;
                     }
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
-                    this.handleHorizontalArrowSelection(args);
+                    const preserveCurrentSelection = startNewSelection && allowMultipleRanges;
+                    this.handleHorizontalArrowSelection(args, preserveCurrentSelection);
                 }
                 else {
                     preventDefault = this[`moveCursor${right ? 'Fwd' : 'Bwd'}`]();
@@ -3975,7 +4004,7 @@ class NavigationService {
         this.leaveCell();
         this.cursor.reset();
     }
-    handleVerticalArrowSelection(args) {
+    handleVerticalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
         if (cellSelectionEnabled || rowSelectionEnabled) {
@@ -3985,14 +4014,15 @@ class NavigationService {
             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);
+                const startRowIndex = this.activeRow.dataRowIndex - args;
+                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item, preserveSelection, startRowIndex, colIdx) : this.handleMultipleArrowRowSelection(item, preserveSelection, startRowIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleHorizontalArrowSelection(args) {
+    handleHorizontalArrowSelection(args, preserveSelection) {
         const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
         if (cellSelectionEnabled) {
             const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
@@ -4004,27 +4034,37 @@ class NavigationService {
                 return;
             }
             if (selectionService.options.mode === 'multiple') {
-                this.handleMultipleArrowCellSelection(item);
+                const startColumnIndex = args.key === 'ArrowRight' ? colIdx - 1 : colIdx + 1;
+                this.handleMultipleArrowCellSelection(item, preserveSelection, row.dataRowIndex, startColumnIndex);
             }
             else {
                 selectionService.handleClick(item, args);
             }
         }
     }
-    handleMultipleArrowCellSelection(item) {
+    handleMultipleArrowCellSelection(item, preserveSelection, startRow, startColumn) {
         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);
+        const startRowIndex = preserveSelection ? startRow : Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const startColIndex = preserveSelection ? startColumn : Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const endRowIndex = preserveSelection ? item.index : Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const endColIndex = preserveSelection ? item.column.leafIndex : Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        if (preserveSelection) {
+            cellSelectionService.lastSelectionItemRowIndex = startRow;
+            cellSelectionService.lastSelectionItemColIndex = startColumn;
+            this.currentSelection = cellSelectionService.currentSelection;
+        }
+        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection, this.currentSelection);
         cellSelectionService.changes.emit(ev);
     }
-    handleMultipleArrowRowSelection(item) {
+    handleMultipleArrowRowSelection(item, preserveSelection, startRow) {
         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);
+        const startRowIndex = preserveSelection ? startRow : Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
+        const endRowIndex = preserveSelection ? item.index : Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
+        if (preserveSelection) {
+            rowSelectionService.lastSelectionStartIndex = startRow;
+            this.currentSelection = rowSelectionService.currentSelection;
+        }
+        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex, preserveSelection, this.currentSelection);
         rowSelectionService.changes.emit(ev);
     }
     calculateRowspanOffset(direction, cellRowspan) {
@@ -15458,7 +15498,8 @@ class SelectionService {
                 ev = this.toggle(item);
             }
             else if (event.shiftKey) {
-                ev = this.addAllTo(item, ctrlKey);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.addAllTo(item, ctrlKey, preserveCurrentSelection);
             }
         }
         if (!isPresent(ev)) {
@@ -15565,7 +15606,7 @@ class SelectionService {
             item = iterator.next();
         }
     }
-    addAllTo(item, ctrlKey) {
+    addAllTo(item, ctrlKey, preserveSelection = false) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(this.lastSelectionStartIndex, item.index);
@@ -15576,7 +15617,7 @@ class SelectionService {
             if (next.value && next.value.type === "data") {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
-                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
+                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey && !preserveSelection) {
                     deselectedRows.push(rowArgs);
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
@@ -15633,7 +15674,7 @@ class SelectionService {
         }
         this.changes.emit(ev);
     }
-    selectRange(startIndex, endIndex) {
+    selectRange(startIndex, endIndex, preserveSelection, existingSelections = []) {
         const selectedRows = [];
         const deselectedRows = [];
         const start = Math.min(startIndex, endIndex);
@@ -15645,7 +15686,10 @@ class SelectionService {
                 const idx = next.value.index;
                 const rowArgs = { dataItem: next.value.data, index: idx };
                 if ((idx < start || idx > end) && this.isSelected(idx)) {
-                    deselectedRows.push(rowArgs);
+                    const deselectRow = !(preserveSelection || existingSelections.find((value) => value && value.dataItem === rowArgs.dataItem && value.index === rowArgs.index));
+                    if (deselectRow) {
+                        deselectedRows.push(rowArgs);
+                    }
                 }
                 if ((idx >= start && idx <= end) && !this.isSelected(idx) && !this.nonSelectableRows.has(idx)) {
                     selectedRows.push(rowArgs);
@@ -15870,7 +15914,12 @@ class CellSelectionService {
                 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);
+                const preserveCurrentSelection = isMultipleRangesEnabled(this.settings);
+                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveCurrentSelection);
+                if (preserveCurrentSelection) {
+                    this.lastSelectionItemRowIndex = item.index;
+                    this.lastSelectionItemColIndex = item.column.leafIndex;
+                }
             }
         }
         if (!isPresent(ev)) {
@@ -15961,7 +16010,7 @@ class CellSelectionService {
             }
         }
     }
-    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
+    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex, preserveSelection = false, existingSelections = []) {
         const selectedCells = [];
         const deselectedCells = [];
         const selectionStartRow = Math.min(startRowIndex, endRowIndex);
@@ -15985,7 +16034,10 @@ class CellSelectionService {
                     const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
                     const isInSelectionRect = isInRowRange && isInColRange;
                     if (!isInSelectionRect && selected) {
-                        deselectedCells.push(item);
+                        const deselectCell = !(preserveSelection || existingSelections.find((value) => value && value.itemKey === item.itemKey && value.columnKey === item.columnKey));
+                        if (deselectCell) {
+                            deselectedCells.push(item);
+                        }
                     }
                     if (isInSelectionRect && !selected && !this.nonSelectableRows.has(idx)) {
                         selectedCells.push(item);
@@ -19761,8 +19813,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1743598444,
-    version: '18.4.1-develop.2',
+    publishDate: 1743748634,
+    version: '18.5.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21373,13 +21425,17 @@ class GridMarqueeDirective {
     }
     endSelection(args) {
         if (args.type === 'mouseup' || args.type === 'touchend') {
+            const modifier = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
+            const preserveCurrentSelection = modifier &&
+                (isMultipleRangesEnabled(this.selection.settings) ||
+                    isMultipleRangesEnabled(this.cellSelection.settings));
             if (this.cellSelection.active) {
                 this.cellSelection.dragging = true;
-                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex));
+                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex, preserveCurrentSelection));
             }
             else if (this.selection.active) {
                 this.selection.dragging = true;
-                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex));
+                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex, preserveCurrentSelection));
             }
         }
         this.clean();
@@ -25330,6 +25386,11 @@ class GridComponent {
             const keydownSubscription = this.renderer.listen(wrapper, 'keydown', (args) => {
                 this.domEvents.keydown.emit(args);
             });
+            const shiftKeyupSubscription = this.renderer.listen(wrapper, 'keyup', (args) => {
+                if (args.key === 'Shift') {
+                    this.domEvents.shiftKeyup.emit(args);
+                }
+            });
             // focusIn and focusOut are relative to the element with ARIA role "grid"
             let focused = false;
             const focusInSubscription = this.renderer.listen(ariaRoot, 'focusin', (args) => {
@@ -25344,6 +25405,7 @@ class GridComponent {
                 const outside = !closest(next, (node) => node === ariaRoot);
                 if (outside) {
                     this.domEvents.focusOut.emit(args);
+                    this.domEvents.shiftKeyup.emit(args);
                     focused = false;
                 }
             });
@@ -25354,6 +25416,7 @@ class GridComponent {
                 windowBlurSubscription();
                 clickSubscription();
                 keydownSubscription();
+                shiftKeyupSubscription();
                 focusInSubscription();
                 focusOutSubscription();
             };

package/navigation/navigation.service.d.ts

@@ -75,6 +75,8 @@ export declare class NavigationService implements OnDestroy {
     private tableIsNavigable;
     private toolbarIsNavigable;
     private lastCellRowIndex;
+    private isShiftPressed;
+    private currentSelection;
     private get activeDataRow();
     constructor(zone: NgZone, domEvents: DomEventsService, pagerContextService: PagerContextService, scrollRequestService: ScrollRequestService, groupsService: GroupsService, detailsService: DetailsService, focusRoot: FocusRoot, editService: EditService, cd: ChangeDetectorRef, ctx: ContextService, resizeService: ColumnResizingService, focusableParent: FocusableDirective);
     init(meta: NavigationMetadata, navigableOptions: GridNavigableSection[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "18.4.1-develop.2",
+  "version": "18.5.0-develop.1",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -26,7 +26,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1743598444,
+      "publishDate": 1743748634,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -39,27 +39,27 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.5.0",
-    "@progress/kendo-angular-buttons": "18.4.1-develop.2",
-    "@progress/kendo-angular-common": "18.4.1-develop.2",
-    "@progress/kendo-angular-dateinputs": "18.4.1-develop.2",
-    "@progress/kendo-angular-layout": "18.4.1-develop.2",
-    "@progress/kendo-angular-dropdowns": "18.4.1-develop.2",
-    "@progress/kendo-angular-excel-export": "18.4.1-develop.2",
-    "@progress/kendo-angular-icons": "18.4.1-develop.2",
-    "@progress/kendo-angular-inputs": "18.4.1-develop.2",
-    "@progress/kendo-angular-intl": "18.4.1-develop.2",
-    "@progress/kendo-angular-l10n": "18.4.1-develop.2",
-    "@progress/kendo-angular-label": "18.4.1-develop.2",
-    "@progress/kendo-angular-pager": "18.4.1-develop.2",
-    "@progress/kendo-angular-pdf-export": "18.4.1-develop.2",
-    "@progress/kendo-angular-popup": "18.4.1-develop.2",
-    "@progress/kendo-angular-toolbar": "18.4.1-develop.2",
-    "@progress/kendo-angular-utils": "18.4.1-develop.2",
+    "@progress/kendo-angular-buttons": "18.5.0-develop.1",
+    "@progress/kendo-angular-common": "18.5.0-develop.1",
+    "@progress/kendo-angular-dateinputs": "18.5.0-develop.1",
+    "@progress/kendo-angular-layout": "18.5.0-develop.1",
+    "@progress/kendo-angular-dropdowns": "18.5.0-develop.1",
+    "@progress/kendo-angular-excel-export": "18.5.0-develop.1",
+    "@progress/kendo-angular-icons": "18.5.0-develop.1",
+    "@progress/kendo-angular-inputs": "18.5.0-develop.1",
+    "@progress/kendo-angular-intl": "18.5.0-develop.1",
+    "@progress/kendo-angular-l10n": "18.5.0-develop.1",
+    "@progress/kendo-angular-label": "18.5.0-develop.1",
+    "@progress/kendo-angular-pager": "18.5.0-develop.1",
+    "@progress/kendo-angular-pdf-export": "18.5.0-develop.1",
+    "@progress/kendo-angular-popup": "18.5.0-develop.1",
+    "@progress/kendo-angular-toolbar": "18.5.0-develop.1",
+    "@progress/kendo-angular-utils": "18.5.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "18.4.1-develop.2",
+    "@progress/kendo-angular-schematics": "18.5.0-develop.1",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

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

package/selection/cell-selection.service.d.ts

@@ -60,7 +60,7 @@ export declare class CellSelectionService implements OnDestroy {
     toggle(item: any): any;
     select(item: any): any;
     deselect(removedItem: any): void;
-    selectRange(startRowIndex: number, startColIndex: number, endRowIndex: number, endColIndex: number): any;
+    selectRange(startRowIndex: number, startColIndex: number, endRowIndex: number, endColIndex: number, preserveSelection?: boolean, existingSelections?: any[]): any;
     get options(): SelectableSettings;
     ngOnDestroy(): void;
     addSubscriptions(): void;

package/selection/selection.service.d.ts

@@ -59,9 +59,9 @@ export declare class SelectionService implements OnDestroy {
     toggleByIndex(index: number): any;
     select(item: any): any;
     deselect(removedItem: any): void;
-    addAllTo(item: any, ctrlKey: boolean): any;
+    addAllTo(item: any, ctrlKey: boolean, preserveSelection?: boolean): any;
     updateAll(selectAllChecked: boolean): void;
-    selectRange(startIndex: number, endIndex: number): any;
+    selectRange(startIndex: number, endIndex: number, preserveSelection: boolean, existingSelections?: any[]): any;
     get selectAllState(): any;
     get selected(): number[];
     get options(): SelectableSettings;

package/selection/types.d.ts

@@ -111,6 +111,11 @@ export interface SelectableSettings {
      *
      */
     metaKeyMultiSelect?: boolean;
+    /**
+     * Determines whether the existing selection is preserved when a new range selection is performed.
+     *
+     */
+    multipleRanges?: boolean;
 }
 /**
  * Represents the available selection modes. [See example](slug:grid_row_selection).

package/utils.d.ts

@@ -105,3 +105,8 @@ export declare const roundDown: (value: number) => number;
  * @hidden
  */
 export declare const defaultCellRowSpan: (row: RowArgs, column: ColumnBase, data: any[]) => number;
+/**
+ * @hidden
+ * Determines whether selection of multiple ranges is enabled in the selectable settings.
+ */
+export declare const isMultipleRangesEnabled: (selectableSettings: any) => boolean;