@progress/kendo-angular-grid 19.3.0-develop.4 → 19.3.0-develop.40

package/esm2022/grid.component.mjs

@@ -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 { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ViewContainerRef } from '@angular/core';
+import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ViewContainerRef, ContentChild } from '@angular/core';
 import { ZoneAwareEventEmitter } from './common/event-emitter';
 import { FormControl, FormGroup } from '@angular/forms';
 import { merge } from 'rxjs';
@@ -71,7 +71,7 @@ import { CellLoadingTemplateDirective } from './rendering/cell-loading.template.
 import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
 import { SizingOptionsService } from './layout/sizing-options.service';
-import { DraggableDirective, WatermarkOverlayComponent, guid, shouldShowValidationUI } from '@progress/kendo-angular-common';
+import { DraggableDirective, WatermarkOverlayComponent, guid, shouldShowValidationUI, getLicenseMessage } from '@progress/kendo-angular-common';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import { RowReorderService } from './row-reordering/row-reorder.service';
 import { StatusBarTemplateDirective } from './aggregates/status-bar-template.directive';
@@ -101,6 +101,7 @@ import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.comp
 import { ColumnMenuService } from './column-menu/column-menu.service';
 import { MenuTabbingService } from './filtering/menu/menu-tabbing.service';
 import { DataMappingService } from './data/data-mapping.service';
+import { AIAssistantToolbarDirective } from './rendering/toolbar/tools/ai-assistant/ai-tool.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -141,7 +142,7 @@ const handleExpandCollapseGroupsService = (service, expandEmitter, collapseEmitt
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
 const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmitter, map) => (service.changes.pipe(filter(({ dataItem }) => isPresent(dataItem)))
     .subscribe((x) => x.expand ? expandEmitter.emit(map(x)) : collapseEmitter.emit(map(x))));
-const isInEditedCell = (element, gridElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
+const isInEditedCell = (element, gridElement, isStacked = false) => (closest(element, matchesClasses('k-grid-edit-cell')) || (isStacked && closest(element, matchesClasses('k-grid-stack-edit-cell')))) &&
     closest(element, matchesNodeName('kendo-grid')) === gridElement;
 const NOTIFY_DELAY = 500;
 /**
@@ -388,7 +389,7 @@ export class GridComponent {
      * @hidden
      */
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return (this.lockedLeafColumns.length > 0 && !this.isStacked);
     }
     /**
      * @hidden
@@ -414,7 +415,9 @@ export class GridComponent {
      * @hidden
      */
     get showGroupPanel() {
-        return this.groupable && this.groupable.enabled !== false;
+        const isGroupable = this.groupable && this.groupable.enabled !== false;
+        const isGrouped = this.group?.length > 0;
+        return this.isStacked ? isGroupable && isGrouped : isGroupable;
     }
     /**
      * @hidden
@@ -692,6 +695,12 @@ export class GridComponent {
     get isGroupExpanded() {
         return this.groupsService.userCallback;
     }
+    /**
+     * Sets the Grid data layout display mode.
+     *
+     * @default 'columns'
+     */
+    dataLayoutMode = 'columns';
     /**
      * Fires when the Grid data is filtered through the UI and the filter descriptor changes.
      */
