@progress/kendo-angular-grid 21.0.0-develop.2 → 21.0.0-develop.3

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

@@ -33,6 +33,7 @@ export declare class ColumnResizingService {
     }): () => void;
     measureColumns(info: Array<any>): void;
     autoFit(...columns: ColumnBase[]): void;
+    autoFitToGrid(gridEl: HTMLElement, scrollbarWidth: number, ...columns: ColumnBase[]): void;
     private trackColumns;
     private autoFitStart;
     private autoFitBatch;

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

@@ -4,8 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable, EventEmitter } from '@angular/core';
 import { zip } from 'rxjs';
-import { leafColumns } from '../columns/column-common';
 import { take } from 'rxjs/operators';
+import { leafColumns } from '../columns/column-common';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -18,6 +18,21 @@ const resizeArgs = (column, extra) => Object.assign({
     columns: leafColumns([column]),
     locked: isLocked(column)
 }, extra);
+/**
+ * @hidden
+ */
+const measure = (col, gridEl) => {
+    const rowIndex = col.level + 1;
+    const selector = `tr[aria-rowindex="${rowIndex}"] > th[aria-colindex="${col.leafIndex + 1}"], tr[aria-rowindex="${rowIndex}"] > th[data-kendo-grid-column-index="${col.leafIndex}"]`;
+    const headerCell = gridEl.querySelector(selector);
+    if (headerCell) {
+        const headerCellWidth = headerCell.offsetWidth;
+        if (headerCellWidth > 0) {
+            return headerCellWidth;
+        }
+    }
+    return 0;
+};
 /**
  * @hidden
  */
@@ -100,6 +115,45 @@ export class ColumnResizingService {
             }
         });
     }
+    autoFitToGrid(gridEl, scrollbarWidth, ...columns) {
+        const gridWidth = gridEl.clientWidth - scrollbarWidth - 1;
+        if (gridWidth <= 0) {
+            return;
+        }
+        const columnsWidths = columns.map(c => measure(c, gridEl));
+        const totalColumnsWidth = columnsWidths.reduce((sum, w) => sum + w, 0);
+        if (totalColumnsWidth === 0 || Math.abs(totalColumnsWidth - gridWidth) <= 1) {
+            return;
+        }
+        this.start(columns[0]);
+        const calculateNewWidths = (columnsWidths) => {
+            const totalWidth = columnsWidths.reduce((s, w) => s + w, 0);
+            const nonZeroColumns = columnsWidths.filter(w => w > 0).length;
+            const diff = (gridWidth - totalWidth) / nonZeroColumns;
+            const newWidths = columnsWidths.slice();
+            newWidths.forEach((w, i) => {
+                newWidths[i] = Math.max(0, w + diff);
+            });
+            return newWidths;
+        };
+        let newWidths = calculateNewWidths(columnsWidths);
+        const newTotal = newWidths.reduce((s, w) => s + w, 0);
+        if (newTotal !== gridWidth) {
+            newWidths = calculateNewWidths(newWidths);
+        }
+        columns.forEach((col, idx) => {
+            const oldWidth = columnsWidths[idx];
+            const newWidth = newWidths[idx];
+            col.width = newWidth;
+            this.resizedColumn({ column: col, oldWidth, newWidth });
+        });
+        const totalNew = newWidths.reduce((s, w) => s + w, 0);
+        const tableDelta = totalNew - totalColumnsWidth;
+        if (tableDelta < 0) {
+            this.resizeTable(columns[0], tableDelta);
+        }
+        this.end();
+    }
     trackColumns(column) {
         this.resizedColumns = [];
         this.column = column;

package/esm2022/grid.component.mjs

@@ -1693,6 +1693,24 @@ export class GridComponent {
         }
         this.columnResizingService.autoFit(...cols);
     }
+    /**
+     * Adjusts the width of the Grid columns to fit the entire Grid width.
+     * - when the sum of all columns widths is less than the available Grid width—the available space is distributed evenly between all columns.
+     * - when the sum of all columns widths is greater than the available Grid width—the columns are shrinked equally to fit the Grid width.
+     *
+     * Run this method after the Grid is populated with data.
+     */
+    autoFitColumnsToGrid() {
+        const gridElement = this.wrapper.nativeElement;
+        if (!gridElement) {
+            return;
+        }
+        const leafColumns = this.columnsContainer.leafColumns.toArray();
+        if (!leafColumns.length || leafColumns.length === 0) {
+            return;
+        }
+        this.columnResizingService.autoFitToGrid(gridElement, this.scrollbarWidth, ...leafColumns);
+    }
     /**
      * @hidden
      */

