@progress/kendo-angular-grid 6.1.0-dev.202202251406 → 6.1.0

package/dist/es2015/main.d.ts

@@ -39,7 +39,7 @@ export { GroupFooterItem } from './data/group-footer-item.interface';
 export { GridItem } from './data/grid-item.interface';
 export { ScrollMode } from './scrolling/scrollmode';
 export { SelectionEvent } from './selection/types';
-export { ColumnSortSettings, SortSettings } from './columns/sort-settings';
+export { ColumnSortSettings, SingleSortSettings, MultipleSortSettings, SortSettings, ModifierKey } from './columns/sort-settings';
 export { ResizableContainerDirective } from './layout/resizable.directive';
 export { TemplateContextDirective } from './rendering/common/template-context.directive';
 export { GroupableSettings } from './grouping/group-settings';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645797443,
+    publishDate: 1646131378,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

@@ -66,7 +66,7 @@ export declare class HeaderComponent implements AfterViewInit, OnInit, OnChanges
     private targetSubscription;
     private _leafColumns;
     constructor(popupService: SinglePopupService, hint: DragHintService, cue: DropCueService, reorderService: ColumnReorderService, idService: IdService, sortService: SortService, localization: LocalizationService, columnInfoService: ColumnInfoService, cd: ChangeDetectorRef);
-    sortColumn(column: ColumnComponent): void;
+    sortColumn(descriptor: SortDescriptor[]): void;
     onSortClick(column: ColumnComponent, event: MouseEvent, link: Element): void;
     onHeaderKeydown(column: ColumnComponent, args: KeyboardEvent): void;
     showSortNumbering(column: ColumnComponent): boolean;
@@ -74,7 +74,19 @@ export declare class HeaderComponent implements AfterViewInit, OnInit, OnChanges
     sortIcon(field: string): any;
     sortState(column: ColumnComponent): string;
     sortStatus(column: ColumnComponent): string;
-    toggleSort(column: ColumnComponent): Array<SortDescriptor>;
+    /**
+     *
+     * @param column
+     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
+     * @returns - SortDescriptor[]
+     */
+    toggleSort(column: ColumnComponent, modifier?: boolean): Array<SortDescriptor>;
+    /**
+     *
+     * Determines whether the modifier key (if any) passed
+     * with a click/keyboard event matches the user-defined multiSortKey.
+     */
+    matchModifier(event: MouseEvent | KeyboardEvent): boolean;
     ngAfterViewInit(): void;
     ngDoCheck(): void;
     ngOnChanges(changes: any): void;

package/dist/es2015/rendering/header/header.component.js

@@ -60,6 +60,7 @@ const lockable = ({ draggable, target }) => draggable.context.column.lockable !=
     draggable.context.column.isLocked === target.context.column.isLocked;
 const ɵ10 = lockable;
 const rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
+const modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
 /**
  * @hidden
  */