@@ -819,8 +828,11 @@ export class GridComponent {
     get sizeMediumClass() {
         return this.size === 'medium' || !this.size;
     }
+    get stackedClass() {
+        return this.dataLayoutMode === 'stacked';
+    }
     get lockedClasses() {
-        return this.lockedLeafColumns.length > 0;
+        return this.lockedLeafColumns.length > 0 && !this.isStacked;
     }
     get virtualClasses() {
         return this.isVirtual;
@@ -914,6 +926,7 @@ export class GridComponent {
         this._customToolbarTemplate = customToolbarTemplate;
     }
     columnMenuTemplates;
+    aiAssistantToolbarTool;
     lockedHeader;
     header;
     footer = new QueryList();
@@ -921,6 +934,7 @@ export class GridComponent {
     dragTargetContainer;
     dropTargetContainer;
     dialogContainer;
+    windowContainer;
     adaptiveRenderer;
     listComponent;
     get scrollbarWidth() {
@@ -973,6 +987,10 @@ export class GridComponent {
     selectionDirective = false;
     ariaRootId = `k-${guid()}`;
     showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
     columnsContainer = new ColumnsContainer(() => this.columnList.filterHierarchy(column => {
         if (!isUniversal()) {
             column.matchesMedia = this.matchesMedia(column);
@@ -1038,6 +1056,12 @@ export class GridComponent {
     get isScrollable() {
         return this.scrollable !== 'none';
     }
+    /**
+     * @hidden
+     */
+    get isStacked() {
+        return typeof this.dataLayoutMode === 'string' ? this.dataLayoutMode !== 'columns' : this.dataLayoutMode.mode !== 'columns';
+    }
     get visibleColumns() {
         return this.columnsContainer.allColumns;
     }
@@ -1075,11 +1099,14 @@ export class GridComponent {
         return this.nonLockedLeafColumns;
     }
     get lockedWidth() {
+        if (this.isStacked) {
+            return 0;
+        }
         const groupCellsWidth = this.group.length * GROUP_CELL_WIDTH;
         return expandColumns(this.lockedLeafColumns.toArray()).reduce((prev, curr) => prev + (curr.width || 0), groupCellsWidth);
     }
     get nonLockedWidth() {
-        if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
+        if (((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) && !this.isStacked) {
             return !this.virtualColumns ? this.columnsContainer.unlockedWidth :
                 this.leafViewportColumns.reduce((acc, column) => acc + (column.width || 0), 0);
         }
@@ -1105,7 +1132,7 @@ export class GridComponent {
      * @hidden
      */
     getDefaultSelectors(type) {
-        return this.rowReorderService.defaultSelectors[type];
+        return this.rowReorderService.defaultSelectors(this.isStacked)[type];
     }
     /**
      * @hidden
@@ -1176,8 +1203,10 @@ export class GridComponent {
         this.rowReorderService = rowReorderService;
         this.dataMappingService = dataMappingService;
         const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.ctx.grid = this;
+        this.ctx.navigable = typeof this.navigable === 'boolean' ? this.navigable : this.navigable.includes('table');
         this.groupChange = new ZoneAwareEventEmitter(this.ngZone);
         this.cellClick = new ZoneAwareEventEmitter(this.ngZone);
         this.columnResize = new ZoneAwareEventEmitter(this.ngZone);
@@ -1215,6 +1244,7 @@ export class GridComponent {
         this.columnReorderSubscription = this.columnReorderService
             .changes.subscribe(this.reorder.bind(this));
         this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
+        this.columnsContainer.isStacked = this.isStacked;
     }
     /**
      * Expands the master row at the specified data row index ([see example]({% slug hierarchy_grid %})).
@@ -1335,6 +1365,15 @@ export class GridComponent {
                 }
             }
         }
+        if (isChanged('dataLayoutMode', changes)) {
+            if (this.isStacked) {
+                this.generateStackedColumns();
+            }
+            else {
+                this.stackedColumns = { columns: [], areDefault: false };
+            }
+            this.columnsContainer.isStacked = this.isStacked;
+        }
     }
     ngAfterContentInit() {
         this.shouldGenerateColumns = !this.columns.length;
@@ -1361,6 +1400,7 @@ export class GridComponent {
         if (this.navigable.length) {
             this.navigationService.init(this.navigationMetadata(), this.navigable);
         }
+        this.isStacked && this.generateStackedColumns();
     }
     ngOnDestroy() {
         if (this.selectionSubscription) {
@@ -1506,6 +1546,7 @@ export class GridComponent {
      */
     closeRow(index) {
         this.editService.close(index);
+        this.isStacked && (this.navigationService.stackedCellEntered = false);
     }
     /**
      * Creates a new row editor ([see example]({% slug inline_editing_grid %}#toc-adding-records-1)).
@@ -1531,7 +1572,7 @@ export class GridComponent {
     editCell(rowIndex, column, group) {
         const instance = this.columnInstance(column);
         this.editService.editCell(rowIndex, instance, group);
-        this.focusEditElement('.k-grid-edit-cell');
+        this.focusEditElement(this.isStacked ? '.k-grid-stack-edit-cell' : '.k-grid-edit-cell');
     }
     /**
      * Closes the current cell in edit mode and fires the [`cellClose`]({% slug api_grid_gridcomponent %}#toc-cellclose) event.
@@ -1912,7 +1953,8 @@ export class GridComponent {
             isRowSelectable: this.isRowSelectable,
             selectable: this.selectable,
             view: this.view,
-            columns: cellSelectionMode ? this.columnList.toArray() : undefined
+            columns: cellSelectionMode ? this.columnList.toArray() : undefined,
+            isStacked: this.isStacked
         });
         if (!this.selectionDirective && !this.selectableSettings.enabled) {
             this.defaultSelection.reset();
@@ -1966,7 +2008,7 @@ export class GridComponent {
             if (this.lockedLeafColumns.length && !this.nonLockedLeafColumns.length) {
                 console.warn(GridConfigurationErrorMessages.nonLockedColumnPresent);
             }
-            if ((locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
+            if (!this.isStacked && (locked || this.virtualColumns) && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
                 console.warn(ColumnConfigurationErrorMessages.requiredWidth(locked ? 'Locked' : 'Virtual'));
             }
             if (locked && !this.isScrollable) {
@@ -1990,7 +2032,7 @@ export class GridComponent {
             if (!this.detailRowHeight && this.isVirtual && this.detailTemplate) {
                 console.warn(GridConfigurationErrorMessages.rowHeightVirtual);
             }
-            if (stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
+            if (!this.isStacked && stickyColumns && expandColumns(this.columnList.toArray()).filter(column => !column.width && !isColumnGroupComponent(column)).length) {
                 console.warn(ColumnConfigurationErrorMessages.requiredWidth('Sticky'));
             }
             if (this.rowSticky && this.scrollable === 'virtual') {
@@ -2014,6 +2056,47 @@ export class GridComponent {
             }));
         }
     }
+    /**
+     * @hidden
+     */
+    stackedColumns = { columns: [], areDefault: false };
+    generateStackedColumns() {
+        if (!this.isStacked || !isPresent(this.dataLayoutMode)) {
+            return;
+        }
+        this.stackedColumns.columns = [];
+        if (typeof this.dataLayoutMode === 'object') {
+            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` };
+                        this.stackedColumns.columns.push(currCol);
+                    }
+                    this.stackedColumns.areDefault = true;
+                }
+                else if (Array.isArray(columns)) {
+                    this.stackedColumns.columns = columns.map((colSize) => {
+                        const stackedColumn = {};
+                        if (typeof colSize === 'number') {
+                            stackedColumn.width = `${colSize}px`;
+                        }
+                        else if (typeof colSize === 'object' && colSize?.width) {
+                            stackedColumn.width = typeof colSize.width === 'number' ? `${colSize.width}px` : colSize.width;
+                        }
+                        else if (typeof colSize === 'string') {
+                            stackedColumn.width = colSize;
+                        }
+                        return stackedColumn;
+                    });
+                    this.stackedColumns.areDefault = false;
+                }
+            }
+        }
+        else {
+            this.stackedColumns = { columns: [{ width: this.wrapper.nativeElement.clientWidth }], areDefault: true };
+        }
+    }
     attachStateChangesEmitter() {
         this.stateChangeSubscription =
             merge(this.pageChange.pipe(map(x => ({
@@ -2096,14 +2179,14 @@ export class GridComponent {
                     !closest(args.target, matchesClasses('k-animation-container k-grid-ignore-click')) &&
                     !(activeElement &&
                         (closest(activeElement, matchesClasses('k-animation-container')) ||
-                            isInEditedCell(activeElement, this.wrapper.nativeElement)))) {
+                            isInEditedCell(activeElement, this.wrapper.nativeElement, this.isStacked)))) {
                     this.editService.closeCell(args);
                 }
             });
             const windowBlurSubscription = this.renderer.listen('window', 'blur', (args) => {
                 const activeElement = document.activeElement;
                 if (activeElement && !(matchesNodeName('input')(activeElement) && activeElement.type === 'file' &&
-                    isInEditedCell(activeElement, this.wrapper.nativeElement))) {
+                    isInEditedCell(activeElement, this.wrapper.nativeElement, this.isStacked))) {
                     this.editService.closeCell(args);
                 }
                 this.domEvents.windowBlur.emit(args);
@@ -2222,8 +2305,8 @@ export class GridComponent {
         const dataRows = isVirtual ? this.view.total : pageSize;
         const addRowOffset = this.editService.hasNewItem ? 1 : 0;
         const filterRowOffset = hasFilterRow(this.filterable) ? 1 : 0;
-        const headerRows = this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
-        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer);
+        const headerRows = this.isStacked ? 0 : this.totalColumnLevels + 1 + filterRowOffset + addRowOffset;
+        return new NavigationMetadata(dataRows, headerRows, isVirtual, this.hasPager, isPresent(this.detailTemplate), this.wrapper, this.virtualColumns, this.columnsContainer, this.isStacked);
     }
     applyAutoSize() {
         const cols = this.columns.filter((c) => this.autoSize ? c.autoSize !== false : c.autoSize);
@@ -2328,7 +2411,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.AdaptiveGridService }, { token: i25.RowReorderService }, { token: i26.DataMappingService }], 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", adaptiveMode: "adaptiveMode", 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", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", showInactiveTools: "showInactiveTools", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", gridStateChange: "gridStateChange", 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: [
+    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", adaptiveMode: "adaptiveMode", 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", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", isRowSelectable: "isRowSelectable", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", showInactiveTools: "showInactiveTools", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded", dataLayoutMode: "dataLayoutMode" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", gridStateChange: "gridStateChange", 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-stack": "this.stackedClass", "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,
@@ -2379,7 +2462,7 @@ export class GridComponent {
             ColumnMenuService,
             MenuTabbingService,
             DataMappingService
-        ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "aiAssistantToolbarTool", first: true, predicate: AIAssistantToolbarDirective, descendants: true }, { propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "dialogContainer", first: true, predicate: ["dialogContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "windowContainer", first: true, predicate: ["windowContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -2612,10 +2695,10 @@ export class GridComponent {
             i18n-columnsReset="kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows."
+            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows. Applies also to the expand button text in stacked mode."
             detailExpand="Expand Details"
 
-            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows."
+            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows. Applies also to the collapse button text in stacked mode."
             detailCollapse="Collapse Details"
 
             i18n-filterDateToday="kendo.grid.filterDateToday|The text of the Today button of the Date filter."
@@ -2725,6 +2808,33 @@ export class GridComponent {
 
             i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
             externalEditingCancelText="Cancel"
+
+            i18n-aiAssistantToolbarToolText="kendo.grid.aiAssistantToolbarToolText|The text of the AI Assistant toolbar tool"
+            aiAssistantToolbarToolText="AI Assistant"
+
+            i18n-aiAssistantWindowTitle="kendo.grid.aiAssistantWindowTitle|The text of the AI Assistant Window title"
+            aiAssistantWindowTitle="AI Assistant"
+
+            i18n-aiAssistantApplyButtonText="kendo.grid.aiAssistantApplyButtonText|The text of the AI Assistant Apply button"
+            aiAssistantApplyButtonText="Apply"
+
+            i18n-aiAssistantWindowCloseTitle="kendo.grid.aiAssistantWindowCloseTitle|The title of the AI Assistant Window close button"
+            aiAssistantWindowCloseTitle="Close"
+
+            i18n-aiAssistantWindowMaximizeTitle="kendo.grid.aiAssistantWindowMaximizeTitle|The title of the AI Assistant Window maximize button"
+            aiAssistantWindowMaximizeTitle="Maximize"
+
+            i18n-aiAssistantWindowMinimizeTitle="kendo.grid.aiAssistantWindowMinimizeTitle|The title of the AI Assistant Window minimize button"
+            aiAssistantWindowMinimizeTitle="Minimize"
+
+            i18n-aiAssistantWindowRestoreTitle="kendo.grid.aiAssistantWindowRestoreTitle|The title of the AI Assistant Window restore button"
+            aiAssistantWindowRestoreTitle="Restore"
+
+            i18n-aiAssistantOutputCardTitle="kendo.grid.aiAssistantOutputCardTitle|The title of the AI Assistant Prompt Output Card"
+            aiAssistantOutputCardTitle="Generated with AI"
+
+            i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
+            aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -2810,7 +2920,7 @@ export class GridComponent {
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
             <ng-container *ngIf="isScrollable">
-                <div *ngIf="!hideHeader"
+                <div *ngIf="!hideHeader && !isStacked"
                     class="k-grid-header"
                     [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
@@ -2934,7 +3044,7 @@ export class GridComponent {
                     class="k-grid-footer"
                     [style.padding]="headerPadding">
                     <div
-                        *ngIf="lockedLeafColumns.length"
+                        *ngIf="lockedLeafColumns.length && !isStacked"
                         class="k-grid-footer-locked"
                         [style.width.px]="lockedWidth">
                         <table
@@ -2945,7 +3055,7 @@ export class GridComponent {
                             [style.width.px]="lockedWidth"
                             kendoGridTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(lockedLeafColumns)"
                                 [groups]="group"
                                 [detailTemplate]="detailTemplate">
@@ -2963,7 +3073,7 @@ export class GridComponent {
                     </div>
                     <div #footer
                         class="k-grid-footer-wrap" data-scrollable
-                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0 && !isStacked"
                         [lockedWidth]="lockedWidth + scrollbarWidth + 3">
                         <table
                             role="presentation"
@@ -2972,7 +3082,7 @@ export class GridComponent {
                             kendoGridTable
                             kendoGridResizableTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(headerLeafColumns)"
                                 [groups]="isLocked ? [] : group"
                                 [detailTemplate]="detailTemplate">
@@ -2982,7 +3092,7 @@ export class GridComponent {
                                 [scrollable]="true"
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(headerColumns)"
-                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [lockedColumnsCount]="isStacked ? 0 : lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
                                 [totalColumns]="columnsContainer"
                                 [totalColumnsCount]="leafColumns.length">
@@ -3006,7 +3116,7 @@ export class GridComponent {
                         [detailTemplate]="detailTemplate">
                     </colgroup>
                     <thead kendoGridHeader
-                        *ngIf="!hideHeader"
+                        *ngIf="!hideHeader && !isStacked"
                         class="k-grid-header"
                         [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
@@ -3144,8 +3254,10 @@ export class GridComponent {
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }, { kind: "component", type: i27.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i27.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i27.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i27.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i27.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i27.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i27.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i27.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i27.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
+        <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GridToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { kind: "component", type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { kind: "directive", type: TableDirective, selector: "[kendoGridResizableTable]", inputs: ["locked", "virtualColumns"] }, { kind: "directive", type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { kind: "component", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { kind: "component", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { kind: "directive", type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { kind: "component", type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { kind: "directive", type: DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode", "cursorStyle", "hintContext"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { kind: "directive", type: DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }, { kind: "component", type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns", "totalColumnsCount"] }, { kind: "component", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "rowsToRender", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { kind: "component", type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { kind: "component", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }, { kind: "component", type: i27.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i27.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i27.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["showPageText", "size"] }, { kind: "component", type: i27.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i27.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i27.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["showItemsText", "pageSizes", "size", "adaptiveMode"] }, { kind: "component", type: i27.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i27.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i27.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive", "adaptiveMode"], outputs: ["pageChange", "pageSizeChange", "pagerInputVisibilityChange", "pageTextVisibilityChange", "itemsTextVisibilityChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-grid-adaptive-renderer" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -3438,10 +3550,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-columnsReset="kendo.grid.columnsReset|The text shown in the column menu or column chooser for the columns reset button"
             columnsReset="Reset"
 
-            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows."
+            i18n-detailExpand="kendo.grid.detailExpand|The title of the expand icon of detail rows. Applies also to the expand button text in stacked mode."
             detailExpand="Expand Details"
 
-            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows."
+            i18n-detailCollapse="kendo.grid.detailCollapse|The title of the collapse icon of detail rows. Applies also to the collapse button text in stacked mode."
             detailCollapse="Collapse Details"
 
             i18n-filterDateToday="kendo.grid.filterDateToday|The text of the Today button of the Date filter."
@@ -3551,6 +3663,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-externalEditingCancelText="kendo.grid.externalEditingCancelText|The text of the external editing form Cancel button"
             externalEditingCancelText="Cancel"
+
+            i18n-aiAssistantToolbarToolText="kendo.grid.aiAssistantToolbarToolText|The text of the AI Assistant toolbar tool"
+            aiAssistantToolbarToolText="AI Assistant"
+
+            i18n-aiAssistantWindowTitle="kendo.grid.aiAssistantWindowTitle|The text of the AI Assistant Window title"
+            aiAssistantWindowTitle="AI Assistant"
+
+            i18n-aiAssistantApplyButtonText="kendo.grid.aiAssistantApplyButtonText|The text of the AI Assistant Apply button"
+            aiAssistantApplyButtonText="Apply"
+
+            i18n-aiAssistantWindowCloseTitle="kendo.grid.aiAssistantWindowCloseTitle|The title of the AI Assistant Window close button"
+            aiAssistantWindowCloseTitle="Close"
+
+            i18n-aiAssistantWindowMaximizeTitle="kendo.grid.aiAssistantWindowMaximizeTitle|The title of the AI Assistant Window maximize button"
+            aiAssistantWindowMaximizeTitle="Maximize"
+
+            i18n-aiAssistantWindowMinimizeTitle="kendo.grid.aiAssistantWindowMinimizeTitle|The title of the AI Assistant Window minimize button"
+            aiAssistantWindowMinimizeTitle="Minimize"
+
+            i18n-aiAssistantWindowRestoreTitle="kendo.grid.aiAssistantWindowRestoreTitle|The title of the AI Assistant Window restore button"
+            aiAssistantWindowRestoreTitle="Restore"
+
+            i18n-aiAssistantOutputCardTitle="kendo.grid.aiAssistantOutputCardTitle|The title of the AI Assistant Prompt Output Card"
+            aiAssistantOutputCardTitle="Generated with AI"
+
+            i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
+            aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -3636,7 +3775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount">
             <ng-container *ngIf="isScrollable">
-                <div *ngIf="!hideHeader"
+                <div *ngIf="!hideHeader && !isStacked"
                     class="k-grid-header"
                     [class.k-grid-draggable-header]="groupable || reorderable"
                     role="presentation"
@@ -3760,7 +3899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     class="k-grid-footer"
                     [style.padding]="headerPadding">
                     <div
-                        *ngIf="lockedLeafColumns.length"
+                        *ngIf="lockedLeafColumns.length && !isStacked"
                         class="k-grid-footer-locked"
                         [style.width.px]="lockedWidth">
                         <table
@@ -3771,7 +3910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             [style.width.px]="lockedWidth"
                             kendoGridTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(lockedLeafColumns)"
                                 [groups]="group"
                                 [detailTemplate]="detailTemplate">
@@ -3789,7 +3928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </div>
                     <div #footer
                         class="k-grid-footer-wrap" data-scrollable
-                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0 && !isStacked"
                         [lockedWidth]="lockedWidth + scrollbarWidth + 3">
                         <table
                             role="presentation"
@@ -3798,7 +3937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             kendoGridTable
                             kendoGridResizableTable
                             [size]="size">
-                            <colgroup kendoGridColGroup
+                            <colgroup kendoGridColGroup *ngIf="!isStacked"
                                 [columns]="$any(headerLeafColumns)"
                                 [groups]="isLocked ? [] : group"
                                 [detailTemplate]="detailTemplate">
@@ -3808,7 +3947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 [scrollable]="true"
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(headerColumns)"
-                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [lockedColumnsCount]="isStacked ? 0 : lockedLeafColumns.length"
                                 [detailTemplate]="detailTemplate"
                                 [totalColumns]="columnsContainer"
                                 [totalColumnsCount]="leafColumns.length">
@@ -3832,7 +3971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         [detailTemplate]="detailTemplate">
                     </colgroup>
                     <thead kendoGridHeader
-                        *ngIf="!hideHeader"
+                        *ngIf="!hideHeader && !isStacked"
                         class="k-grid-header"
                         [class.k-grid-draggable-header]="groupable || reorderable"
                         role="rowgroup"
@@ -3970,7 +4109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
         <kendo-grid-adaptive-renderer *ngIf="isAdaptiveModeEnabled"></kendo-grid-adaptive-renderer>
 
-        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+        <div *ngIf="aiAssistantToolbarTool" #windowContainer></div>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark" [licenseMessage]="licenseMessage"></div>
     `,
                     standalone: true,
                     imports: [
@@ -4053,6 +4194,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], isGroupExpanded: [{
                 type: Input
+            }], dataLayoutMode: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], pageChange: [{
@@ -4124,6 +4267,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], sizeMediumClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-md']
+            }], stackedClass: [{
+                type: HostBinding,
+                args: ['class.k-grid-stack']
             }], lockedClasses: [{
                 type: HostBinding,
                 args: ['class.k-grid-lockedcolumns']
@@ -4172,6 +4318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], columnMenuTemplates: [{
                 type: ContentChildren,
                 args: [ColumnMenuTemplateDirective]
+            }], aiAssistantToolbarTool: [{
+                type: ContentChild,
+                args: [AIAssistantToolbarDirective]
             }], lockedHeader: [{
                 type: ViewChild,
                 args: ['lockedHeader']
@@ -4193,6 +4342,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dialogContainer: [{
                 type: ViewChild,
                 args: ['dialogContainer', { read: ViewContainerRef }]
+            }], windowContainer: [{
+                type: ViewChild,
+                args: ['windowContainer', { read: ViewContainerRef }]
             }], adaptiveRenderer: [{
                 type: ViewChild,
                 args: [AdaptiveRendererComponent]