@progress/kendo-angular-grid 19.3.0-develop.35 → 19.3.0-develop.37

package/common/data-layout-mode.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 { StackedLayoutSettings } from "./stacked-layout-settings";
+import { GridColSize } from "./grid-col-size";
 /**
  * Specifies the Grid data layout display mode.
  */
@@ -13,7 +13,9 @@ export interface DataLayoutModeSettings {
      */
     mode?: DataLayoutMode;
     /**
-     * Specifies the settings for the stacked layout mode.
+     * Configures the stacked columns layout and widths. The possible options are:
+     * * - as a `number` - Sets the number of columns with default widths.
+     * * - as an `Array<number | string | GridColSize>` - The size of the array represents the number of columns, and the values represent the column widths
      */
-    stackedLayoutSettings?: StackedLayoutSettings;
+    stackedCols?: number | Array<number | string | GridColSize>;
 }

package/common/{stacked-layout-settings.d.ts → grid-col-size.d.ts}

@@ -2,17 +2,6 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * Specifies settings for the stacked columns layout of the Grid.
- */
-export interface StackedLayoutSettings {
-    /**
-     * Configures the stacked columns layout and widths. The possible options are:
-     * * - as a `number` - Sets the number of columns with default widths.
-     * * - as an `Array<number | string | GridColSize>` - The size of the array represents the number of columns, and the values represent the column widths
-     */
-    cols?: number | Array<number | string | GridColSize>;
-}
 /**
  * Represents the size of a column in the stacked layout of the Grid.
  */

package/editing-directives/in-cell-editing.directive.d.ts

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
  * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridInCellEditing></kendo-grid>
  * ```
  * @remarks

package/editing-directives/reactive-editing.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridReactiveEditing></kendo-grid>
  * ```
  * @remarks

package/editing-directives/template-editing.directive.d.ts

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
  * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridTemplateEditing></kendo-grid>
  * ```
  * @remarks

package/esm2022/editing-directives/in-cell-editing.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../editing/local-data-changes.service";
  * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridInCellEditing></kendo-grid>
  * ```
  * @remarks

package/esm2022/editing-directives/reactive-editing.directive.mjs

@@ -14,7 +14,7 @@ import * as i2 from "../editing/local-data-changes.service";
  * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridReactiveEditing></kendo-grid>
  * ```
  * @remarks

package/esm2022/editing-directives/template-editing.directive.mjs

@@ -13,7 +13,7 @@ import * as i2 from "../editing/local-data-changes.service";
  * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridTemplateEditing></kendo-grid>
  * ```
  * @remarks

package/esm2022/grid.component.mjs