@@ -98,8 +99,8 @@ let HeaderComponent = class HeaderComponent {
     get unlockedColumnsCount() {
         return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
     }
-    sortColumn(column) {
-        this.sortService.sort(this.toggleSort(column));
+    sortColumn(descriptor) {
+        this.sortService.sort(descriptor);
     }
     onSortClick(column, event, link) {
         const target = event.target;
@@ -110,7 +111,9 @@ let HeaderComponent = class HeaderComponent {
                 return;
             }
         }
-        this.sortColumn(column);
+        const modifier = this.matchModifier(event);
+        const toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
     }
     onHeaderKeydown(column, args) {
         if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
@@ -129,7 +132,8 @@ let HeaderComponent = class HeaderComponent {
             return;
         }
         if (args.keyCode === Keys.Enter && isPresent(column.field)) {
-            this.sortService.sort(this.toggleSort(column));
+            const modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
     }
     showSortNumbering(column) {
@@ -179,14 +183,34 @@ let HeaderComponent = class HeaderComponent {
         }
         return this.localization.get(msg);
     }
-    toggleSort(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(this.sortable, column.sortable);
         const descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single') {
+        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(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)));

package/dist/es2015/rendering/list.component.js

@@ -708,7 +708,7 @@ ListComponent = tslib_1.__decorate([
         selector: 'kendo-grid-list',
         template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,

package/dist/fesm2015/index.js

@@ -2831,7 +2831,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645797443,
+    publishDate: 1646131378,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -10167,7 +10167,7 @@ ListComponent = __decorate([
         selector: 'kendo-grid-list',
         template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth"
+        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,
@@ -16055,7 +16055,8 @@ const DEFAULTS = {
     allowUnsort: true,
     mode: 'single',
     showIndexes: true,
-    initialDirection: 'asc'
+    initialDirection: 'asc',
+    multiSortKey: 'none'
 };
 /**
  * @hidden
@@ -16505,6 +16506,7 @@ 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
  */
@@ -16543,8 +16545,8 @@ let HeaderComponent = class HeaderComponent {
     get unlockedColumnsCount() {
         return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
     }
-    sortColumn(column) {
-        this.sortService.sort(this.toggleSort(column));
+    sortColumn(descriptor) {
+        this.sortService.sort(descriptor);
     }
     onSortClick(column, event, link) {
         const target = event.target;
@@ -16555,7 +16557,9 @@ let HeaderComponent = class HeaderComponent {
                 return;
             }
         }
-        this.sortColumn(column);
+        const modifier = this.matchModifier(event);
+        const toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
     }
     onHeaderKeydown(column, args) {
         if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
@@ -16574,7 +16578,8 @@ let HeaderComponent = class HeaderComponent {
             return;
         }
         if (args.keyCode === Keys.Enter && isPresent(column.field)) {
-            this.sortService.sort(this.toggleSort(column));
+            const modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
     }
     showSortNumbering(column) {
@@ -16624,14 +16629,34 @@ let HeaderComponent = class HeaderComponent {
         }
         return this.localization.get(msg);
     }
-    toggleSort(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') {
+        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)));

package/dist/fesm5/index.js

@@ -3044,7 +3044,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645797443,
+    publishDate: 1646131378,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -10609,7 +10609,7 @@ var ListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-grid-list',
-            template: "\n    <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n        *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\"\n        [kendoEventsOutsideAngular]=\"{\n            keydown: lockedKeydown,\n            scroll: lockedScroll,\n            mousewheel: lockedMousewheel,\n            DOMMouseScroll: lockedMousewheel\n        }\"\n        [scope]=\"this\"\n        >\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [columns]=\"lockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [isLocked]=\"true\"\n                    [data]=\"data\"\n                    [noRecordsText]=\"''\"\n                    [columns]=\"lockedLeafColumns\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [showGroupFooters]=\"showFooter\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor></kendo-resize-sensor>\n        </div>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n    </div><div #container\n               class=\"k-grid-content k-virtual-content\"\n               role=\"presentation\" tabindex=\"-1\"\n               [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n               [lockedWidth]=\"lockedWidth + 1\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n              class=\"k-grid-table\" role=\"presentation\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"isLocked ? [] : groups\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [skipGroupDecoration]=\"isLocked\"\n                    [data]=\"data\"\n                    [groups]=\"groups\"\n                    [showGroupFooters]=\"showFooter\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [allColumns]=\"nonLockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [noRecordsTemplate]=\"noRecordsTemplate\"\n                    [lockedColumnsCount]=\"lockedLeafColumns.length\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [rowSticky]=\"rowSticky\"\n                    [virtualColumns]=\"virtualColumns\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n        </div>\n        <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n        <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n            <div [style.width.px]=\"totalWidth\"></div>\n        </div>\n    </div>\n    <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n    </div>\n    "
+            template: "\n    <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n        *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\" tabindex=\"-1\"\n        [kendoEventsOutsideAngular]=\"{\n            keydown: lockedKeydown,\n            scroll: lockedScroll,\n            mousewheel: lockedMousewheel,\n            DOMMouseScroll: lockedMousewheel\n        }\"\n        [scope]=\"this\"\n        >\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [columns]=\"lockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [isLocked]=\"true\"\n                    [data]=\"data\"\n                    [noRecordsText]=\"''\"\n                    [columns]=\"lockedLeafColumns\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [showGroupFooters]=\"showFooter\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor></kendo-resize-sensor>\n        </div>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n    </div><div #container\n               class=\"k-grid-content k-virtual-content\"\n               role=\"presentation\" tabindex=\"-1\"\n               [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n               [lockedWidth]=\"lockedWidth + 1\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n              class=\"k-grid-table\" role=\"presentation\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"isLocked ? [] : groups\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [skipGroupDecoration]=\"isLocked\"\n                    [data]=\"data\"\n                    [groups]=\"groups\"\n                    [showGroupFooters]=\"showFooter\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [allColumns]=\"nonLockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [noRecordsTemplate]=\"noRecordsTemplate\"\n                    [lockedColumnsCount]=\"lockedLeafColumns.length\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [rowSticky]=\"rowSticky\"\n                    [virtualColumns]=\"virtualColumns\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n        </div>\n        <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n        <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n            <div [style.width.px]=\"totalWidth\"></div>\n        </div>\n    </div>\n    <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n    </div>\n    "
         }),
         __param(0, Inject(SCROLLER_FACTORY_TOKEN)),
         __metadata("design:paramtypes", [Object, DetailsService,
@@ -16571,7 +16571,8 @@ var DEFAULTS = {
     allowUnsort: true,
     mode: 'single',
     showIndexes: true,
-    initialDirection: 'asc'
+    initialDirection: 'asc',
+    multiSortKey: 'none'
 };
 /**
  * @hidden
@@ -17037,6 +17038,7 @@ var lockable = function (_a) {
         draggable.context.column.isLocked === target.context.column.isLocked;
 };
 var rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
+var modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
 /**
  * @hidden
  */
@@ -17087,8 +17089,8 @@ var HeaderComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    HeaderComponent.prototype.sortColumn = function (column) {
-        this.sortService.sort(this.toggleSort(column));
+    HeaderComponent.prototype.sortColumn = function (descriptor) {
+        this.sortService.sort(descriptor);
     };
     HeaderComponent.prototype.onSortClick = function (column, event, link) {
         var target = event.target;
@@ -17099,7 +17101,9 @@ var HeaderComponent = /** @class */ (function () {
                 return;
             }
         }
-        this.sortColumn(column);
+        var modifier = this.matchModifier(event);
+        var toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
     };
     HeaderComponent.prototype.onHeaderKeydown = function (column, args) {
         if (args.keyCode === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
@@ -17118,7 +17122,8 @@ var HeaderComponent = /** @class */ (function () {
             return;
         }
         if (args.keyCode === Keys.Enter && isPresent(column.field)) {
-            this.sortService.sort(this.toggleSort(column));
+            var modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
     };
     HeaderComponent.prototype.showSortNumbering = function (column) {
@@ -17174,14 +17179,35 @@ var HeaderComponent = /** @class */ (function () {
         }
         return this.localization.get(msg);
     };
-    HeaderComponent.prototype.toggleSort = function (column) {
+    /**
+     *
+     * @param column
+     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
+     * @returns - SortDescriptor[]
+     */
+    HeaderComponent.prototype.toggleSort = function (column, modifier) {
+        if (modifier === void 0) { modifier = true; }
         var _a = normalize$1(this.sortable, column.sortable), allowUnsort = _a.allowUnsort, mode = _a.mode, initialDirection = _a.initialDirection;
         var descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single') {
+        if (mode === 'single' || !modifier) {
             return [descriptor];
         }
         return this.sort.filter(function (desc) { return desc.field !== column.field; }).concat([descriptor]);
     };
+    /**
+     *
+     * Determines whether the modifier key (if any) passed
+     * with a click/keyboard event matches the user-defined multiSortKey.
+     */
+    HeaderComponent.prototype.matchModifier = function (event) {
+        var multiSortKey = normalize$1(this.sortable).multiSortKey;
+        if (multiSortKey === 'none') {
+            return modifierKeys.every(function (key) { return !event[key + "Key"]; });
+        }
+        return multiSortKey === 'ctrl'
+            ? event.ctrlKey || event.metaKey
+            : event[multiSortKey + "Key"];
+    };
     HeaderComponent.prototype.ngAfterViewInit = function () {
         this.subscription.add(observe(this.dropTargets)
             .subscribe(this.attachTargets.bind(this)));

package/dist/npm/columns/sort-settings.js

@@ -11,7 +11,8 @@ var DEFAULTS = {
     allowUnsort: true,
     mode: 'single',
     showIndexes: true,
-    initialDirection: 'asc'
+    initialDirection: 'asc',
+    multiSortKey: 'none'
 };
 /**
  * @hidden

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645797443,
+    publishDate: 1646131378,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/npm/rendering/header/header.component.js

@@ -103,6 +103,7 @@ var lockable = function (_a) {
 var ɵ10 = lockable;
 exports.ɵ10 = ɵ10;
 var rules = utils_1.and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, utils_1.not(lastNonLocked), lockable);
+var modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
 /**
  * @hidden
  */
@@ -153,8 +154,8 @@ var HeaderComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    HeaderComponent.prototype.sortColumn = function (column) {
-        this.sortService.sort(this.toggleSort(column));
+    HeaderComponent.prototype.sortColumn = function (descriptor) {
+        this.sortService.sort(descriptor);
     };
     HeaderComponent.prototype.onSortClick = function (column, event, link) {
         var target = event.target;
@@ -165,7 +166,9 @@ var HeaderComponent = /** @class */ (function () {
                 return;
             }
         }
-        this.sortColumn(column);
+        var modifier = this.matchModifier(event);
+        var toggledColumn = this.toggleSort(column, modifier);
+        this.sortColumn(toggledColumn);
     };
     HeaderComponent.prototype.onHeaderKeydown = function (column, args) {
         if (args.keyCode === kendo_angular_common_1.Keys.ArrowDown && args.altKey && this.showFilterMenu) {
@@ -184,7 +187,8 @@ var HeaderComponent = /** @class */ (function () {
             return;
         }
         if (args.keyCode === kendo_angular_common_1.Keys.Enter && utils_1.isPresent(column.field)) {
-            this.sortService.sort(this.toggleSort(column));
+            var modifier = this.matchModifier(args);
+            this.sortService.sort(this.toggleSort(column, modifier));
         }
     };
     HeaderComponent.prototype.showSortNumbering = function (column) {
@@ -240,14 +244,35 @@ var HeaderComponent = /** @class */ (function () {
         }
         return this.localization.get(msg);
     };
-    HeaderComponent.prototype.toggleSort = function (column) {
+    /**
+     *
+     * @param column
+     * @param modifier - Indicates whether the client-defined `multiSortKey` modifier is met. Defaults to `true`.
+     * @returns - SortDescriptor[]
+     */
+    HeaderComponent.prototype.toggleSort = function (column, modifier) {
+        if (modifier === void 0) { modifier = true; }
         var _a = sort_settings_1.normalize(this.sortable, column.sortable), allowUnsort = _a.allowUnsort, mode = _a.mode, initialDirection = _a.initialDirection;
         var descriptor = this.toggleDirection(column.field, allowUnsort, initialDirection);
-        if (mode === 'single') {
+        if (mode === 'single' || !modifier) {
             return [descriptor];
         }
         return this.sort.filter(function (desc) { return desc.field !== column.field; }).concat([descriptor]);
     };
+    /**
+     *
+     * Determines whether the modifier key (if any) passed
+     * with a click/keyboard event matches the user-defined multiSortKey.
+     */
+    HeaderComponent.prototype.matchModifier = function (event) {
+        var multiSortKey = sort_settings_1.normalize(this.sortable).multiSortKey;
+        if (multiSortKey === 'none') {
+            return modifierKeys.every(function (key) { return !event[key + "Key"]; });
+        }
+        return multiSortKey === 'ctrl'
+            ? event.ctrlKey || event.metaKey
+            : event[multiSortKey + "Key"];
+    };
     HeaderComponent.prototype.ngAfterViewInit = function () {
         this.subscription.add(utils_1.observe(this.dropTargets)
             .subscribe(this.attachTargets.bind(this)));

package/dist/npm/rendering/list.component.js

@@ -784,7 +784,7 @@ var ListComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-grid-list',
-            template: "\n    <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n        *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\"\n        [kendoEventsOutsideAngular]=\"{\n            keydown: lockedKeydown,\n            scroll: lockedScroll,\n            mousewheel: lockedMousewheel,\n            DOMMouseScroll: lockedMousewheel\n        }\"\n        [scope]=\"this\"\n        >\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [columns]=\"lockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [isLocked]=\"true\"\n                    [data]=\"data\"\n                    [noRecordsText]=\"''\"\n                    [columns]=\"lockedLeafColumns\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [showGroupFooters]=\"showFooter\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor></kendo-resize-sensor>\n        </div>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n    </div><div #container\n               class=\"k-grid-content k-virtual-content\"\n               role=\"presentation\" tabindex=\"-1\"\n               [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n               [lockedWidth]=\"lockedWidth + 1\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n              class=\"k-grid-table\" role=\"presentation\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"isLocked ? [] : groups\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [skipGroupDecoration]=\"isLocked\"\n                    [data]=\"data\"\n                    [groups]=\"groups\"\n                    [showGroupFooters]=\"showFooter\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [allColumns]=\"nonLockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [noRecordsTemplate]=\"noRecordsTemplate\"\n                    [lockedColumnsCount]=\"lockedLeafColumns.length\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [rowSticky]=\"rowSticky\"\n                    [virtualColumns]=\"virtualColumns\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n        </div>\n        <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n        <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n            <div [style.width.px]=\"totalWidth\"></div>\n        </div>\n    </div>\n    <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n    </div>\n    "
+            template: "\n    <div #lockedContainer class=\"k-grid-content-locked\" role=\"presentation\"\n        *ngIf=\"isLocked\" [style.width.px]=\"lockedWidth\" tabindex=\"-1\"\n        [kendoEventsOutsideAngular]=\"{\n            keydown: lockedKeydown,\n            scroll: lockedScroll,\n            mousewheel: lockedMousewheel,\n            DOMMouseScroll: lockedMousewheel\n        }\"\n        [scope]=\"this\"\n        >\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [locked]=\"true\" #lockedTable class=\"k-grid-table\" role=\"presentation\" [style.width.px]=\"lockedWidth\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [columns]=\"lockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [groups]=\"groups\"\n                    [isLocked]=\"true\"\n                    [data]=\"data\"\n                    [noRecordsText]=\"''\"\n                    [columns]=\"lockedLeafColumns\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [showGroupFooters]=\"showFooter\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor></kendo-resize-sensor>\n        </div>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n    </div><div #container\n               class=\"k-grid-content k-virtual-content\"\n               role=\"presentation\" tabindex=\"-1\"\n               [kendoGridResizableContainer]=\"lockedLeafColumns.length\"\n               [lockedWidth]=\"lockedWidth + 1\">\n        <div role=\"presentation\" class=\"k-grid-table-wrap\">\n            <table [style.width.px]=\"nonLockedWidth\" #table [virtualColumns]=\"virtualColumns\"\n              class=\"k-grid-table\" role=\"presentation\">\n                <colgroup kendoGridColGroup\n                    role=\"presentation\"\n                    [groups]=\"isLocked ? [] : groups\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [detailTemplate]=\"detailTemplate\">\n                </colgroup>\n                <tbody kendoGridTableBody\n                    role=\"presentation\"\n                    [skipGroupDecoration]=\"isLocked\"\n                    [data]=\"data\"\n                    [groups]=\"groups\"\n                    [showGroupFooters]=\"showFooter\"\n                    [columns]=\"nonLockedColumnsToRender\"\n                    [allColumns]=\"nonLockedLeafColumns\"\n                    [detailTemplate]=\"detailTemplate\"\n                    [noRecordsTemplate]=\"noRecordsTemplate\"\n                    [lockedColumnsCount]=\"lockedLeafColumns.length\"\n                    [totalColumnsCount]=\"leafColumns.length\"\n                    [skip]=\"skip\"\n                    [selectable]=\"selectable\"\n                    [trackBy]=\"trackBy\"\n                    [filterable]=\"filterable\"\n                    [rowClass]=\"rowClass\"\n                    [rowSticky]=\"rowSticky\"\n                    [virtualColumns]=\"virtualColumns\"\n                    [isLoading]=\"loading\"\n                    [isVirtual]=\"isVirtual\"\n                    [cellLoadingTemplate]=\"cellLoadingTemplate\">\n                </tbody>\n            </table>\n            <kendo-resize-sensor *ngIf=\"isLocked\"></kendo-resize-sensor>\n        </div>\n        <kendo-resize-sensor *ngIf=\"isLocked || virtualColumns\"></kendo-resize-sensor>\n        <div class=\"k-height-container\" role=\"presentation\">\n            <div [style.height.px]=\"totalHeight\"></div>\n        </div>\n        <div *ngIf=\"virtualColumns\" class=\"k-width-container\" role=\"presentation\">\n            <div [style.width.px]=\"totalWidth\"></div>\n        </div>\n    </div>\n    <div [loadingTemplate]=\"loadingTemplate\" *ngIf=\"loading\" kendoGridLoading>\n    </div>\n    "
         }),
         tslib_1.__param(0, core_1.Inject(exports.SCROLLER_FACTORY_TOKEN)),
         tslib_1.__metadata("design:paramtypes", [Object, details_service_1.DetailsService,