@progress/kendo-angular-grid 6.0.4-dev.202202221309 → 6.1.0-dev.202203010950

package/dist/es2015/main.d.ts

@@ -15,6 +15,7 @@ export { ToolbarComponent } from './rendering/toolbar/toolbar.component';
 export { ToolbarTemplateDirective } from './rendering/toolbar/toolbar-template.directive';
 export { CellTemplateDirective } from './rendering/cell-template.directive';
 export { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
+export { LoadingTemplateDirective } from './rendering/loading-template.directive';
 export { HeaderTemplateDirective } from './rendering/header/header-template.directive';
 export { FooterTemplateDirective } from './rendering/footer/footer-template.directive';
 export { PagerTemplateDirective } from './pager/pager-template.directive';
@@ -38,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/main.js

@@ -15,6 +15,7 @@ export { ToolbarComponent } from './rendering/toolbar/toolbar.component';
 export { ToolbarTemplateDirective } from './rendering/toolbar/toolbar-template.directive';
 export { CellTemplateDirective } from './rendering/cell-template.directive';
 export { CellLoadingTemplateDirective } from './rendering/cell-loading.template.directive';
+export { LoadingTemplateDirective } from './rendering/loading-template.directive';
 export { HeaderTemplateDirective } from './rendering/header/header-template.directive';
 export { FooterTemplateDirective } from './rendering/footer/footer-template.directive';
 export { PagerTemplateDirective } from './pager/pager-template.directive';

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: 1645534887,
+    publishDate: 1646127685,
     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/body.module.js

@@ -25,6 +25,7 @@ import { GroupModule } from "../grouping/group.module";
 import { NumericTextBoxModule } from "@progress/kendo-angular-inputs";
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { CellLoadingTemplateDirective } from './cell-loading.template.directive';
+import { LoadingTemplateDirective } from './loading-template.directive';
 const exported = [
     CommandColumnComponent,
     CheckboxColumnComponent,
@@ -39,7 +40,8 @@ const exported = [
     SaveCommandDirective,
     RemoveCommandDirective,
     AddCommandDirective,
-    CellLoadingTemplateDirective
+    CellLoadingTemplateDirective,
+    LoadingTemplateDirective
 ];
 const importedModules = [
     CommonModule,
@@ -68,7 +70,8 @@ let BodyModule = class BodyModule {
             SaveCommandDirective,
             RemoveCommandDirective,
             AddCommandDirective,
-            CellLoadingTemplateDirective
+            CellLoadingTemplateDirective,
+            LoadingTemplateDirective
         ];
     }
 };

package/dist/es2015/rendering/common/loading.component.d.ts

@@ -3,12 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { LoadingTemplateDirective } from '../loading-template.directive';
 /**
  * @hidden
  */
 export declare class LoadingComponent {
     private localization;
     hostClass: boolean;
+    loadingTemplate: LoadingTemplateDirective;
     readonly loadingText: string;
     constructor(localization: LocalizationService);
 }

package/dist/es2015/rendering/common/loading.component.js

@@ -3,8 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { LoadingTemplateDirective } from '../loading-template.directive';
 /**
  * @hidden
  */
@@ -21,13 +22,21 @@ tslib_1.__decorate([
     HostBinding('class.k-loading-mask'),
     tslib_1.__metadata("design:type", Boolean)
 ], LoadingComponent.prototype, "hostClass", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", LoadingTemplateDirective)
+], LoadingComponent.prototype, "loadingTemplate", void 0);
 LoadingComponent = tslib_1.__decorate([
     Component({
         selector: '[kendoGridLoading]',
         template: `
-        <span class="k-loading-text">{{ loadingText }}</span>
-        <div class="k-loading-image"></div>
-        <div class="k-loading-color"></div>
+        <ng-container *ngIf="!loadingTemplate">
+            <span class="k-loading-text">{{ loadingText }}</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
+        </ng-container>
+        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
+        </ng-template>
     `
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService])

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.d.ts

@@ -79,6 +79,7 @@ export declare class ListComponent implements OnInit, OnDestroy, AfterViewInit,
     trackBy: TrackByFunction<GridItem>;
     virtualColumns: boolean;
     isVirtual: boolean;
+    cellLoadingTemplate: TemplateRef<any>;
     loadingTemplate: TemplateRef<any>;
     contentScroll: EventEmitter<any>;
     pageChange: EventEmitter<Action>;

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

@@ -657,6 +657,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], ListComponent.prototype, "isVirtual", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", TemplateRef)
+], ListComponent.prototype, "cellLoadingTemplate", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", TemplateRef)
@@ -738,7 +742,7 @@ ListComponent = tslib_1.__decorate([
                     [rowClass]="rowClass"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate">
                 </tbody>
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
@@ -781,7 +785,7 @@ ListComponent = tslib_1.__decorate([
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
@@ -794,7 +798,7 @@ ListComponent = tslib_1.__decorate([
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    <div *ngIf="loading" kendoGridLoading>
+    <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
     </div>
     `
     }),

package/dist/es2015/rendering/loading-template.directive.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+/**
+ * Creates a loading template that overrides the default loading indicator of the Grid Component.
+ * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
+ * [see example]({% slug databinding_grid %}#toc-loading-template).
+ */
+export declare class LoadingTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+}

package/dist/es2015/rendering/loading-template.directive.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef } from '@angular/core';
+/**
+ * Creates a loading template that overrides the default loading indicator of the Grid Component.
+ * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
+ * [see example]({% slug databinding_grid %}#toc-loading-template).
+ */
+let LoadingTemplateDirective = class LoadingTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+LoadingTemplateDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoGridLoadingTemplate]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [TemplateRef])
+], LoadingTemplateDirective);
+export { LoadingTemplateDirective };

package/dist/es2015/rendering/table-body.component.d.ts

@@ -54,7 +54,7 @@ export declare class TableBodyComponent implements OnInit, OnDestroy, OnChanges,
     isLocked: boolean;
     isLoading: boolean;
     isVirtual: boolean;
-    loadingTemplate: TemplateRef<any>;
+    cellLoadingTemplate: TemplateRef<any>;
     skipGroupDecoration: boolean;
     showGroupFooters: boolean;
     lockedColumnsCount: number;

package/dist/es2015/rendering/table-body.component.js

@@ -409,7 +409,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", TemplateRef)
-], TableBodyComponent.prototype, "loadingTemplate", void 0);
+], TableBodyComponent.prototype, "cellLoadingTemplate", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
@@ -497,6 +497,7 @@ TableBodyComponent = tslib_1.__decorate([
             </ng-container>
         </td>
     </tr>
+
     <ng-template ngFor
         [ngForOf]="data"
         [ngForTrackBy]="trackByWrapper"
@@ -564,7 +565,7 @@ TableBodyComponent = tslib_1.__decorate([
                     [dataItem]="item.data"
                     [isLoading]="isLoading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate"
+                    [loadingTemplate]="cellLoadingTemplate"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="logicalColIndex(column)"

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: 1645534887,
+    publishDate: 1646127685,
     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'
 };
@@ -6466,6 +6466,23 @@ CellLoadingTemplateDirective = __decorate([
     __metadata("design:paramtypes", [TemplateRef])
 ], CellLoadingTemplateDirective);
 
+/**
+ * Creates a loading template that overrides the default loading indicator of the Grid Component.
+ * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
+ * [see example]({% slug databinding_grid %}#toc-loading-template).
+ */
+let LoadingTemplateDirective = class LoadingTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+LoadingTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoGridLoadingTemplate]'
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], LoadingTemplateDirective);
+
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -7096,14 +7113,23 @@ let GridComponent = class GridComponent {
     set detailTemplate(detailTemplate) {
         this._customDetailTemplate = detailTemplate;
     }
-    get loadingTemplate() {
-        if (this._customLoadingTemplate) {
+    get cellLoadingTemplate() {
+        if (this._cellLoadingTemplate) {
             return this._customDetailTemplate;
         }
+        return this.cellLoadingTemplateChildren ? this.cellLoadingTemplateChildren.first : undefined;
+    }
+    set cellLoadingTemplate(cellLoadingTemplate) {
+        this._cellLoadingTemplate = cellLoadingTemplate;
+    }
+    get loadingTemplate() {
+        if (this._loadingTemplate) {
+            return this._loadingTemplate;
+        }
         return this.loadingTemplateChildren ? this.loadingTemplateChildren.first : undefined;
     }
     set loadingTemplate(loadingTemplate) {
-        this._customLoadingTemplate = loadingTemplate;
+        this._loadingTemplate = loadingTemplate;
     }
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
@@ -8708,6 +8734,10 @@ __decorate([
 __decorate([
     ContentChildren(CellLoadingTemplateDirective),
     __metadata("design:type", QueryList)
+], GridComponent.prototype, "cellLoadingTemplateChildren", void 0);
+__decorate([
+    ContentChildren(LoadingTemplateDirective),
+    __metadata("design:type", QueryList)
 ], GridComponent.prototype, "loadingTemplateChildren", void 0);
 __decorate([
     ContentChildren(NoRecordsTemplateDirective),
@@ -9137,6 +9167,7 @@ GridComponent = __decorate([
                 [rowSticky]="rowSticky"
                 [loading]="loading"
                 [isVirtual]="isVirtual"
+                [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
                 [loadingTemplate]="loadingTemplate?.templateRef"
                 [virtualColumns]="virtualColumns"
                 (scrollBottom)="notifyScrollBottom()"
@@ -9241,7 +9272,7 @@ GridComponent = __decorate([
                     [detailTemplate]="detailTemplate">
                 </tfoot>
             </table>
-            <div *ngIf="loading" kendoGridLoading>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
             </div>
         </ng-template>
         </div>
@@ -10085,6 +10116,10 @@ __decorate([
     Input(),
     __metadata("design:type", Boolean)
 ], ListComponent.prototype, "isVirtual", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", TemplateRef)
+], ListComponent.prototype, "cellLoadingTemplate", void 0);
 __decorate([
     Input(),
     __metadata("design:type", TemplateRef)
@@ -10166,7 +10201,7 @@ ListComponent = __decorate([
                     [rowClass]="rowClass"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate">
                 </tbody>
             </table>
             <kendo-resize-sensor></kendo-resize-sensor>
@@ -10209,7 +10244,7 @@ ListComponent = __decorate([
                     [virtualColumns]="virtualColumns"
                     [isLoading]="loading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate">
+                    [cellLoadingTemplate]="cellLoadingTemplate">
                 </tbody>
             </table>
             <kendo-resize-sensor *ngIf="isLocked"></kendo-resize-sensor>
@@ -10222,7 +10257,7 @@ ListComponent = __decorate([
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    <div *ngIf="loading" kendoGridLoading>
+    <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
     </div>
     `
     }),
@@ -12727,13 +12762,21 @@ __decorate([
     HostBinding('class.k-loading-mask'),
     __metadata("design:type", Boolean)
 ], LoadingComponent.prototype, "hostClass", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", LoadingTemplateDirective)
+], LoadingComponent.prototype, "loadingTemplate", void 0);
 LoadingComponent = __decorate([
     Component({
         selector: '[kendoGridLoading]',
         template: `
-        <span class="k-loading-text">{{ loadingText }}</span>
-        <div class="k-loading-image"></div>
-        <div class="k-loading-color"></div>
+        <ng-container *ngIf="!loadingTemplate">
+            <span class="k-loading-text">{{ loadingText }}</span>
+            <div class="k-loading-image"></div>
+            <div class="k-loading-color"></div>
+        </ng-container>
+        <ng-template *ngIf="loadingTemplate" [ngTemplateOutlet]="loadingTemplate?.templateRef">
+        </ng-template>
     `
     }),
     __metadata("design:paramtypes", [LocalizationService])
@@ -16012,7 +16055,8 @@ const DEFAULTS = {
     allowUnsort: true,
     mode: 'single',
     showIndexes: true,
-    initialDirection: 'asc'
+    initialDirection: 'asc',
+    multiSortKey: 'none'
 };
 /**
  * @hidden
@@ -16462,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
  */
@@ -16500,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;
@@ -16512,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) {
@@ -16531,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) {
@@ -16581,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)));
@@ -20959,7 +21027,7 @@ __decorate([
 __decorate([
     Input(),
     __metadata("design:type", TemplateRef)
-], TableBodyComponent.prototype, "loadingTemplate", void 0);
+], TableBodyComponent.prototype, "cellLoadingTemplate", void 0);
 __decorate([
     Input(),
     __metadata("design:type", Boolean)
@@ -21047,6 +21115,7 @@ TableBodyComponent = __decorate([
             </ng-container>
         </td>
     </tr>
+
     <ng-template ngFor
         [ngForOf]="data"
         [ngForTrackBy]="trackByWrapper"
@@ -21114,7 +21183,7 @@ TableBodyComponent = __decorate([
                     [dataItem]="item.data"
                     [isLoading]="isLoading"
                     [isVirtual]="isVirtual"
-                    [loadingTemplate]="loadingTemplate"
+                    [loadingTemplate]="cellLoadingTemplate"
                 kendoGridLogicalCell
                     [logicalRowIndex]="logicalRowIndex(rowIndex)"
                     [logicalColIndex]="logicalColIndex(column)"
@@ -21873,7 +21942,8 @@ const exported$1 = [
     SaveCommandDirective,
     RemoveCommandDirective,
     AddCommandDirective,
-    CellLoadingTemplateDirective
+    CellLoadingTemplateDirective,
+    LoadingTemplateDirective
 ];
 const importedModules$3 = [
     CommonModule,
@@ -21902,7 +21972,8 @@ let BodyModule = class BodyModule {
             SaveCommandDirective,
             RemoveCommandDirective,
             AddCommandDirective,
-            CellLoadingTemplateDirective
+            CellLoadingTemplateDirective,
+            LoadingTemplateDirective
         ];
     }
 };
@@ -23664,4 +23735,4 @@ ExcelModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { ColumnChooserComponent, ColumnListComponent, ColumnMenuChooserComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemBase, ColumnMenuItemContentTemplateDirective, ColumnMenuItemComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnMenuModule, ColumnMenuService, ColumnHandleDirective, ColumnResizingService, TableDirective, ColumnInfoService, DomEventsService, IdService, PreventableEvent, SortService, ChangeNotificationService, ColumnReorderService, DragAndDropModule, DragAndDropService, DragHintService, DraggableColumnDirective, DropCueService, DropTargetDirective, EditingDirectiveBase, RowEditingDirectiveBase, AddCommandDirective, CancelCommandDirective, EditCommandDirective, EditService as EditService$1, LocalDataChangesService, RemoveCommandDirective, SaveCommandDirective, ExcelCommandDirective, BooleanFilterComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellWrapperComponent, DateFilterComponent, FilterHostDirective, FilterInputWrapperComponent, FilterInputDirective, FilterRowComponent, DateFilterMenuInputComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuComponent, BooleanFilterRadioButtonDirective, NumericFilterMenuInputComponent, StringFilterMenuInputComponent, NumericFilterComponent, FilterOperatorBase, SharedFilterModule, StringFilterComponent, GroupHeaderComponent, GroupIndicatorComponent, GroupInfoService, GroupPanelComponent, GroupsService, BrowserSupportService, ResizeService, ResponsiveService, LocalizedMessagesDirective, Messages, FocusGroup, FOCUS_ROOT_ACTIVE, FocusRoot, LogicalCellDirective, LogicalRowDirective, NavigationService, PagerContextService, PagerDropDownListDirective, PagerElementComponent, PagerInputDirective, PDFCommandDirective, PDFTemplateDirective, CellComponent, CELL_CONTEXT, EMPTY_CELL_CONTEXT, FieldAccessorPipe, DetailsService, DEFAULT_SCROLLER_FACTORY, SCROLLER_FACTORY_TOKEN, ScrollRequestService, ScrollSyncService, ScrollerService, CellSelectionService, GridMarqueeDirective, SelectAllCheckboxDirective, SelectionCheckboxDirective, Selection, SelectionService, GridModule, SharedModule, GridComponent, ColumnBase$1 as ColumnBase, ColumnComponent, CommandColumnComponent, SpanColumnComponent, ColumnGroupComponent, CheckboxColumnComponent, ToolbarComponent, ToolbarTemplateDirective, CellTemplateDirective, CellLoadingTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, PagerTemplateDirective, GridSpacerComponent, ExpandDetailsDirective, ExpandGroupDirective, DetailTemplateDirective, DetailExpandEvent, DetailCollapseEvent, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ResizableContainerDirective, TemplateContextDirective, NoRecordsTemplateDirective, DataBindingDirective, SelectionDirective, FilterService, FilterCellTemplateDirective, FilterCellComponent, StringFilterCellComponent, DateFilterCellComponent, BaseFilterCellComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, StringFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, RowFilterModule, FilterMenuModule, BodyModule, GroupModule, HeaderModule, FooterModule, PagerModule, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, EditTemplateDirective, ColGroupComponent, HeaderComponent, ListComponent, FooterComponent, TableBodyComponent, PagerComponent, CustomMessagesComponent, LoadingComponent, PDFModule, PDFComponent, PDFMarginComponent, PDFService, ExcelModule, ExcelComponent, ExcelService, ExcelExportEvent, CellCloseEvent, SuspendService, GroupBindingDirective, slice, count, Skip, ColumnReorderEvent, FocusableDirective, ColumnVisibilityChangeEvent, ColumnMenuComponent, ColumnLockedChangeEvent, ColumnStickyChangeEvent, SinglePopupService, PopupCloseEvent, MenuTabbingService };
+export { ColumnChooserComponent, ColumnListComponent, ColumnMenuChooserComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemBase, ColumnMenuItemContentTemplateDirective, ColumnMenuItemComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnMenuModule, ColumnMenuService, ColumnHandleDirective, ColumnResizingService, TableDirective, ColumnInfoService, DomEventsService, IdService, PreventableEvent, SortService, ChangeNotificationService, ColumnReorderService, DragAndDropModule, DragAndDropService, DragHintService, DraggableColumnDirective, DropCueService, DropTargetDirective, EditingDirectiveBase, RowEditingDirectiveBase, AddCommandDirective, CancelCommandDirective, EditCommandDirective, EditService as EditService$1, LocalDataChangesService, RemoveCommandDirective, SaveCommandDirective, ExcelCommandDirective, BooleanFilterComponent, BooleanFilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellWrapperComponent, DateFilterComponent, FilterHostDirective, FilterInputWrapperComponent, FilterInputDirective, FilterRowComponent, DateFilterMenuInputComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuComponent, BooleanFilterRadioButtonDirective, NumericFilterMenuInputComponent, StringFilterMenuInputComponent, NumericFilterComponent, FilterOperatorBase, SharedFilterModule, StringFilterComponent, GroupHeaderComponent, GroupIndicatorComponent, GroupInfoService, GroupPanelComponent, GroupsService, BrowserSupportService, ResizeService, ResponsiveService, LocalizedMessagesDirective, Messages, FocusGroup, FOCUS_ROOT_ACTIVE, FocusRoot, LogicalCellDirective, LogicalRowDirective, NavigationService, PagerContextService, PagerDropDownListDirective, PagerElementComponent, PagerInputDirective, PDFCommandDirective, PDFTemplateDirective, CellComponent, CELL_CONTEXT, EMPTY_CELL_CONTEXT, FieldAccessorPipe, DetailsService, DEFAULT_SCROLLER_FACTORY, SCROLLER_FACTORY_TOKEN, ScrollRequestService, ScrollSyncService, ScrollerService, CellSelectionService, GridMarqueeDirective, SelectAllCheckboxDirective, SelectionCheckboxDirective, Selection, SelectionService, GridModule, SharedModule, GridComponent, ColumnBase$1 as ColumnBase, ColumnComponent, CommandColumnComponent, SpanColumnComponent, ColumnGroupComponent, CheckboxColumnComponent, ToolbarComponent, ToolbarTemplateDirective, CellTemplateDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, PagerTemplateDirective, GridSpacerComponent, ExpandDetailsDirective, ExpandGroupDirective, DetailTemplateDirective, DetailExpandEvent, DetailCollapseEvent, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ResizableContainerDirective, TemplateContextDirective, NoRecordsTemplateDirective, DataBindingDirective, SelectionDirective, FilterService, FilterCellTemplateDirective, FilterCellComponent, StringFilterCellComponent, DateFilterCellComponent, BaseFilterCellComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, StringFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, RowFilterModule, FilterMenuModule, BodyModule, GroupModule, HeaderModule, FooterModule, PagerModule, TemplateEditingDirective, ReactiveEditingDirective, InCellEditingDirective, EditTemplateDirective, ColGroupComponent, HeaderComponent, ListComponent, FooterComponent, TableBodyComponent, PagerComponent, CustomMessagesComponent, LoadingComponent, PDFModule, PDFComponent, PDFMarginComponent, PDFService, ExcelModule, ExcelComponent, ExcelService, ExcelExportEvent, CellCloseEvent, SuspendService, GroupBindingDirective, slice, count, Skip, ColumnReorderEvent, FocusableDirective, ColumnVisibilityChangeEvent, ColumnMenuComponent, ColumnLockedChangeEvent, ColumnStickyChangeEvent, SinglePopupService, PopupCloseEvent, MenuTabbingService };