@progress/kendo-angular-grid 6.1.0-dev.202202221518 → 6.1.0-dev.202203011011

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

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

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645542579,
+    publishDate: 1646129010,
     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/es/rendering/header/header.component.js

@@ -90,6 +90,7 @@ var lockable = function (_a) {
 };
 var ɵ10 = lockable;
 var rules = and(ofColumnType, reorderable, notInSpanColumn, notSameElement, sameParent, not(lastNonLocked), lockable);
+var modifierKeys = ['alt', 'ctrl', 'shift', 'meta'];
 /**
  * @hidden
  */
@@ -140,8 +141,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;
@@ -152,7 +153,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) {
@@ -171,7 +174,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) {
@@ -227,14 +231,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(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(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/es/rendering/list.component.js

@@ -772,7 +772,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, Inject(SCROLLER_FACTORY_TOKEN)),
         tslib_1.__metadata("design:paramtypes", [Object, DetailsService,

package/dist/es2015/columns/sort-settings.d.ts

@@ -5,7 +5,7 @@
 /**
  * Defines the settings for sorting the Grid column.
  */
-export declare type ColumnSortSettings = boolean | {
+export interface ColumnSortSettings {
     /**
      * Enables the removal of the column sorting.
      */
@@ -18,90 +18,54 @@ export declare type ColumnSortSettings = boolean | {
      * - `desc`
      */
     initialDirection?: 'asc' | 'desc';
-};
+}
 /**
- * Defines the settings for sorting the Grid.
+ * Specifies settings for sorting by single column.
  */
-export declare type SortSettings = boolean | ColumnSortSettings & {
+export interface SingleSortSettings extends ColumnSortSettings {
     /**
      * The sort mode of the Grid.
-     *
-     * The available values for setting the sort modes are:
-     * - `single`
-     * - `multiple`
      */
-    mode?: 'single' | 'multiple';
-    /**
-     * Enables the sort-sequence indicators for sorting multiple columns.
-     */
-    showIndexes?: boolean;
-};
+    mode?: 'single';
+}
 /**
- * @hidden
+ * Specifies a modifier key.
  */
-export declare const normalize: (...settings: (boolean | {
-    /**
-     * Enables the removal of the column sorting.
-     */
-    allowUnsort?: boolean;
-    /**
-     * Determines the initial (from the unsorted to the sorted state) sort direction.
-     *
-     * The available values for setting the initial sort direction are:
-     * - `asc` (default)
-     * - `desc`
-     */
-    initialDirection?: "desc" | "asc";
-} | (false & {
+export declare type ModifierKey = 'none' | 'ctrl' | 'shift' | 'alt';
+/**
+ * Specifies settings for sorting by multiple columns.
+ */
+export interface MultipleSortSettings extends ColumnSortSettings {
     /**
      * The sort mode of the Grid.
-     *
-     * The available values for setting the sort modes are:
-     * - `single`
-     * - `multiple`
      */
-    mode?: "single" | "multiple";
+    mode?: 'multiple';
     /**
      * Enables the sort-sequence indicators for sorting multiple columns.
      */
     showIndexes?: boolean;
-}) | (true & {
     /**
-     * The sort mode of the Grid.
+     * Specifies the modifier key for sorting by 2nd or more columns.
      *
-     * The available values for setting the sort modes are:
-     * - `single`
-     * - `multiple`
-     */
-    mode?: "single" | "multiple";
-    /**
-     * Enables the sort-sequence indicators for sorting multiple columns.
-     */
-    showIndexes?: boolean;
-}) | ({
-    /**
-     * Enables the removal of the column sorting.
-     */
-    allowUnsort?: boolean;
-    /**
-     * Determines the initial (from the unsorted to the sorted state) sort direction.
+     * The default value is 'none', meaning that clicking a column will add it to the sort order.
+     * Selecting a key modifier along with the click will remove sorting from all other columns.
      *
-     * The available values for setting the initial sort direction are:
-     * - `asc` (default)
-     * - `desc`
-     */
-    initialDirection?: "desc" | "asc";
-} & {
-    /**
-     * The sort mode of the Grid.
+     * If the key is set to 'ctrl', 'shift' or 'alt', clicking a column will remove sorting from all other columns.
+     * The specified key must be pressed to add the column to the sort order instead.
      *
-     * The available values for setting the sort modes are:
-     * - `single`
-     * - `multiple`
-     */
-    mode?: "single" | "multiple";
-    /**
-     * Enables the sort-sequence indicators for sorting multiple columns.
+     * > The `ctrl` value corresponds to the `Command` key in a macOS environment.
+     *
+     * @default 'none'
      */
-    showIndexes?: boolean;
-}))[]) => any;
+    multiSortKey?: ModifierKey;
+}
+/**
+ * Defines the settings for sorting the Grid.
+ * Can be of type `boolean`, [SingleSortSettings]({% slug api_grid_singlesortsettings %}),
+ * or [MultipleSortSettings]({% slug api_grid_multiplesortsettings %}).
+ */
+export declare type SortSettings = boolean | SingleSortSettings | MultipleSortSettings;
+/**
+ * @hidden
+ */
+export declare const normalize: (...settings: (boolean | ColumnSortSettings | SingleSortSettings | MultipleSortSettings)[]) => any;

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

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