package/esm2022/package-metadata.mjs

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

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

@@ -3251,6 +3251,21 @@ const resizeArgs = (column, extra) => Object.assign({
     columns: leafColumns([column]),
     locked: isLocked(column)
 }, extra);
+/**
+ * @hidden
+ */
+const measure = (col, gridEl) => {
+    const rowIndex = col.level + 1;
+    const selector = `tr[aria-rowindex="${rowIndex}"] > th[aria-colindex="${col.leafIndex + 1}"], tr[aria-rowindex="${rowIndex}"] > th[data-kendo-grid-column-index="${col.leafIndex}"]`;
+    const headerCell = gridEl.querySelector(selector);
+    if (headerCell) {
+        const headerCellWidth = headerCell.offsetWidth;
+        if (headerCellWidth > 0) {
+            return headerCellWidth;
+        }
+    }
+    return 0;
+};
 /**
  * @hidden
  */
@@ -3333,6 +3348,45 @@ class ColumnResizingService {
             }
         });
     }
+    autoFitToGrid(gridEl, scrollbarWidth, ...columns) {
+        const gridWidth = gridEl.clientWidth - scrollbarWidth - 1;
+        if (gridWidth <= 0) {
+            return;
+        }
+        const columnsWidths = columns.map(c => measure(c, gridEl));
+        const totalColumnsWidth = columnsWidths.reduce((sum, w) => sum + w, 0);
+        if (totalColumnsWidth === 0 || Math.abs(totalColumnsWidth - gridWidth) <= 1) {
+            return;
+        }
+        this.start(columns[0]);
+        const calculateNewWidths = (columnsWidths) => {
+            const totalWidth = columnsWidths.reduce((s, w) => s + w, 0);
+            const nonZeroColumns = columnsWidths.filter(w => w > 0).length;
+            const diff = (gridWidth - totalWidth) / nonZeroColumns;
+            const newWidths = columnsWidths.slice();
+            newWidths.forEach((w, i) => {
+                newWidths[i] = Math.max(0, w + diff);
+            });
+            return newWidths;
+        };
+        let newWidths = calculateNewWidths(columnsWidths);
+        const newTotal = newWidths.reduce((s, w) => s + w, 0);
+        if (newTotal !== gridWidth) {
+            newWidths = calculateNewWidths(newWidths);
+        }
+        columns.forEach((col, idx) => {
+            const oldWidth = columnsWidths[idx];
+            const newWidth = newWidths[idx];
+            col.width = newWidth;
+            this.resizedColumn({ column: col, oldWidth, newWidth });
+        });
+        const totalNew = newWidths.reduce((s, w) => s + w, 0);
+        const tableDelta = totalNew - totalColumnsWidth;
+        if (tableDelta < 0) {
+            this.resizeTable(columns[0], tableDelta);
+        }
+        this.end();
+    }
     trackColumns(column) {
         this.resizedColumns = [];
         this.column = column;
@@ -22842,8 +22896,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752966,
-    version: '21.0.0-develop.2',
+    publishDate: 1761757848,
+    version: '21.0.0-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -31220,6 +31274,24 @@ class GridComponent {
         }
         this.columnResizingService.autoFit(...cols);
     }
+    /**
+     * Adjusts the width of the Grid columns to fit the entire Grid width.
+     * - when the sum of all columns widths is less than the available Grid width&mdash;the available space is distributed evenly between all columns.
+     * - when the sum of all columns widths is greater than the available Grid width&mdash;the columns are shrinked equally to fit the Grid width.
+     *
+     * Run this method after the Grid is populated with data.
+     */
+    autoFitColumnsToGrid() {
+        const gridElement = this.wrapper.nativeElement;
+        if (!gridElement) {
+            return;
+        }
+        const leafColumns = this.columnsContainer.leafColumns.toArray();
+        if (!leafColumns.length || leafColumns.length === 0) {
+            return;
+        }
+        this.columnResizingService.autoFitToGrid(gridElement, this.scrollbarWidth, ...leafColumns);
+    }
     /**
      * @hidden
      */

package/grid.component.d.ts