@@ -2066,8 +2066,8 @@ export class GridComponent {
         }
         this.stackedColumns.columns = [];
         if (typeof this.dataLayoutMode === 'object') {
-            if (this.dataLayoutMode.mode === 'stacked' && this.dataLayoutMode.stackedLayoutSettings?.cols) {
-                const columns = this.dataLayoutMode.stackedLayoutSettings.cols;
+            if (this.dataLayoutMode.mode === 'stacked' && this.dataLayoutMode.stackedCols) {
+                const columns = this.dataLayoutMode.stackedCols;
                 if (typeof columns === 'number') {
                     for (let i = 0; i < columns; i++) {
                         const currCol = { width: `${this.wrapper.nativeElement.clientWidth / columns}px` };

package/esm2022/navigation/navigation.service.mjs

@@ -876,6 +876,9 @@ export class NavigationService {
             this.handleStackedTabNavigation(args);
         }
         else if (args.code === Keys.Backspace || args.code === Keys.Delete) {
+            if (this.stackedCellEntered || this.editService.isEditing()) {
+                return;
+            }
             if (this.activeRow && this.activeRow.dataRowIndex >= 0 && this.activeRow.dataItem) {
                 const row = this.cursor.row;
                 if (!row.groupItem && !this.cursor.cell.detailExpandCell) {

package/esm2022/package-metadata.mjs

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

package/esm2022/rendering/common/col-group.component.mjs

@@ -24,7 +24,8 @@ export class ColGroupComponent {
         this.ctx = ctx;
     }
     getColumnWidth(column) {
-        return this.isStacked ? '100%' : `${column.width}px`;
+        const columnWidth = column.width ? `${column.width}px` : undefined;
+        return this.isStacked ? '100%' : columnWidth;
     }
     get columnsToRender() {
         return this.isStacked ? [new ColumnBase()] : columnsToRender(this.columns);

package/esm2022/rendering/details-expand.directive.mjs

@@ -16,8 +16,11 @@ import * as i1 from "../grid.component";
  * ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  *
  * @example
- * ```typescript
- * <kendo-grid [kendoGridExpandDetailsBy]="expandDetailsKey" [expandedDetailKeys]="expandedDetailKeys"></kendo-grid>
+ * ```html
+ * <kendo-grid
+ *     [kendoGridExpandDetailsBy]="expandDetailsKey"
+ *     [expandedDetailKeys]="expandedDetailKeys">
+ * </kendo-grid>
  * ```
  * @remarks
  * Applied to: {@link GridComponent}.

package/esm2022/rendering/loading-template.directive.mjs

@@ -19,6 +19,7 @@ import * as i0 from "@angular/core";
  *   <kendo-grid-column field="ProductName"></kendo-grid-column>
  *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
  * </kendo-grid>
+ * ```
  */
 export class LoadingTemplateDirective {
     templateRef;

package/esm2022/rendering/table-body.component.mjs

@@ -43,10 +43,13 @@ import * as i7 from "../selection/selection.service";
 import * as i8 from "../selection/cell-selection.service";
 import * as i9 from "../common/column-info.service";
 import * as i10 from "../navigation/navigation.service";
-const columnCellIndex = (cell, cells) => {
+const columnCellIndex = (cell, cells, isStacked) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
-        if (cells[idx] === cell) {
+        const isChildCell = cell.parentNode === cells[idx];
+        const isActualCell = cell === cells[idx];
+        const matches = isActualCell || (isStacked && isChildCell);
+        if (matches) {
             return cellIndex;
         }
         if (!hasClasses(cells[idx], 'k-hierarchy-cell k-group-cell')) {
@@ -408,8 +411,8 @@ export class TableBodyComponent {
         }
     }
     cellClickArgs(cell, row, eventArg) {
-        const cells = this.isStackedMode ? row.querySelectorAll('.k-grid-stack-cell > .k-grid-stack-content') : row.cells;
-        const index = columnCellIndex(cell, cells);
+        const cells = this.isStackedMode ? row.querySelectorAll('.k-grid-stack-cell') : row.cells;
+        const index = columnCellIndex(cell, cells, this.isStackedMode);
         if (!isPresent(index)) {
             return;
         }

package/esm2022/selection/selection.directive.mjs

@@ -12,7 +12,7 @@ import * as i1 from "../common/provider.service";
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid kendoGridSelectBy="ProductID"></kendo-grid>
  *
  * <kendo-grid [kendoGridSelectBy]="myKey"></kendo-grid>

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

@@ -4224,6 +4224,9 @@ class NavigationService {
             this.handleStackedTabNavigation(args);
         }
         else if (args.code === Keys.Backspace || args.code === Keys.Delete) {
+            if (this.stackedCellEntered || this.editService.isEditing()) {
+                return;
+            }
             if (this.activeRow && this.activeRow.dataRowIndex >= 0 && this.activeRow.dataItem) {
                 const row = this.cursor.row;
                 if (!row.groupItem && !this.cursor.cell.detailExpandCell) {
@@ -4653,7 +4656,8 @@ class ColGroupComponent {
         this.ctx = ctx;
     }
     getColumnWidth(column) {
-        return this.isStacked ? '100%' : `${column.width}px`;
+        const columnWidth = column.width ? `${column.width}px` : undefined;
+        return this.isStacked ? '100%' : columnWidth;
     }
     get columnsToRender() {
         return this.isStacked ? [new ColumnBase()] : columnsToRender(this.columns);
@@ -4729,6 +4733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  *   <kendo-grid-column field="ProductName"></kendo-grid-column>
  *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
  * </kendo-grid>
+ * ```
  */
 class LoadingTemplateDirective {
     templateRef;
@@ -20166,10 +20171,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-const columnCellIndex = (cell, cells) => {
+const columnCellIndex = (cell, cells, isStacked) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
-        if (cells[idx] === cell) {
+        const isChildCell = cell.parentNode === cells[idx];
+        const isActualCell = cell === cells[idx];
+        const matches = isActualCell || (isStacked && isChildCell);
+        if (matches) {
             return cellIndex;
         }
         if (!hasClasses(cells[idx], 'k-hierarchy-cell k-group-cell')) {
@@ -20531,8 +20539,8 @@ class TableBodyComponent {
         }
     }
     cellClickArgs(cell, row, eventArg) {
-        const cells = this.isStackedMode ? row.querySelectorAll('.k-grid-stack-cell > .k-grid-stack-content') : row.cells;
-        const index = columnCellIndex(cell, cells);
+        const cells = this.isStackedMode ? row.querySelectorAll('.k-grid-stack-cell') : row.cells;
+        const index = columnCellIndex(cell, cells, this.isStackedMode);
         if (!isPresent(index)) {
             return;
         }
@@ -22001,8 +22009,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1754904784,
-    version: '19.3.0-develop.35',
+    publishDate: 1754919965,
+    version: '19.3.0-develop.37',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -31118,8 +31126,8 @@ class GridComponent {
         }
         this.stackedColumns.columns = [];
         if (typeof this.dataLayoutMode === 'object') {
-            if (this.dataLayoutMode.mode === 'stacked' && this.dataLayoutMode.stackedLayoutSettings?.cols) {
-                const columns = this.dataLayoutMode.stackedLayoutSettings.cols;
+            if (this.dataLayoutMode.mode === 'stacked' && this.dataLayoutMode.stackedCols) {
+                const columns = this.dataLayoutMode.stackedCols;
                 if (typeof columns === 'number') {
                     for (let i = 0; i < columns; i++) {
                         const currCol = { width: `${this.wrapper.nativeElement.clientWidth / columns}px` };
@@ -33664,7 +33672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid kendoGridSelectBy="ProductID"></kendo-grid>
  *
  * <kendo-grid [kendoGridSelectBy]="myKey"></kendo-grid>
@@ -33973,7 +33981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridTemplateEditing></kendo-grid>
  * ```
  * @remarks
@@ -34050,7 +34058,7 @@ const markAllAsTouched = (control) => {
  * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridReactiveEditing></kendo-grid>
  * ```
  * @remarks
@@ -34099,7 +34107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid [data]="data" kendoGridInCellEditing></kendo-grid>
  * ```
  * @remarks
@@ -34322,8 +34330,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  *
  * @example
- * ```typescript
- * <kendo-grid [kendoGridExpandDetailsBy]="expandDetailsKey" [expandedDetailKeys]="expandedDetailKeys"></kendo-grid>
+ * ```html
+ * <kendo-grid
+ *     [kendoGridExpandDetailsBy]="expandDetailsKey"
+ *     [expandedDetailKeys]="expandedDetailKeys">
+ * </kendo-grid>
  * ```
  * @remarks
  * Applied to: {@link GridComponent}.

package/grid.component.d.ts

@@ -90,7 +90,7 @@ import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.comp
 import { DataMappingService } from './data/data-mapping.service';
 import { AIAssistantToolbarDirective } from './rendering/toolbar/tools/ai-assistant/ai-tool.directive';
 import { DataLayoutMode, DataLayoutModeSettings } from './common/data-layout-mode';
-import { GridColSize } from './common/stacked-layout-settings';
+import { GridColSize } from './common/grid-col-size';
 import * as i0 from "@angular/core";
 /**
  * Represents the Kendo UI for Angular Data Grid component.

package/index.d.ts

@@ -198,7 +198,7 @@ export { CellRowspanFn } from './columns/cell-rowspan';
 export { HighlightItem } from './highlight/highlight-item';
 export { HighlightDirective } from './highlight/highlight.directive';
 export { DataLayoutMode, DataLayoutModeSettings } from './common/data-layout-mode';
-export { StackedLayoutSettings, GridColSize } from './common/stacked-layout-settings';
+export { GridColSize } from './common/grid-col-size';
 export { ColumnMenuTemplateDirective } from './column-menu/column-menu-template.directive';
 export { EditCommandDirective } from './editing/edit-command.directive';
 export { CancelCommandDirective } from './editing/cancel-command.directive';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "19.3.0-develop.35",
+  "version": "19.3.0-develop.37",
   "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": 1754904784,
+      "publishDate": 1754919965,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -39,29 +39,29 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.21.0",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "19.3.0-develop.35",
-    "@progress/kendo-angular-common": "19.3.0-develop.35",
-    "@progress/kendo-angular-dateinputs": "19.3.0-develop.35",
-    "@progress/kendo-angular-layout": "19.3.0-develop.35",
-    "@progress/kendo-angular-navigation": "19.3.0-develop.35",
-    "@progress/kendo-angular-dropdowns": "19.3.0-develop.35",
-    "@progress/kendo-angular-excel-export": "19.3.0-develop.35",
-    "@progress/kendo-angular-icons": "19.3.0-develop.35",
-    "@progress/kendo-angular-inputs": "19.3.0-develop.35",
-    "@progress/kendo-angular-conversational-ui": "19.3.0-develop.35",
-    "@progress/kendo-angular-intl": "19.3.0-develop.35",
-    "@progress/kendo-angular-l10n": "19.3.0-develop.35",
-    "@progress/kendo-angular-label": "19.3.0-develop.35",
-    "@progress/kendo-angular-pager": "19.3.0-develop.35",
-    "@progress/kendo-angular-pdf-export": "19.3.0-develop.35",
-    "@progress/kendo-angular-popup": "19.3.0-develop.35",
-    "@progress/kendo-angular-toolbar": "19.3.0-develop.35",
-    "@progress/kendo-angular-utils": "19.3.0-develop.35",
+    "@progress/kendo-angular-buttons": "19.3.0-develop.37",
+    "@progress/kendo-angular-common": "19.3.0-develop.37",
+    "@progress/kendo-angular-dateinputs": "19.3.0-develop.37",
+    "@progress/kendo-angular-layout": "19.3.0-develop.37",
+    "@progress/kendo-angular-navigation": "19.3.0-develop.37",
+    "@progress/kendo-angular-dropdowns": "19.3.0-develop.37",
+    "@progress/kendo-angular-excel-export": "19.3.0-develop.37",
+    "@progress/kendo-angular-icons": "19.3.0-develop.37",
+    "@progress/kendo-angular-inputs": "19.3.0-develop.37",
+    "@progress/kendo-angular-conversational-ui": "19.3.0-develop.37",
+    "@progress/kendo-angular-intl": "19.3.0-develop.37",
+    "@progress/kendo-angular-l10n": "19.3.0-develop.37",
+    "@progress/kendo-angular-label": "19.3.0-develop.37",
+    "@progress/kendo-angular-pager": "19.3.0-develop.37",
+    "@progress/kendo-angular-pdf-export": "19.3.0-develop.37",
+    "@progress/kendo-angular-popup": "19.3.0-develop.37",
+    "@progress/kendo-angular-toolbar": "19.3.0-develop.37",
+    "@progress/kendo-angular-utils": "19.3.0-develop.37",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "19.3.0-develop.35",
+    "@progress/kendo-angular-schematics": "19.3.0-develop.37",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/rendering/details-expand.directive.d.ts

@@ -13,8 +13,11 @@ import * as i0 from "@angular/core";
  * ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  *
  * @example
- * ```typescript
- * <kendo-grid [kendoGridExpandDetailsBy]="expandDetailsKey" [expandedDetailKeys]="expandedDetailKeys"></kendo-grid>
+ * ```html
+ * <kendo-grid
+ *     [kendoGridExpandDetailsBy]="expandDetailsKey"
+ *     [expandedDetailKeys]="expandedDetailKeys">
+ * </kendo-grid>
  * ```
  * @remarks
  * Applied to: {@link GridComponent}.

package/rendering/loading-template.directive.d.ts

@@ -19,6 +19,7 @@ import * as i0 from "@angular/core";
  *   <kendo-grid-column field="ProductName"></kendo-grid-column>
  *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
  * </kendo-grid>
+ * ```
  */
 export declare class LoadingTemplateDirective {
     templateRef: TemplateRef<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': '19.3.0-develop.35',
-            '@progress/kendo-angular-navigation': '19.3.0-develop.35',
+            '@progress/kendo-angular-treeview': '19.3.0-develop.37',
+            '@progress/kendo-angular-navigation': '19.3.0-develop.37',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '19.3.0-develop.35',
+            '@progress/kendo-angular-dialog': '19.3.0-develop.37',
             // peer dependency of kendo-angular-icons
             '@progress/kendo-svg-icons': '^4.0.0',
             // peer dependency of kendo-angular-layout
-            '@progress/kendo-angular-progressbar': '19.3.0-develop.35'
+            '@progress/kendo-angular-progressbar': '19.3.0-develop.37'
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/selection/selection.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  *
  * @example
- * ```typescript
+ * ```html
  * <kendo-grid kendoGridSelectBy="ProductID"></kendo-grid>
  *
  * <kendo-grid [kendoGridSelectBy]="myKey"></kendo-grid>