@progress/kendo-angular-grid 18.1.0-develop.10 → 18.1.0-develop.12

package/column-resizing/column-handle.directive.d.ts

@@ -29,6 +29,10 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
     private get isConstrainedMode();
     private subscriptions;
     private rtl;
+    private totalChildrenSum;
+    private childrenColumns;
+    private minWidthTotal;
+    private foundColumn;
     autoFit(): void;
     constructor(draggable: DraggableDirective, element: ElementRef, service: ColumnResizingService, zone: NgZone, cdr: ChangeDetectorRef, ctx: ContextService, columnInfoService: ColumnInfoService);
     ngOnInit(): void;
@@ -39,9 +43,18 @@ export declare class ColumnHandleDirective implements OnInit, OnDestroy {
     private resize;
     private sizeToFit;
     private updateWidth;
+    private updateWidthsOfResizedColumns;
+    private calcNewColumnWidth;
+    private setAdjacentColumn;
+    private firstGroupChild;
+    private setGroupWidths;
+    private updateWidthOfDraggedColumn;
+    private calcChildrenWidth;
     private columnsForLevel;
+    private minAdjacentColumnWidth;
     private getTableDelta;
     private stopPropagation;
+    private isLastInGroup;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnHandleDirective, [{ host: true; }, null, null, null, null, null, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnHandleDirective, "[kendoGridColumnHandle]", never, { "isLast": { "alias": "isLast"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "column": { "alias": "column"; "required": false; }; }, {}, never, never, true, never>;
 }

package/column-resizing/column-resizing.service.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { ColumnBase } from '../columns/column-base';
 import { ColumnResizeAction, ColumnResizeArgs, AutoFitFn } from './column-resize.interface';
+import { ColumnGroupComponent } from '../columns/column-group.component';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -15,8 +16,10 @@ export declare class ColumnResizingService {
     areColumnsReordered: boolean;
     isShiftPressed: boolean;
     originalWidth: number;
+    draggedGroupColumn: ColumnGroupComponent;
+    resizedColumns: Array<ColumnResizeArgs>;
+    autoFitResize: boolean;
     private column;
-    private resizedColumns;
     private tables;
     private batch;
     start(column: ColumnBase): void;
@@ -33,6 +36,7 @@ export declare class ColumnResizingService {
     private trackColumns;
     private autoFitStart;
     private autoFitBatch;
+    private restoreInitialMaxMinWidths;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResizingService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ColumnResizingService>;
 }

package/columns/column-base.d.ts

@@ -26,6 +26,18 @@ export declare const isRowReorderColumn: (column: any) => any;
  */
 export declare class ColumnBase {
     parent?: ColumnBase;
+    /**
+     * @hidden
+     */
+    isReordered: boolean;
+    /**
+     * @hidden
+     */
+    initialMaxResizableWidth: number;
+    /**
+     * @hidden
+     */
+    initialMinResizableWidth: number;
     /**
      * @hidden
      */

package/columns/column.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 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';
+import { TemplateRef, AfterViewInit } from '@angular/core';
 import { CellTemplateDirective } from '../rendering/cell-template.directive';
 import { GroupHeaderTemplateDirective } from '../grouping/group-header-template.directive';
 import { GroupHeaderColumnTemplateDirective } from '../grouping/group-header-column-template.directive';
@@ -30,7 +30,7 @@ export declare function isColumnComponent(column: any): column is ColumnComponen
  * </kendo-grid>
  * ```
  */
-export declare class ColumnComponent extends ColumnBase {
+export declare class ColumnComponent extends ColumnBase implements AfterViewInit {
     /**
      * The field to which the column is bound.
      */
@@ -94,6 +94,7 @@ export declare class ColumnComponent extends ColumnBase {
     get filterCellTemplateRef(): TemplateRef<any>;
     get filterMenuTemplateRef(): TemplateRef<any>;
     get displayTitle(): string;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-grid-column", never, { "field": { "alias": "field"; "required": false; }; "format": { "alias": "format"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "groupable": { "alias": "groupable"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, ["template", "groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "editTemplate", "filterCellTemplate", "filterMenuTemplate"], never, true, never>;
 }

package/esm2022/column-resizing/column-handle.directive.mjs

@@ -31,11 +31,20 @@ const toPercentage = (value, whole) => (value / whole) * 100;
 /**
  * @hidden
  */
-const headerWidth = (handle) => handle.nativeElement.parentElement.offsetWidth;
+const headerWidth = (handle) => handle.nativeElement.parentElement.getBoundingClientRect().width;
 /**
  * @hidden
  */
-const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.offsetWidth;
+const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.getBoundingClientRect().width;
+/**
+ * @hidden
+ */
+const adjacentColumnInGroupWidth = (handle, rowIndex, colIndex) => {
+    const tableElement = handle.nativeElement.closest('.k-grid-header-table');
+    const selector = (rowAttribute) => `tr[${rowAttribute}="${rowIndex}"] th[aria-colindex="${colIndex}"]`;
+    const thElement = tableElement.querySelector([selector('aria-rowindex'), selector('data-kendo-grid-row-index')]);
+    return thElement.getBoundingClientRect().width;
+};
 /**
  * @hidden
  */
@@ -95,7 +104,7 @@ export class ColumnHandleDirective {
     columns = [];
     column;
     get visible() {
-        if (this.isConstrainedMode && this.isLast) {
+        if (this.isConstrainedMode && (this.isLast || this.isLastInGroup(this.column))) {
             return 'none';
         }
         return this.column.resizable ? 'block' : 'none';
@@ -115,7 +124,12 @@ export class ColumnHandleDirective {
     }
     subscriptions = new Subscription();
     rtl = false;
+    totalChildrenSum = 0;
+    childrenColumns = [];
+    minWidthTotal = 0;
+    foundColumn;
     autoFit() {
+        this.service.autoFitResize = true;
         const allLeafs = allLeafColumns(this.columns);
         const currentLeafs = leafColumns([this.column]).filter(column => isTruthy(column.resizable));
         const columnInfo = currentLeafs.map(column => {
@@ -173,35 +187,19 @@ export class ColumnHandleDirective {
     }
     shouldUpdate() {
         return !allLeafColumns(this.columns)
-            .map(column => column.width)
+            .map(column => column.width || (this.isConstrainedMode && !column.width && column.implicitWidth))
             .some(isBlank);
     }
     initColumnWidth() {
         this.column.width = headerWidth(this.element);
+        if (this.isConstrainedMode) {
+            this.column.resizeStartWidth = this.column.width;
+        }
     }
     initState() {
         this.column.resizeStartWidth = headerWidth(this.element);
-        let columns = [];
-        if (this.ctx.grid?.columns) {
-            columns = Array.from(this.ctx.grid?.columns) || [];
-        }
-        if (this.isConstrainedMode) {
-            if (this.service.areColumnsReordered) {
-                this.service.adjacentColumn = columns.find(c => c.orderIndex === this.column.orderIndex + 1);
-                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
-                this.service.resizedColumn({
-                    column: this.service.adjacentColumn,
-                    oldWidth: this.service.adjacentColumn.resizeStartWidth
-                });
-            }
-            else {
-                this.service.adjacentColumn = columns[this.column.leafIndex + 1];
-                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
-                this.service.resizedColumn({
-                    column: this.service.adjacentColumn,
-                    oldWidth: this.service.adjacentColumn.resizeStartWidth
-                });
-            }
+        if (this.isConstrainedMode && !this.service.adjacentColumn) {
+            this.setAdjacentColumn();
         }
         this.service.resizedColumn({
             column: this.column,
@@ -218,12 +216,7 @@ export class ColumnHandleDirective {
             newWidth = Math.min(newWidth, this.column.maxResizableWidth);
         }
         if (this.isConstrainedMode) {
-            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
-            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
-        }
-        if (this.isConstrainedMode && isPresent(this.service.adjacentColumn.maxResizableWidth)) {
-            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
-            newWidth = Math.max(newWidth, maxAllowedResizableWidth);
+            newWidth = this.calcNewColumnWidth(newWidth);
         }
         const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
@@ -237,11 +230,8 @@ export class ColumnHandleDirective {
         this.service.resizeTable(this.column, tableDelta);
     }
     updateWidth(column, width) {
-        if (this.isConstrainedMode && this.service.adjacentColumn) {
-            const adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
-            if (adjacentColumnNewWidth < (column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth)) {
-                this.service.adjacentColumn.width = adjacentColumnNewWidth;
-            }
+        if (this.isConstrainedMode && this.service.adjacentColumn && !this.service.autoFitResize) {
+            this.updateWidthsOfResizedColumns(column, width);
         }
         column.width = width;
         this.columnInfoService.hiddenColumns.forEach((col) => {
@@ -253,9 +243,188 @@ export class ColumnHandleDirective {
         });
         this.cdr.markForCheck(); //force CD cycle
     }
+    updateWidthsOfResizedColumns(column, width) {
+        let adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
+        if (this.service.draggedGroupColumn && column.parent) {
+            this.updateWidthOfDraggedColumn(column, width);
+            this.setGroupWidths(this.service.draggedGroupColumn);
+        }
+        else if (!this.service.draggedGroupColumn && !column.parent && this.service.adjacentColumn.parent) {
+            this.service.adjacentColumn.parent.width = column.width + this.service.adjacentColumn.parent.width - width;
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+        }
+        else if (!this.service.draggedGroupColumn && column.parent && this.service.adjacentColumn.parent) {
+            adjacentColumnNewWidth = column.width + this.service.adjacentColumn.width - width;
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+            const filteredColumns = this.service.adjacentColumn.parent.children.filter(c => c !== this.service.adjacentColumn);
+            const filteredColumnsWidth = filteredColumns.reduce((acc, c) => acc + c.width, 0);
+            this.service.adjacentColumn.parent.width = adjacentColumnNewWidth + filteredColumnsWidth;
+            this.setGroupWidths(this.service.adjacentColumn.parent);
+        }
+        else if (adjacentColumnNewWidth > this.service.adjacentColumn.minResizableWidth) {
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+        }
+    }
+    calcNewColumnWidth(newWidth) {
+        let maxAllowedResizableWidth;
+        if (!this.service.adjacentColumn.parent) {
+            maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width - this.service.adjacentColumn.minResizableWidth;
+            if (!this.column.parent) {
+                maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+                if (this.service.adjacentColumn.maxResizableWidth) {
+                    const minResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
+                    maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+                    this.column.minResizableWidth = minResizableWidth;
+                    this.column.maxResizableWidth = maxAllowedResizableWidth;
+                }
+            }
+        }
+        else {
+            maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width;
+            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
+            this.minWidthTotal = 0;
+            const minResizableWidth = this.minAdjacentColumnWidth(this.service.adjacentColumn);
+            maxAllowedResizableWidth -= minResizableWidth;
+        }
+        return Math.min(newWidth, maxAllowedResizableWidth - 1);
+    }
+    setAdjacentColumn() {
+        const columnsForLevel = this.columnsForLevel(this.column.level);
+        if (this.column.parent) {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
+                this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
+            }
+            else {
+                const columnIndex = columnsForLevel.indexOf(this.column);
+                this.service.adjacentColumn = columnsForLevel[columnIndex + 1];
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                const parentColumnChildren = Array.from(this.column.parent.children);
+                const indexOfCurrentColumn = parentColumnChildren.indexOf(this.column);
+                let adjacentColumn;
+                if (indexOfCurrentColumn + 1 <= parentColumnChildren.length - 1) {
+                    adjacentColumn = parentColumnChildren[indexOfCurrentColumn + 1];
+                    if (adjacentColumn?.isColumnGroup) {
+                        this.service.adjacentColumn = adjacentColumn;
+                    }
+                }
+            }
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+            }
+            if (this.column.isColumnGroup) {
+                this.service.draggedGroupColumn = this.column;
+            }
+        }
+        else if (this.column.isColumnGroup) {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
+            }
+            else {
+                this.service.adjacentColumn = columnsForLevel[columnsForLevel.indexOf(this.column) + 1];
+            }
+            this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+            }
+            this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
+            this.service.draggedGroupColumn = this.column;
+        }
+        else {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(col => col.orderIndex === this.column.orderIndex + 1);
+            }
+            else {
+                let adjacentColumn = columnsForLevel.find(c => c.leafIndex === this.column.leafIndex + 1);
+                if (!adjacentColumn) {
+                    const indexOfCurrentColumn = columnsForLevel.indexOf(this.column);
+                    adjacentColumn = columnsForLevel[indexOfCurrentColumn + 1];
+                }
+                this.service.adjacentColumn = adjacentColumn;
+            }
+            if (!this.service.adjacentColumn.parent) {
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+            }
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+                const rowIndex = this.service.adjacentColumn.level + 1;
+                const colIndex = this.service.adjacentColumn.leafIndex + 1;
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnInGroupWidth(this.element, rowIndex, colIndex);
+            }
+        }
+        this.service.resizedColumn({
+            column: this.service.adjacentColumn,
+            oldWidth: this.service.adjacentColumn.resizeStartWidth
+        });
+    }
+    firstGroupChild(column) {
+        Array.from(column.children).sort((a, b) => a.orderIndex - b.orderIndex).forEach((c, idx) => {
+            if (idx === 0 && !c.isColumnGroup) {
+                if (!this.foundColumn) {
+                    this.foundColumn = c;
+                }
+            }
+            else if (c.isColumnGroup) {
+                this.firstGroupChild(c);
+            }
+        });
+        return this.foundColumn;
+    }
+    setGroupWidths(column) {
+        const childrenWidths = column.children.reduce((acc, c) => acc + c.width, 0);
+        column.width = childrenWidths;
+        column.children.forEach(c => {
+            if (c.isColumnGroup) {
+                this.setGroupWidths(c);
+            }
+        });
+    }
+    updateWidthOfDraggedColumn(column, width) {
+        this.totalChildrenSum = 0;
+        this.childrenColumns = [];
+        this.calcChildrenWidth(this.service.draggedGroupColumn);
+        const childrenWidthNotIncludingColumn = this.childrenColumns.reduce((acc, col) => {
+            return col !== column ? acc + col.width : acc;
+        }, 0);
+        this.service.draggedGroupColumn.width = childrenWidthNotIncludingColumn + width;
+        if (this.service.adjacentColumn.minResizableWidth <= this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn) {
+            this.service.adjacentColumn.width = this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn;
+        }
+    }
+    calcChildrenWidth(column) {
+        const columnChildren = Array.from(column.children);
+        const childrenNoGroups = columnChildren.filter(c => !c.isColumnGroup);
+        const childrenGroups = columnChildren.filter(c => c.isColumnGroup);
+        childrenNoGroups.forEach(col => {
+            if (this.childrenColumns.indexOf(col) === -1) {
+                this.childrenColumns.push(col);
+            }
+        });
+        this.totalChildrenSum += childrenNoGroups.reduce((acc, col) => acc + col.resizeStartWidth, 0);
+        childrenGroups.forEach((col) => {
+            this.calcChildrenWidth(col);
+        });
+    }
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    minAdjacentColumnWidth(column) {
+        if (column.isColumnGroup) {
+            Array.from(column.children).forEach(c => {
+                this.minAdjacentColumnWidth(c);
+            });
+        }
+        else {
+            this.minWidthTotal += column.minResizableWidth;
+            if (column.width < column.minResizableWidth) {
+                column.width = column.minResizableWidth;
+            }
+        }
+        return this.minWidthTotal;
+    }
     getTableDelta(newWidth, delta) {
         const minWidth = this.column.minResizableWidth;
         const maxWidth = this.column.maxResizableWidth;
@@ -280,6 +449,18 @@ export class ColumnHandleDirective {
         event.stopPropagation();
         event.preventDefault();
     };
+    isLastInGroup(column) {
+        if (column.parent) {
+            const groupChildren = Array.from(column.parent.children);
+            const indexOfCurrentColumn = groupChildren.indexOf(column);
+            if (column.isReordered || column.orderIndex > 0 || (column.isReordered && column.orderIndex === 0)) {
+                return (column.orderIndex - groupChildren[0].orderIndex) === groupChildren.length - 1;
+            }
+            else {
+                return indexOfCurrentColumn === groupChildren.length - 1;
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i2.ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ContextService }, { token: i4.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { isLast: "isLast", columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }

package/esm2022/column-resizing/column-resizing.service.mjs

@@ -27,8 +27,10 @@ export class ColumnResizingService {
     areColumnsReordered = false;
     isShiftPressed = false;
     originalWidth;
-    column;
+    draggedGroupColumn;
     resizedColumns;
+    autoFitResize = false;
+    column;
     tables = [];
     batch = null;
     start(column) {
@@ -64,7 +66,10 @@ export class ColumnResizingService {
             resizedColumns: this.resizedColumns,
             type: 'end'
         });
+        this.restoreInitialMaxMinWidths();
         this.adjacentColumn = null;
+        this.draggedGroupColumn = null;
+        this.autoFitResize = false;
     }
     registerTable(tableMetadata) {
         this.tables.push(tableMetadata);
@@ -137,6 +142,16 @@ export class ColumnResizingService {
         });
         this.batch = null;
     }
+    restoreInitialMaxMinWidths() {
+        if (this.adjacentColumn) {
+            this.adjacentColumn.maxResizableWidth = this.adjacentColumn.initialMaxResizableWidth;
+            this.adjacentColumn.minResizableWidth = this.adjacentColumn.initialMinResizableWidth;
+        }
+        if (this.column) {
+            this.column.maxResizableWidth = this.column.initialMaxResizableWidth;
+            this.column.minResizableWidth = this.column.initialMinResizableWidth;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService });
 }

package/esm2022/column-resizing/table.directive.mjs

@@ -91,7 +91,7 @@ export class TableDirective {
         const constrainedModeNoShift = this.ctx.grid?.resizable === 'constrained' && !this.service.isShiftPressed;
         const unconstrainedModeShift = (this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained') && this.service.isShiftPressed;
         const isConstrainedMode = constrainedModeNoShift || unconstrainedModeShift;
-        if (isConstrainedMode) {
+        if (isConstrainedMode && !this.service.autoFitResize) {
             this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
         }
         else {

package/esm2022/columns/column-base.mjs

@@ -28,6 +28,18 @@ const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column)
  */
 export class ColumnBase {
     parent;
+    /**
+     * @hidden
+     */
+    isReordered;
+    /**
+     * @hidden
+     */
+    initialMaxResizableWidth;
+    /**
+     * @hidden
+     */
+    initialMinResizableWidth;
     /**
      * @hidden
      */

package/esm2022/columns/column.component.mjs

@@ -116,6 +116,10 @@ export class ColumnComponent extends ColumnBase {
     get displayTitle() {
         return this.title === undefined ? this.field : this.title;
     }
+    ngAfterViewInit() {
+        this.initialMaxResizableWidth = this.maxResizableWidth;
+        this.initialMinResizableWidth = this.minResizableWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
             {

package/esm2022/grid.component.mjs

@@ -14,7 +14,7 @@ import { isSpanColumnComponent } from './columns/span-column.component';
 import { isColumnGroupComponent, ColumnGroupComponent } from './columns/column-group.component';
 import { DetailTemplateDirective } from './rendering/details/detail-template.directive';
 import { normalize } from './common/pager-settings';
-import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers } from './utils';
+import { isArray, anyChanged, isChanged, isPresent, isUniversal, observe, isTruthy, createPromise, hasObservers, roundDown } from './utils';
 import { BrowserSupportService } from './layout/browser-support.service';
 import { DataResultIterator, DataCollection } from './data/data.collection';
 import { SelectionService } from './selection/selection.service';
@@ -1707,16 +1707,19 @@ export class GridComponent {
             }
             else if (column === source) {
                 i += toSkip;
+                column.isReordered = true;
                 continue;
             }
             else {
                 column.orderIndex = nextIndex;
             }
+            column.isReordered = true;
             nextIndex++;
             i++;
         }
         for (i = sourceColumnIndex; i < sourceColumnIndex + toSkip; i++) {
             expandedColumns[i].orderIndex = nextSourceIndex++;
+            expandedColumns[i].isReordered = true;
         }
         this.updateIndicesForLevel(source.level + 1);
         this.columnResizingService.areColumnsReordered = true;
@@ -1729,7 +1732,11 @@ export class GridComponent {
                 colsForLevel.push(...c.childrenArray.sort((a, b) => a.orderIndex - b.orderIndex));
             }
         });
-        expandColumnsWithSpan(colsForLevel).map((c, i) => c.orderIndex = i);
+        expandColumnsWithSpan(colsForLevel).map((c, i) => {
+            c.orderIndex = i;
+            c.isReordered = true;
+            return c;
+        });
         if (level < this.columnList.totalColumnLevels()) {
             this.updateIndicesForLevel(level + 1);
         }
@@ -2047,8 +2054,8 @@ export class GridComponent {
             .filter(item => isTruthy(item.column.resizable) && !item.column.isColumnGroup)
             .map(item => ({
             column: item.column,
-            newWidth: item.column.width,
-            oldWidth: item.oldWidth
+            newWidth: roundDown(item.column.width),
+            oldWidth: roundDown(item.oldWidth)
         }));
         this.columnResize.emit(args);
     }

package/esm2022/navigation/navigation.service.mjs

@@ -135,7 +135,25 @@ export class NavigationService {
         }
     }
     get isColumnResizable() {
-        return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+        const allColumns = Array.from(this.ctx.grid.columnsContainer.allColumns);
+        const column = allColumns.find((col) => col.level === this.activeCell.rowIndex && col.leafIndex === this.activeCell.colIndex);
+        if (!column.parent) {
+            if (column.isColumnGroup) {
+                return this.activeCell.colIndex + this.activeCell.colSpan !== this.ctx.grid.columnsContainer.leafColumnsToRender.length;
+            }
+            else {
+                return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+            }
+        }
+        else {
+            const columnGroup = column.parent;
+            const columnGroupChildren = Array.from(columnGroup.children).sort((a, b) => a.orderIndex - b.orderIndex);
+            const columnIndexInsideGroup = columnGroupChildren.indexOf(column);
+            if (column.isReordered || column.orderIndex > 0 || (column.isReordered && column.orderIndex === 0)) {
+                return (column.orderIndex - columnGroupChildren[0]['orderIndex']) !== columnGroupChildren.length - 1;
+            }
+            return columnIndexInsideGroup !== columnGroupChildren.length - 1;
+        }
     }
     viewport;
     columnViewport;
@@ -577,8 +595,7 @@ export class NavigationService {
         }
     }
     columnResize(onRightArrow) {
-        const column = this.ctx.grid.columnsContainer.leafColumnsToRender[this.activeCell.colIndex];
-        column.resizeStartWidth = Array.from(this.ctx.grid.wrapper.nativeElement.querySelectorAll('.k-grid-header th.k-header'))[this.activeCell.colIndex]['offsetWidth'];
+        const column = this.ctx.grid.columnsContainer.allColumns.find((col) => col.level === this.activeCell.rowIndex && col.leafIndex === this.activeCell.colIndex);
         this.resizeService.start(column);
         this.resizeService.resizeColumns(onRightArrow ? resizeStep : -1 * resizeStep);
         if (this.resizeService.resizeColumns.length > 0) {

package/esm2022/package-metadata.mjs

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

package/esm2022/rendering/header/header.component.mjs

@@ -368,9 +368,6 @@ export class HeaderComponent {
     isCheckboxColumn(column) {
         return isCheckboxColumn(column) && !column.templateRef;
     }
-    trackByIndex(index) {
-        return index;
-    }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
         return { ...column.headerStyle, ...stickyStyles };
@@ -509,7 +506,7 @@ export class HeaderComponent {
                 *ngIf="detailTemplate?.templateRef"
             >
             </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
+            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
                 <th *ngIf="!isColumnGroupComponent(column)"
                     kendoGridLogicalCell
                     [logicalRowIndex]="levelIndex"
@@ -736,7 +733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 *ngIf="detailTemplate?.templateRef"
             >
             </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
+            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
                 <th *ngIf="!isColumnGroupComponent(column)"
                     kendoGridLogicalCell
                     [logicalRowIndex]="levelIndex"

package/esm2022/utils.mjs

@@ -139,3 +139,7 @@ export const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatM
 export const isGroupResult = (obj) => {
     return 'aggregates' in obj && 'items' in obj && 'field' in obj && 'value' in obj;
 };
+/**
+ * @hidden
+ */
+export const roundDown = (value) => Math.floor(value * 100) / 100;

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

@@ -455,6 +455,10 @@ const recursiveFlatMap = (item) => isGroupResult(item) ? item.items.flatMap(recu
 const isGroupResult = (obj) => {
     return 'aggregates' in obj && 'items' in obj && 'field' in obj && 'value' in obj;
 };
+/**
+ * @hidden
+ */
+const roundDown = (value) => Math.floor(value * 100) / 100;
 
 /**
  * @hidden
@@ -2088,6 +2092,18 @@ const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column)
  */
 class ColumnBase {
     parent;
+    /**
+     * @hidden
+     */
+    isReordered;
+    /**
+     * @hidden
+     */
+    initialMaxResizableWidth;
+    /**
+     * @hidden
+     */
+    initialMinResizableWidth;
     /**
      * @hidden
      */
@@ -2755,6 +2771,10 @@ class ColumnComponent extends ColumnBase {
     get displayTitle() {
         return this.title === undefined ? this.field : this.title;
     }
+    ngAfterViewInit() {
+        this.initialMaxResizableWidth = this.maxResizableWidth;
+        this.initialMinResizableWidth = this.minResizableWidth;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
             {
@@ -3083,8 +3103,10 @@ class ColumnResizingService {
     areColumnsReordered = false;
     isShiftPressed = false;
     originalWidth;
-    column;
+    draggedGroupColumn;
     resizedColumns;
+    autoFitResize = false;
+    column;
     tables = [];
     batch = null;
     start(column) {
@@ -3120,7 +3142,10 @@ class ColumnResizingService {
             resizedColumns: this.resizedColumns,
             type: 'end'
         });
+        this.restoreInitialMaxMinWidths();
         this.adjacentColumn = null;
+        this.draggedGroupColumn = null;
+        this.autoFitResize = false;
     }
     registerTable(tableMetadata) {
         this.tables.push(tableMetadata);
@@ -3193,6 +3218,16 @@ class ColumnResizingService {
         });
         this.batch = null;
     }
+    restoreInitialMaxMinWidths() {
+        if (this.adjacentColumn) {
+            this.adjacentColumn.maxResizableWidth = this.adjacentColumn.initialMaxResizableWidth;
+            this.adjacentColumn.minResizableWidth = this.adjacentColumn.initialMinResizableWidth;
+        }
+        if (this.column) {
+            this.column.maxResizableWidth = this.column.initialMaxResizableWidth;
+            this.column.minResizableWidth = this.column.initialMinResizableWidth;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService });
 }
@@ -3304,7 +3339,25 @@ class NavigationService {
         }
     }
     get isColumnResizable() {
-        return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+        const allColumns = Array.from(this.ctx.grid.columnsContainer.allColumns);
+        const column = allColumns.find((col) => col.level === this.activeCell.rowIndex && col.leafIndex === this.activeCell.colIndex);
+        if (!column.parent) {
+            if (column.isColumnGroup) {
+                return this.activeCell.colIndex + this.activeCell.colSpan !== this.ctx.grid.columnsContainer.leafColumnsToRender.length;
+            }
+            else {
+                return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+            }
+        }
+        else {
+            const columnGroup = column.parent;
+            const columnGroupChildren = Array.from(columnGroup.children).sort((a, b) => a.orderIndex - b.orderIndex);
+            const columnIndexInsideGroup = columnGroupChildren.indexOf(column);
+            if (column.isReordered || column.orderIndex > 0 || (column.isReordered && column.orderIndex === 0)) {
+                return (column.orderIndex - columnGroupChildren[0]['orderIndex']) !== columnGroupChildren.length - 1;
+            }
+            return columnIndexInsideGroup !== columnGroupChildren.length - 1;
+        }
     }
     viewport;
     columnViewport;
@@ -3746,8 +3799,7 @@ class NavigationService {
         }
     }
     columnResize(onRightArrow) {
-        const column = this.ctx.grid.columnsContainer.leafColumnsToRender[this.activeCell.colIndex];
-        column.resizeStartWidth = Array.from(this.ctx.grid.wrapper.nativeElement.querySelectorAll('.k-grid-header th.k-header'))[this.activeCell.colIndex]['offsetWidth'];
+        const column = this.ctx.grid.columnsContainer.allColumns.find((col) => col.level === this.activeCell.rowIndex && col.leafIndex === this.activeCell.colIndex);
         this.resizeService.start(column);
         this.resizeService.resizeColumns(onRightArrow ? resizeStep : -1 * resizeStep);
         if (this.resizeService.resizeColumns.length > 0) {
@@ -14606,11 +14658,20 @@ const toPercentage = (value, whole) => (value / whole) * 100;
 /**
  * @hidden
  */
-const headerWidth = (handle) => handle.nativeElement.parentElement.offsetWidth;
+const headerWidth = (handle) => handle.nativeElement.parentElement.getBoundingClientRect().width;
 /**
  * @hidden
  */
-const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.offsetWidth;
+const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.getBoundingClientRect().width;
+/**
+ * @hidden
+ */
+const adjacentColumnInGroupWidth = (handle, rowIndex, colIndex) => {
+    const tableElement = handle.nativeElement.closest('.k-grid-header-table');
+    const selector = (rowAttribute) => `tr[${rowAttribute}="${rowIndex}"] th[aria-colindex="${colIndex}"]`;
+    const thElement = tableElement.querySelector([selector('aria-rowindex'), selector('data-kendo-grid-row-index')]);
+    return thElement.getBoundingClientRect().width;
+};
 /**
  * @hidden
  */
@@ -14670,7 +14731,7 @@ class ColumnHandleDirective {
     columns = [];
     column;
     get visible() {
-        if (this.isConstrainedMode && this.isLast) {
+        if (this.isConstrainedMode && (this.isLast || this.isLastInGroup(this.column))) {
             return 'none';
         }
         return this.column.resizable ? 'block' : 'none';
@@ -14690,7 +14751,12 @@ class ColumnHandleDirective {
     }
     subscriptions = new Subscription();
     rtl = false;
+    totalChildrenSum = 0;
+    childrenColumns = [];
+    minWidthTotal = 0;
+    foundColumn;
     autoFit() {
+        this.service.autoFitResize = true;
         const allLeafs = allLeafColumns(this.columns);
         const currentLeafs = leafColumns([this.column]).filter(column => isTruthy(column.resizable));
         const columnInfo = currentLeafs.map(column => {
@@ -14748,35 +14814,19 @@ class ColumnHandleDirective {
     }
     shouldUpdate() {
         return !allLeafColumns(this.columns)
-            .map(column => column.width)
+            .map(column => column.width || (this.isConstrainedMode && !column.width && column.implicitWidth))
             .some(isBlank);
     }
     initColumnWidth() {
         this.column.width = headerWidth(this.element);
+        if (this.isConstrainedMode) {
+            this.column.resizeStartWidth = this.column.width;
+        }
     }
     initState() {
         this.column.resizeStartWidth = headerWidth(this.element);
-        let columns = [];
-        if (this.ctx.grid?.columns) {
-            columns = Array.from(this.ctx.grid?.columns) || [];
-        }
-        if (this.isConstrainedMode) {
-            if (this.service.areColumnsReordered) {
-                this.service.adjacentColumn = columns.find(c => c.orderIndex === this.column.orderIndex + 1);
-                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
-                this.service.resizedColumn({
-                    column: this.service.adjacentColumn,
-                    oldWidth: this.service.adjacentColumn.resizeStartWidth
-                });
-            }
-            else {
-                this.service.adjacentColumn = columns[this.column.leafIndex + 1];
-                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
-                this.service.resizedColumn({
-                    column: this.service.adjacentColumn,
-                    oldWidth: this.service.adjacentColumn.resizeStartWidth
-                });
-            }
+        if (this.isConstrainedMode && !this.service.adjacentColumn) {
+            this.setAdjacentColumn();
         }
         this.service.resizedColumn({
             column: this.column,
@@ -14793,12 +14843,7 @@ class ColumnHandleDirective {
             newWidth = Math.min(newWidth, this.column.maxResizableWidth);
         }
         if (this.isConstrainedMode) {
-            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
-            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
-        }
-        if (this.isConstrainedMode && isPresent(this.service.adjacentColumn.maxResizableWidth)) {
-            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
-            newWidth = Math.max(newWidth, maxAllowedResizableWidth);
+            newWidth = this.calcNewColumnWidth(newWidth);
         }
         const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
@@ -14812,11 +14857,8 @@ class ColumnHandleDirective {
         this.service.resizeTable(this.column, tableDelta);
     }
     updateWidth(column, width) {
-        if (this.isConstrainedMode && this.service.adjacentColumn) {
-            const adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
-            if (adjacentColumnNewWidth < (column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth)) {
-                this.service.adjacentColumn.width = adjacentColumnNewWidth;
-            }
+        if (this.isConstrainedMode && this.service.adjacentColumn && !this.service.autoFitResize) {
+            this.updateWidthsOfResizedColumns(column, width);
         }
         column.width = width;
         this.columnInfoService.hiddenColumns.forEach((col) => {
@@ -14828,9 +14870,188 @@ class ColumnHandleDirective {
         });
         this.cdr.markForCheck(); //force CD cycle
     }
+    updateWidthsOfResizedColumns(column, width) {
+        let adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
+        if (this.service.draggedGroupColumn && column.parent) {
+            this.updateWidthOfDraggedColumn(column, width);
+            this.setGroupWidths(this.service.draggedGroupColumn);
+        }
+        else if (!this.service.draggedGroupColumn && !column.parent && this.service.adjacentColumn.parent) {
+            this.service.adjacentColumn.parent.width = column.width + this.service.adjacentColumn.parent.width - width;
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+        }
+        else if (!this.service.draggedGroupColumn && column.parent && this.service.adjacentColumn.parent) {
+            adjacentColumnNewWidth = column.width + this.service.adjacentColumn.width - width;
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+            const filteredColumns = this.service.adjacentColumn.parent.children.filter(c => c !== this.service.adjacentColumn);
+            const filteredColumnsWidth = filteredColumns.reduce((acc, c) => acc + c.width, 0);
+            this.service.adjacentColumn.parent.width = adjacentColumnNewWidth + filteredColumnsWidth;
+            this.setGroupWidths(this.service.adjacentColumn.parent);
+        }
+        else if (adjacentColumnNewWidth > this.service.adjacentColumn.minResizableWidth) {
+            this.service.adjacentColumn.width = adjacentColumnNewWidth;
+        }
+    }
+    calcNewColumnWidth(newWidth) {
+        let maxAllowedResizableWidth;
+        if (!this.service.adjacentColumn.parent) {
+            maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width - this.service.adjacentColumn.minResizableWidth;
+            if (!this.column.parent) {
+                maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+                if (this.service.adjacentColumn.maxResizableWidth) {
+                    const minResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
+                    maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+                    this.column.minResizableWidth = minResizableWidth;
+                    this.column.maxResizableWidth = maxAllowedResizableWidth;
+                }
+            }
+        }
+        else {
+            maxAllowedResizableWidth = this.column.width + this.service.adjacentColumn.width;
+            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
+            this.minWidthTotal = 0;
+            const minResizableWidth = this.minAdjacentColumnWidth(this.service.adjacentColumn);
+            maxAllowedResizableWidth -= minResizableWidth;
+        }
+        return Math.min(newWidth, maxAllowedResizableWidth - 1);
+    }
+    setAdjacentColumn() {
+        const columnsForLevel = this.columnsForLevel(this.column.level);
+        if (this.column.parent) {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
+                this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
+            }
+            else {
+                const columnIndex = columnsForLevel.indexOf(this.column);
+                this.service.adjacentColumn = columnsForLevel[columnIndex + 1];
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                const parentColumnChildren = Array.from(this.column.parent.children);
+                const indexOfCurrentColumn = parentColumnChildren.indexOf(this.column);
+                let adjacentColumn;
+                if (indexOfCurrentColumn + 1 <= parentColumnChildren.length - 1) {
+                    adjacentColumn = parentColumnChildren[indexOfCurrentColumn + 1];
+                    if (adjacentColumn?.isColumnGroup) {
+                        this.service.adjacentColumn = adjacentColumn;
+                    }
+                }
+            }
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+            }
+            if (this.column.isColumnGroup) {
+                this.service.draggedGroupColumn = this.column;
+            }
+        }
+        else if (this.column.isColumnGroup) {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(c => c.orderIndex === this.column.orderIndex + 1);
+            }
+            else {
+                this.service.adjacentColumn = columnsForLevel[columnsForLevel.indexOf(this.column) + 1];
+            }
+            this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+            }
+            this.service.adjacentColumn.resizeStartWidth = this.service.adjacentColumn.width;
+            this.service.draggedGroupColumn = this.column;
+        }
+        else {
+            if (this.column.isReordered) {
+                this.service.adjacentColumn = columnsForLevel.find(col => col.orderIndex === this.column.orderIndex + 1);
+            }
+            else {
+                let adjacentColumn = columnsForLevel.find(c => c.leafIndex === this.column.leafIndex + 1);
+                if (!adjacentColumn) {
+                    const indexOfCurrentColumn = columnsForLevel.indexOf(this.column);
+                    adjacentColumn = columnsForLevel[indexOfCurrentColumn + 1];
+                }
+                this.service.adjacentColumn = adjacentColumn;
+            }
+            if (!this.service.adjacentColumn.parent) {
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+            }
+            if (this.service.adjacentColumn.isColumnGroup) {
+                this.foundColumn = null;
+                this.service.adjacentColumn = this.firstGroupChild(this.service.adjacentColumn);
+                const rowIndex = this.service.adjacentColumn.level + 1;
+                const colIndex = this.service.adjacentColumn.leafIndex + 1;
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnInGroupWidth(this.element, rowIndex, colIndex);
+            }
+        }
+        this.service.resizedColumn({
+            column: this.service.adjacentColumn,
+            oldWidth: this.service.adjacentColumn.resizeStartWidth
+        });
+    }
+    firstGroupChild(column) {
+        Array.from(column.children).sort((a, b) => a.orderIndex - b.orderIndex).forEach((c, idx) => {
+            if (idx === 0 && !c.isColumnGroup) {
+                if (!this.foundColumn) {
+                    this.foundColumn = c;
+                }
+            }
+            else if (c.isColumnGroup) {
+                this.firstGroupChild(c);
+            }
+        });
+        return this.foundColumn;
+    }
+    setGroupWidths(column) {
+        const childrenWidths = column.children.reduce((acc, c) => acc + c.width, 0);
+        column.width = childrenWidths;
+        column.children.forEach(c => {
+            if (c.isColumnGroup) {
+                this.setGroupWidths(c);
+            }
+        });
+    }
+    updateWidthOfDraggedColumn(column, width) {
+        this.totalChildrenSum = 0;
+        this.childrenColumns = [];
+        this.calcChildrenWidth(this.service.draggedGroupColumn);
+        const childrenWidthNotIncludingColumn = this.childrenColumns.reduce((acc, col) => {
+            return col !== column ? acc + col.width : acc;
+        }, 0);
+        this.service.draggedGroupColumn.width = childrenWidthNotIncludingColumn + width;
+        if (this.service.adjacentColumn.minResizableWidth <= this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn) {
+            this.service.adjacentColumn.width = this.totalChildrenSum + this.service.adjacentColumn.resizeStartWidth - width - childrenWidthNotIncludingColumn;
+        }
+    }
+    calcChildrenWidth(column) {
+        const columnChildren = Array.from(column.children);
+        const childrenNoGroups = columnChildren.filter(c => !c.isColumnGroup);
+        const childrenGroups = columnChildren.filter(c => c.isColumnGroup);
+        childrenNoGroups.forEach(col => {
+            if (this.childrenColumns.indexOf(col) === -1) {
+                this.childrenColumns.push(col);
+            }
+        });
+        this.totalChildrenSum += childrenNoGroups.reduce((acc, col) => acc + col.resizeStartWidth, 0);
+        childrenGroups.forEach((col) => {
+            this.calcChildrenWidth(col);
+        });
+    }
     columnsForLevel(level) {
         return columnsToRender(this.columns ? this.columns.filter(column => column.level === level) : []);
     }
+    minAdjacentColumnWidth(column) {
+        if (column.isColumnGroup) {
+            Array.from(column.children).forEach(c => {
+                this.minAdjacentColumnWidth(c);
+            });
+        }
+        else {
+            this.minWidthTotal += column.minResizableWidth;
+            if (column.width < column.minResizableWidth) {
+                column.width = column.minResizableWidth;
+            }
+        }
+        return this.minWidthTotal;
+    }
     getTableDelta(newWidth, delta) {
         const minWidth = this.column.minResizableWidth;
         const maxWidth = this.column.maxResizableWidth;
@@ -14855,6 +15076,18 @@ class ColumnHandleDirective {
         event.stopPropagation();
         event.preventDefault();
     };
+    isLastInGroup(column) {
+        if (column.parent) {
+            const groupChildren = Array.from(column.parent.children);
+            const indexOfCurrentColumn = groupChildren.indexOf(column);
+            if (column.isReordered || column.orderIndex > 0 || (column.isReordered && column.orderIndex === 0)) {
+                return (column.orderIndex - groupChildren[0].orderIndex) === groupChildren.length - 1;
+            }
+            else {
+                return indexOfCurrentColumn === groupChildren.length - 1;
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$3.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { isLast: "isLast", columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }
@@ -16275,9 +16508,6 @@ class HeaderComponent {
     isCheckboxColumn(column) {
         return isCheckboxColumn(column) && !column.templateRef;
     }
-    trackByIndex(index) {
-        return index;
-    }
     addStickyStyles(column) {
         const stickyStyles = this.columnInfoService.stickyColumnsStyles(column);
         return { ...column.headerStyle, ...stickyStyles };
@@ -16416,7 +16646,7 @@ class HeaderComponent {
                 *ngIf="detailTemplate?.templateRef"
             >
             </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
+            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
                 <th *ngIf="!isColumnGroupComponent(column)"
                     kendoGridLogicalCell
                     [logicalRowIndex]="levelIndex"
@@ -16643,7 +16873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 *ngIf="detailTemplate?.templateRef"
             >
             </th>
-            <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
+            <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
                 <th *ngIf="!isColumnGroupComponent(column)"
                     kendoGridLogicalCell
                     [logicalRowIndex]="levelIndex"
@@ -19480,8 +19710,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1738357372,
-    version: '18.1.0-develop.10',
+    publishDate: 1738675585,
+    version: '18.1.0-develop.12',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21441,7 +21671,7 @@ class TableDirective {
         const constrainedModeNoShift = this.ctx.grid?.resizable === 'constrained' && !this.service.isShiftPressed;
         const unconstrainedModeShift = (this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained') && this.service.isShiftPressed;
         const isConstrainedMode = constrainedModeNoShift || unconstrainedModeShift;
-        if (isConstrainedMode) {
+        if (isConstrainedMode && !this.service.autoFitResize) {
             this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
         }
         else {
@@ -24766,16 +24996,19 @@ class GridComponent {
             }
             else if (column === source) {
                 i += toSkip;
+                column.isReordered = true;
                 continue;
             }
             else {
                 column.orderIndex = nextIndex;
             }
+            column.isReordered = true;
             nextIndex++;
             i++;
         }
         for (i = sourceColumnIndex; i < sourceColumnIndex + toSkip; i++) {
             expandedColumns[i].orderIndex = nextSourceIndex++;
+            expandedColumns[i].isReordered = true;
         }
         this.updateIndicesForLevel(source.level + 1);
         this.columnResizingService.areColumnsReordered = true;
@@ -24788,7 +25021,11 @@ class GridComponent {
                 colsForLevel.push(...c.childrenArray.sort((a, b) => a.orderIndex - b.orderIndex));
             }
         });
-        expandColumnsWithSpan(colsForLevel).map((c, i) => c.orderIndex = i);
+        expandColumnsWithSpan(colsForLevel).map((c, i) => {
+            c.orderIndex = i;
+            c.isReordered = true;
+            return c;
+        });
         if (level < this.columnList.totalColumnLevels()) {
             this.updateIndicesForLevel(level + 1);
         }
@@ -25106,8 +25343,8 @@ class GridComponent {
             .filter(item => isTruthy(item.column.resizable) && !item.column.isColumnGroup)
             .map(item => ({
             column: item.column,
-            newWidth: item.column.width,
-            oldWidth: item.oldWidth
+            newWidth: roundDown(item.column.width),
+            oldWidth: roundDown(item.oldWidth)
         }));
         this.columnResize.emit(args);
     }

package/package.json

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

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

@@ -119,7 +119,6 @@ export declare class HeaderComponent implements AfterViewInit, OnInit, OnChanges
     shouldActivate(column: ColumnBase): boolean;
     isInteractive(column: ColumnComponent, prop: string): boolean;
     isCheckboxColumn(column: any): boolean;
-    trackByIndex(index: number): number;
     addStickyStyles(column: ColumnBase): {
         [key: string]: any;
     };

package/schematics/ngAdd/index.js

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

package/utils.d.ts

@@ -96,3 +96,7 @@ export declare const recursiveFlatMap: (item: any) => any[];
  * @hidden
  */
 export declare const isGroupResult: (obj: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const roundDown: (value: number) => number;