@progress/kendo-angular-grid 18.1.0-develop.2 → 18.1.0-develop.20

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';
@@ -411,6 +411,11 @@ export class GridComponent {
      * @default false
      */
     groupable = false;
+    /**
+     * Determines whether the Grid can be resized.
+     * @default false
+     */
+    gridResizable = false;
     /**
      * Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
      * @default false
@@ -748,6 +753,21 @@ export class GridComponent {
     get noScrollbarClass() {
         return this.scrollbarWidth === 0;
     }
+    get isResizable() {
+        return Boolean(this.gridResizable);
+    }
+    get minWidth() {
+        return this.gridResizable.minWidth;
+    }
+    get maxWidth() {
+        return this.gridResizable.maxWidth;
+    }
+    get minHeight() {
+        return this.gridResizable.minHeight;
+    }
+    get maxHeight() {
+        return this.gridResizable.maxHeight;
+    }
     detailTemplateChildren;
     get detailTemplate() {
         if (this._customDetailTemplate) {
@@ -1707,16 +1727,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 +1752,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 +2074,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);
     }
@@ -2169,7 +2196,7 @@ export class GridComponent {
         this.dropTargetContainer?.notify();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, deps: [{ token: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GridComponent, isStandalone: true, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", gridResizable: "gridResizable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass", "class.k-grid-resizable": "this.isResizable", "style.minWidth": "this.minWidth", "style.maxWidth": "this.maxWidth", "style.minHeight": "this.minHeight", "style.maxHeight": "this.maxHeight" } }, providers: [
             BrowserSupportService,
             LocalizationService,
             ColumnInfoService,
@@ -3626,6 +3653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], groupable: [{
                 type: Input
+            }], gridResizable: [{
+                type: Input
             }], rowReorderable: [{
                 type: Input
             }], navigable: [{
@@ -3732,6 +3761,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], noScrollbarClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-no-scrollbar']
+            }], isResizable: [{
+                type: HostBinding,
+                args: ['class.k-grid-resizable']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.minWidth']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.maxWidth']
+            }], minHeight: [{
+                type: HostBinding,
+                args: ['style.minHeight']
+            }], maxHeight: [{
+                type: HostBinding,
+                args: ['style.maxHeight']
             }], detailTemplateChildren: [{
                 type: ContentChildren,
                 args: [DetailTemplateDirective]

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: 1738227350,
-    version: '18.1.0-develop.2',
+    publishDate: 1738834898,
+    version: '18.1.0-develop.20',
     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;