@progress/kendo-angular-grid 7.2.5-dev.202208181343 → 7.3.0

package/esm2015/rendering/table-body.component.js

@@ -361,7 +361,7 @@ export class TableBodyComponent {
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
-        <tr class="k-grid-add-row k-grid-edit-row"
+        <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -442,7 +442,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-alt]="isOdd(item)"
-            [class.k-master-row]="detailTemplate?.templateRef"
+            [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
@@ -580,7 +580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: '[kendoGridTableBody]',
                     template: `
     <ng-container *ngIf="editService.hasNewItem">
-        <tr class="k-grid-add-row k-grid-edit-row"
+        <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -661,7 +661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-alt]="isOdd(item)"
-            [class.k-master-row]="detailTemplate?.templateRef"
+            [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">

package/fesm2015/kendo-angular-grid.js

@@ -2836,7 +2836,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1660829972,
+    publishDate: 1662712446,
     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'
 };
@@ -3367,7 +3367,8 @@ class ColumnBase {
          */
         this.reorderable = true;
         /**
-         * The width (in pixels) below which the user is not able to resize the column by using the UI.
+         * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+         * @default 10
          */
         this.minResizableWidth = 10;
         this._locked = false;
@@ -3544,7 +3545,7 @@ class ColumnBase {
     }
 }
 ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnBase, decorators: [{
             type: Component,
             args: [{
@@ -3557,6 +3558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], minResizableWidth: [{
                 type: Input
+            }], maxResizableWidth: [{
+                type: Input
             }], title: [{
                 type: Input
             }], width: [{
@@ -8543,6 +8546,7 @@ class ColGroupComponent {
     constructor() {
         this.columns = [];
         this.groups = [];
+        this.sort = new Array();
     }
     get columnsToRender() {
         return columnsToRender(this.columns);
@@ -8550,13 +8554,28 @@ class ColGroupComponent {
     trackBy(index, _item) {
         return index;
     }
+    isSorted(column) {
+        const state = this.sortDescriptor(column.field);
+        return this.isSortable(column) && (state.dir === 'asc' || state.dir === 'desc');
+    }
+    getColumnComponent(column) {
+        return column;
+    }
+    isSortable(column) {
+        return !isNullOrEmptyString(column.field) && isTruthy(column.sortable);
+    }
+    sortDescriptor(field) {
+        return this.sort.find(item => item.field === field) || { field };
+    }
 }
 ColGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate" }, ngImport: i0, template: `
+ColGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", sort: "sort" }, ngImport: i0, template: `
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
         <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
-        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
+        [style.width.px]="column.width"
+        [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, decorators: [{
@@ -8567,7 +8586,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
         <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
-        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
+        [style.width.px]="column.width"
+        [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `
                 }]
@@ -8577,6 +8598,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], detailTemplate: [{
                 type: Input
+            }], sort: [{
+                type: Input
             }] } });
 
 /**
@@ -11026,7 +11049,7 @@ class FilterMenuComponent {
 FilterMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: i1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
         <a #anchor
-            [ngClass]="{'k-grid-filter':true, 'k-active': hasFilters}"
+            [ngClass]="{'k-grid-filter-menu':true, 'k-grid-header-menu':true, 'k-active': hasFilters}"
             [tabindex]="tabIndex"
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
@@ -11051,7 +11074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-grid-filter-menu',
                     template: `
         <a #anchor
-            [ngClass]="{'k-grid-filter':true, 'k-active': hasFilters}"
+            [ngClass]="{'k-grid-filter-menu':true, 'k-grid-header-menu':true, 'k-active': hasFilters}"
             [tabindex]="tabIndex"
             (click)="toggle(anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
@@ -12628,7 +12651,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         MenuTabbingService
     ], viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <a #anchor
-            class="k-grid-column-menu k-grid-filter"
+            class="k-grid-header-menu k-grid-column-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
@@ -12689,7 +12712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: 'kendo-grid-column-menu',
                     template: `
         <a #anchor
-            class="k-grid-column-menu k-grid-filter"
+            class="k-grid-header-menu k-grid-column-menu"
             [ngClass]="{ 'k-active': isActive }"
             (click)="toggle($event, anchor, template)"
             (keydown.enter)="$event.stopImmediatePropagation()"
@@ -14118,9 +14141,11 @@ class ColumnHandleDirective {
         if (isTruthy(this.rtl)) {
             delta *= -1;
         }
-        const newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
-        const tableDelta = newWidth > this.column.minResizableWidth ?
-            delta : this.column.minResizableWidth - this.column.resizeStartWidth;
+        let newWidth = Math.max(this.column.resizeStartWidth + delta, this.column.minResizableWidth);
+        if (isPresent(this.column.maxResizableWidth)) {
+            newWidth = Math.min(newWidth, this.column.maxResizableWidth);
+        }
+        const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
         this.service.resizeTable(this.column, tableDelta);
     }
@@ -14145,6 +14170,25 @@ class ColumnHandleDirective {
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    getTableDelta(newWidth, delta) {
+        const minWidth = this.column.minResizableWidth;
+        const maxWidth = this.column.maxResizableWidth;
+        const startWidth = this.column.resizeStartWidth;
+        const isAboveMin = newWidth > minWidth;
+        const isBelowMax = newWidth < maxWidth;
+        const isInBoundaries = isPresent(maxWidth) ?
+            isAboveMin && isBelowMax :
+            isAboveMin;
+        if (isInBoundaries) {
+            return delta;
+        }
+        else if (newWidth <= minWidth) {
+            return minWidth - startWidth;
+        }
+        else {
+            return startWidth - maxWidth;
+        }
+    }
 }
 ColumnHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
 ColumnHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
@@ -14577,6 +14621,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     role="columnheader"
                     aria-selected="false"
                     [attr.aria-sort]="sortState(getColumnComponent(column))"
+                    [class.k-sorted]="!!sortState(getColumnComponent(column))"
                     (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
                     kendoDropTarget
                     kendoDraggable
@@ -14599,31 +14644,37 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [attr.colspan]="column.colspan">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
-                        <kendo-grid-filter-menu
-                            *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                            [column]="getColumnComponent(column)"
-                            [filter]="filter"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-filter-menu>
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [sortable]="sortable"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: column.leafIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-container *ngIf="!column.headerTemplateRef">{{column.displayTitle}}</ng-container>
+                        <span class="k-cell-inner">
+                            <span class="k-link">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.headerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                                <ng-container *ngIf="!column.headerTemplateRef">
+                                    <span class="k-column-title">{{column.displayTitle}}</span>
+                                </ng-container>
+                            </span>
+                            <kendo-grid-filter-menu
+                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
+                                [column]="getColumnComponent(column)"
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
+                            </kendo-grid-filter-menu>
+                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
+                            </kendo-grid-column-menu>
+                        </span>
                     </ng-container>
 
                     <ng-container *ngIf="isSortable(getColumnComponent(column))">
@@ -14708,28 +14759,34 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan">
+                    <span class="k-cell-inner">
+                        <span class="k-link">
+                            <ng-template
+                                [templateContext]="{
+                                    templateRef: column.headerTemplateRef,
+                                    columnIndex: lockedColumnsCount + columnIndex,
+                                    column: column,
+                                    $implicit: column
+                                }">
+                            </ng-template>
+                            <ng-container *ngIf="!column.headerTemplateRef">
+                                <span class="k-column-title">{{column.displayTitle}}</span>
+                            </ng-container>
+                        </span>
                         <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
                             [standalone]="false"
                             [settings]="columnMenuSettings"
                             [column]="column"
                             [columnMenuTemplate]="columnMenuTemplate">
                         </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: lockedColumnsCount + columnIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-container *ngIf="!column.headerTemplateRef">{{column.displayTitle}}</ng-container>
-                        <span kendoGridColumnHandle
-                            kendoDraggable
-                            class="k-column-resizer"
-                            *ngIf="resizable"
-                            [column]="column"
-                            [columns]="columns">
-                        </span>
+                    </span>
+                    <span kendoGridColumnHandle
+                        kendoDraggable
+                        class="k-column-resizer"
+                        *ngIf="resizable"
+                        [column]="column"
+                        [columns]="columns">
+                    </span>
                 </th>
             </ng-container>
         </tr>
@@ -14785,6 +14842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     role="columnheader"
                     aria-selected="false"
                     [attr.aria-sort]="sortState(getColumnComponent(column))"
+                    [class.k-sorted]="!!sortState(getColumnComponent(column))"
                     (keydown)="onHeaderKeydown(getColumnComponent(column), $event)"
                     kendoDropTarget
                     kendoDraggable
@@ -14807,31 +14865,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [attr.colspan]="column.colspan">
 
                     <ng-container *ngIf="!isSortable(getColumnComponent(column))">
-                        <kendo-grid-filter-menu
-                            *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
-                            [column]="getColumnComponent(column)"
-                            [filter]="filter"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-filter-menu>
-                        <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
-                            [standalone]="false"
-                            [settings]="columnMenuSettings"
-                            [column]="column"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [sortable]="sortable"
-                            [tabIndex]="tabIndex">
-                        </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: column.leafIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-container *ngIf="!column.headerTemplateRef">{{column.displayTitle}}</ng-container>
+                        <span class="k-cell-inner">
+                            <span class="k-link">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.headerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                                <ng-container *ngIf="!column.headerTemplateRef">
+                                    <span class="k-column-title">{{column.displayTitle}}</span>
+                                </ng-container>
+                            </span>
+                            <kendo-grid-filter-menu
+                                *ngIf="showFilterMenu && isFilterable(getColumnComponent(column))"
+                                [column]="getColumnComponent(column)"
+                                [filter]="filter"
+                                [tabIndex]="tabIndex">
+                            </kendo-grid-filter-menu>
+                            <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
+                                [standalone]="false"
+                                [settings]="columnMenuSettings"
+                                [column]="column"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [sortable]="sortable"
+                                [tabIndex]="tabIndex">
+                            </kendo-grid-column-menu>
+                        </span>
                     </ng-container>
 
                     <ng-container *ngIf="isSortable(getColumnComponent(column))">
@@ -14916,28 +14980,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [ngStyle]="column.headerStyle"
                     [attr.rowspan]="column.rowspan(totalColumnLevels)"
                     [attr.colspan]="column.colspan">
+                    <span class="k-cell-inner">
+                        <span class="k-link">
+                            <ng-template
+                                [templateContext]="{
+                                    templateRef: column.headerTemplateRef,
+                                    columnIndex: lockedColumnsCount + columnIndex,
+                                    column: column,
+                                    $implicit: column
+                                }">
+                            </ng-template>
+                            <ng-container *ngIf="!column.headerTemplateRef">
+                                <span class="k-column-title">{{column.displayTitle}}</span>
+                            </ng-container>
+                        </span>
                         <kendo-grid-column-menu *ngIf="showColumnMenu(column)"
                             [standalone]="false"
                             [settings]="columnMenuSettings"
                             [column]="column"
                             [columnMenuTemplate]="columnMenuTemplate">
                         </kendo-grid-column-menu>
-                        <ng-template
-                            [templateContext]="{
-                                templateRef: column.headerTemplateRef,
-                                columnIndex: lockedColumnsCount + columnIndex,
-                                column: column,
-                                $implicit: column
-                            }">
-                        </ng-template>
-                        <ng-container *ngIf="!column.headerTemplateRef">{{column.displayTitle}}</ng-container>
-                        <span kendoGridColumnHandle
-                            kendoDraggable
-                            class="k-column-resizer"
-                            *ngIf="resizable"
-                            [column]="column"
-                            [columns]="columns">
-                        </span>
+                    </span>
+                    <span kendoGridColumnHandle
+                        kendoDraggable
+                        class="k-column-resizer"
+                        *ngIf="resizable"
+                        [column]="column"
+                        [columns]="columns">
+                    </span>
                 </th>
             </ng-container>
         </tr>
@@ -16301,7 +16371,7 @@ class TableBodyComponent {
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
-        <tr class="k-grid-add-row k-grid-edit-row"
+        <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -16382,7 +16452,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-alt]="isOdd(item)"
-            [class.k-master-row]="detailTemplate?.templateRef"
+            [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
@@ -16520,7 +16590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     selector: '[kendoGridTableBody]',
                     template: `
     <ng-container *ngIf="editService.hasNewItem">
-        <tr class="k-grid-add-row k-grid-edit-row"
+        <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
@@ -16601,7 +16671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-alt]="isOdd(item)"
-            [class.k-master-row]="detailTemplate?.templateRef"
+            [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
@@ -17030,6 +17100,7 @@ class ListComponent {
         this.selectable = false;
         this.groupable = false;
         this.trackBy = defaultTrackBy;
+        this.sort = new Array();
         this.contentScroll = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.scrollBottom = new EventEmitter();
@@ -17483,7 +17554,7 @@ class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: DetailsService }, { token: ChangeNotificationService }, { token: SuspendService }, { token: GroupsService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }, { token: ResizeService }, { token: EditService }, { token: BrowserSupportService }, { token: NavigationService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: PDFService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-grid-list", inputs: { data: "data", groups: "groups", total: "total", rowHeight: "rowHeight", stickyRowHeight: "stickyRowHeight", detailRowHeight: "detailRowHeight", take: "take", skip: "skip", columns: "columns", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", selectable: "selectable", groupable: "groupable", filterable: "filterable", rowClass: "rowClass", rowSticky: "rowSticky", loading: "loading", trackBy: "trackBy", virtualColumns: "virtualColumns", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", loadingTemplate: "loadingTemplate", sort: "sort" }, outputs: { contentScroll: "contentScroll", pageChange: "pageChange", scrollBottom: "scrollBottom" }, host: { properties: { "class.k-grid-container": "this.hostClass", "attr.role": "this.hostRole" } }, providers: [
         {
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
@@ -17505,7 +17576,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
-                    [detailTemplate]="detailTemplate">
+                    [detailTemplate]="detailTemplate"
+                    [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
@@ -17544,7 +17616,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
-                    [detailTemplate]="detailTemplate">
+                    [detailTemplate]="detailTemplate"
+                    [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
@@ -17580,7 +17653,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -17608,7 +17681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     role="presentation"
                     [groups]="groups"
                     [columns]="$any(lockedLeafColumns)"
-                    [detailTemplate]="detailTemplate">
+                    [detailTemplate]="detailTemplate"
+                    [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
@@ -17647,7 +17721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     role="presentation"
                     [groups]="isLocked ? [] : groups"
                     [columns]="$any(nonLockedColumnsToRender)"
-                    [detailTemplate]="detailTemplate">
+                    [detailTemplate]="detailTemplate"
+                    [sort]="sort">
                 </colgroup>
                 <tbody kendoGridTableBody
                     role="presentation"
@@ -17738,6 +17813,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], loadingTemplate: [{
                 type: Input
+            }], sort: [{
+                type: Input
             }], contentScroll: [{
                 type: Output
             }], pageChange: [{
@@ -20514,6 +20591,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 kendoDraggable
                 kendoGridSelectionMarquee
                 [enableDrag]="marqueeSelection"
+                [sort]="sort"
                 >
             </kendo-grid-list>
             <div
@@ -20627,7 +20705,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             (pageChange)="notifyPageChange('pager', $event)">
         </kendo-pager>
         <kendo-grid-toolbar class="k-toolbar k-grid-toolbar k-grid-toolbar-bottom" *ngIf="showBottomToolbar" position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21011,6 +21089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 kendoDraggable
                 kendoGridSelectionMarquee
                 [enableDrag]="marqueeSelection"
+                [sort]="sort"
                 >
             </kendo-grid-list>
             <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "7.2.5-dev.202208181343",
+  "version": "7.3.0",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",