@@ -899,6 +899,14 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      * [See example](slug:resizing_columns_grid#toc-auto-fitting-the-content)
      */
     autoFitColumns(columns?: Array<ColumnBase> | QueryList<ColumnBase>): void;
+    /**
+     * Adjusts the width of the Grid columns to fit the entire Grid width.
+     * - when the sum of all columns widths is less than the available Grid width&mdash;the available space is distributed evenly between all columns.
+     * - when the sum of all columns widths is greater than the available Grid width&mdash;the columns are shrinked equally to fit the Grid width.
+     *
+     * Run this method after the Grid is populated with data.
+     */
+    autoFitColumnsToGrid(): void;
     /**
      * @hidden
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "21.0.0-develop.2",
+  "version": "21.0.0-develop.3",
   "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",
@@ -41,7 +41,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1761752966,
+      "publishDate": 1761757848,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -54,32 +54,32 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.2",
-    "@progress/kendo-angular-common": "21.0.0-develop.2",
-    "@progress/kendo-angular-dateinputs": "21.0.0-develop.2",
-    "@progress/kendo-angular-layout": "21.0.0-develop.2",
-    "@progress/kendo-angular-navigation": "21.0.0-develop.2",
-    "@progress/kendo-angular-dropdowns": "21.0.0-develop.2",
-    "@progress/kendo-angular-excel-export": "21.0.0-develop.2",
-    "@progress/kendo-angular-icons": "21.0.0-develop.2",
-    "@progress/kendo-angular-indicators": "21.0.0-develop.2",
-    "@progress/kendo-angular-inputs": "21.0.0-develop.2",
-    "@progress/kendo-angular-conversational-ui": "21.0.0-develop.2",
-    "@progress/kendo-angular-intl": "21.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.2",
-    "@progress/kendo-angular-label": "21.0.0-develop.2",
-    "@progress/kendo-angular-menu": "21.0.0-develop.2",
-    "@progress/kendo-angular-pager": "21.0.0-develop.2",
-    "@progress/kendo-angular-pdf-export": "21.0.0-develop.2",
-    "@progress/kendo-angular-popup": "21.0.0-develop.2",
-    "@progress/kendo-angular-toolbar": "21.0.0-develop.2",
-    "@progress/kendo-angular-upload": "21.0.0-develop.2",
-    "@progress/kendo-angular-utils": "21.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "21.0.0-develop.3",
+    "@progress/kendo-angular-common": "21.0.0-develop.3",
+    "@progress/kendo-angular-dateinputs": "21.0.0-develop.3",
+    "@progress/kendo-angular-layout": "21.0.0-develop.3",
+    "@progress/kendo-angular-navigation": "21.0.0-develop.3",
+    "@progress/kendo-angular-dropdowns": "21.0.0-develop.3",
+    "@progress/kendo-angular-excel-export": "21.0.0-develop.3",
+    "@progress/kendo-angular-icons": "21.0.0-develop.3",
+    "@progress/kendo-angular-indicators": "21.0.0-develop.3",
+    "@progress/kendo-angular-inputs": "21.0.0-develop.3",
+    "@progress/kendo-angular-conversational-ui": "21.0.0-develop.3",
+    "@progress/kendo-angular-intl": "21.0.0-develop.3",
+    "@progress/kendo-angular-l10n": "21.0.0-develop.3",
+    "@progress/kendo-angular-label": "21.0.0-develop.3",
+    "@progress/kendo-angular-menu": "21.0.0-develop.3",
+    "@progress/kendo-angular-pager": "21.0.0-develop.3",
+    "@progress/kendo-angular-pdf-export": "21.0.0-develop.3",
+    "@progress/kendo-angular-popup": "21.0.0-develop.3",
+    "@progress/kendo-angular-toolbar": "21.0.0-develop.3",
+    "@progress/kendo-angular-upload": "21.0.0-develop.3",
+    "@progress/kendo-angular-utils": "21.0.0-develop.3",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "21.0.0-develop.3",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/schematics/ngAdd/index.js

@@ -5,19 +5,19 @@ 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': '21.0.0-develop.2',
-            '@progress/kendo-angular-navigation': '21.0.0-develop.2',
+            '@progress/kendo-angular-treeview': '21.0.0-develop.3',
+            '@progress/kendo-angular-navigation': '21.0.0-develop.3',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '21.0.0-develop.2',
+            '@progress/kendo-angular-dialog': '21.0.0-develop.3',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '21.0.0-develop.2',
+            '@progress/kendo-angular-progressbar': '21.0.0-develop.3',
             // transitive peer dependencies from toolbar
-            '@progress/kendo-angular-indicators': '21.0.0-develop.2',
+            '@progress/kendo-angular-indicators': '21.0.0-develop.3',
             // transitive peer dependencies from conversational-ui
-            '@progress/kendo-angular-menu': '21.0.0-develop.2',
-            '@progress/kendo-angular-upload': '21.0.0-develop.2'
+            '@progress/kendo-angular-menu': '21.0.0-develop.3',
+            '@progress/kendo-angular-upload': '21.0.0-develop.3'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }