@progress/kendo-angular-grid 18.5.0-develop.9 → 18.5.1-develop.2

package/column-menu/column-chooser-tool.directive.d.ts

@@ -0,0 +1,57 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgZone, Renderer2, AfterViewInit, OnInit, OnDestroy } from '@angular/core';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { ContextService } from '../common/provider.service';
+import * as i0 from "@angular/core";
+/**
+ * Represents the `column-chooser` toolbar tool of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export declare class ColumnChooserToolbarDirective implements OnInit, AfterViewInit, OnDestroy {
+    private renderer;
+    private popupSerivce;
+    host: ToolBarButtonComponent;
+    private ctx;
+    private zone;
+    private refresh;
+    /**
+     * Specifies if the changes in the visibility of the column will be immediately applied.
+     *
+     * @default false
+     */
+    autoSync: boolean;
+    /**
+     * Specifies if all columns can be hidden.
+     *
+     * @default true
+     */
+    allowHideAll: boolean;
+    private popupRef;
+    private subs;
+    private nextId;
+    constructor(renderer: Renderer2, popupSerivce: PopupService, host: ToolBarButtonComponent, ctx: ContextService, zone: NgZone, refresh: RefreshService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    onClick(e: any): void;
+    private closePopup;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChooserToolbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnChooserToolbarDirective, "[kendoGridColumnChooserTool]", never, { "autoSync": { "alias": "autoSync"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; }, {}, never, never, true, never>;
+}

package/column-menu/column-list.component.d.ts

@@ -14,6 +14,8 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private ngZone;
     private renderer;
     private listNavigationService;
+    checkIcon: import("@progress/kendo-svg-icons").SVGIcon;
+    arrowRotateCcwIcon: import("@progress/kendo-svg-icons").SVGIcon;
     className: boolean;
     reset: EventEmitter<any>;
     apply: EventEmitter<any>;

package/directives.d.ts

@@ -68,6 +68,7 @@ import { StringFilterCellComponent } from "./filtering/cell/string-filter-cell.c
 import { FilterRowComponent } from "./filtering/filter-row.component";
 import { ColumnMenuChooserItemCheckedDirective } from "./column-menu/column-chooser-item-checked.directive";
 import { ColumnChooserComponent } from "./column-menu/column-chooser.component";
+import { ColumnChooserToolbarDirective } from "./column-menu/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
 import { ColumnMenuAutoSizeAllColumnsComponent } from "./column-menu/column-menu-autosize-all.component";
 import { ColumnMenuAutoSizeColumnComponent } from "./column-menu/column-menu-autosize.component";
@@ -198,13 +199,13 @@ export declare const KENDO_GRID_FILTER_ROW: readonly [typeof FilterRowComponent,
  *
  * Utility array that contains the former ColumnMenu module declarations
  */
-export declare const KENDO_GRID_COLUMN_MENU_DECLARATIONS: readonly [typeof ColumnMenuChooserItemCheckedDirective, typeof ColumnListComponent, typeof ColumnChooserComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent];
+export declare const KENDO_GRID_COLUMN_MENU_DECLARATIONS: readonly [typeof ColumnMenuChooserItemCheckedDirective, typeof ColumnListComponent, typeof ColumnChooserComponent, typeof ColumnChooserToolbarDirective, typeof ColumnMenuChooserComponent, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent];
 /**
  * @hidden
  *
  * Utility array that contains the former ColumnMenu module exports
  */
-export declare const KENDO_GRID_COLUMN_MENU_EXPORTS: readonly [typeof ColumnChooserComponent, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent];
+export declare const KENDO_GRID_COLUMN_MENU_EXPORTS: readonly [typeof ColumnChooserComponent, typeof ColumnChooserToolbarDirective, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent];
 /**
  * @hidden
  */
@@ -232,7 +233,7 @@ export declare const KENDO_GRID_DECLARATIONS: readonly [typeof GridComponent, ty
  *
  * Utility array that contains the Grid module exports
  */
-export declare const KENDO_GRID_EXPORTS: readonly [typeof GridComponent, typeof ToolbarTemplateDirective, typeof ToolbarComponent, typeof GridSpacerComponent, typeof StatusBarTemplateDirective, typeof DataBindingDirective, typeof SelectionDirective, typeof CustomMessagesComponent, typeof GroupBindingDirective, typeof TemplateEditingDirective, typeof ReactiveEditingDirective, typeof InCellEditingDirective, typeof ExternalEditingDirective, typeof ExpandDetailsDirective, typeof ExpandGroupDirective, typeof GridToolbarFocusableDirective, typeof GroupHeaderTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderComponent, typeof GroupPanelComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof LogicalCellDirective, typeof LogicalRowDirective, typeof FocusableDirective, typeof FooterTemplateDirective, typeof ColGroupComponent, typeof ResizableContainerDirective, typeof TemplateContextDirective, typeof FieldAccessorPipe, typeof DetailTemplateDirective, typeof SpanColumnComponent, typeof LoadingComponent, typeof GridTableDirective, typeof CommandColumnComponent, typeof CheckboxColumnComponent, typeof SelectionCheckboxDirective, typeof CellTemplateDirective, typeof EditTemplateDirective, typeof RowDragHandleTemplateDirective, typeof RowDragHintTemplateDirective, typeof TableBodyComponent, typeof NoRecordsTemplateDirective, typeof CellComponent, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective, typeof AddCommandToolbarDirective, typeof CellLoadingTemplateDirective, typeof LoadingTemplateDirective, typeof RowReorderColumnComponent, typeof HeaderComponent, typeof HeaderTemplateDirective, typeof ColumnHandleDirective, typeof SelectAllCheckboxDirective, typeof FilterRowComponent, typeof FilterCellComponent, typeof FilterCellTemplateDirective, typeof StringFilterCellComponent, typeof NumericFilterCellComponent, typeof AutoCompleteFilterCellComponent, typeof BooleanFilterCellComponent, typeof FilterCellHostDirective, typeof FilterCellWrapperComponent, typeof DateFilterCellComponent, typeof FilterCellOperatorsComponent, typeof ContainsFilterOperatorComponent, typeof DoesNotContainFilterOperatorComponent, typeof EndsWithFilterOperatorComponent, typeof EqualFilterOperatorComponent, typeof IsEmptyFilterOperatorComponent, typeof IsNotEmptyFilterOperatorComponent, typeof IsNotNullFilterOperatorComponent, typeof IsNullFilterOperatorComponent, typeof NotEqualFilterOperatorComponent, typeof StartsWithFilterOperatorComponent, typeof GreaterFilterOperatorComponent, typeof GreaterOrEqualToFilterOperatorComponent, typeof LessFilterOperatorComponent, typeof LessOrEqualToFilterOperatorComponent, typeof AfterFilterOperatorComponent, typeof AfterEqFilterOperatorComponent, typeof BeforeEqFilterOperatorComponent, typeof BeforeFilterOperatorComponent, typeof FilterMenuComponent, typeof FilterMenuContainerComponent, typeof FilterMenuInputWrapperComponent, typeof StringFilterMenuInputComponent, typeof StringFilterMenuComponent, typeof FilterMenuTemplateDirective, typeof NumericFilterMenuComponent, typeof NumericFilterMenuInputComponent, typeof DateFilterMenuInputComponent, typeof DateFilterMenuComponent, typeof FilterMenuHostDirective, typeof BooleanFilterMenuComponent, typeof FilterMenuDropDownListDirective, typeof BooleanFilterRadioButtonDirective, typeof ColumnChooserComponent, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent, typeof GridClipboardDirective];
+export declare const KENDO_GRID_EXPORTS: readonly [typeof GridComponent, typeof ToolbarTemplateDirective, typeof ToolbarComponent, typeof GridSpacerComponent, typeof StatusBarTemplateDirective, typeof DataBindingDirective, typeof SelectionDirective, typeof CustomMessagesComponent, typeof GroupBindingDirective, typeof TemplateEditingDirective, typeof ReactiveEditingDirective, typeof InCellEditingDirective, typeof ExternalEditingDirective, typeof ExpandDetailsDirective, typeof ExpandGroupDirective, typeof GridToolbarFocusableDirective, typeof GroupHeaderTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderComponent, typeof GroupPanelComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof LogicalCellDirective, typeof LogicalRowDirective, typeof FocusableDirective, typeof FooterTemplateDirective, typeof ColGroupComponent, typeof ResizableContainerDirective, typeof TemplateContextDirective, typeof FieldAccessorPipe, typeof DetailTemplateDirective, typeof SpanColumnComponent, typeof LoadingComponent, typeof GridTableDirective, typeof CommandColumnComponent, typeof CheckboxColumnComponent, typeof SelectionCheckboxDirective, typeof CellTemplateDirective, typeof EditTemplateDirective, typeof RowDragHandleTemplateDirective, typeof RowDragHintTemplateDirective, typeof TableBodyComponent, typeof NoRecordsTemplateDirective, typeof CellComponent, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective, typeof AddCommandToolbarDirective, typeof CellLoadingTemplateDirective, typeof LoadingTemplateDirective, typeof RowReorderColumnComponent, typeof HeaderComponent, typeof HeaderTemplateDirective, typeof ColumnHandleDirective, typeof SelectAllCheckboxDirective, typeof FilterRowComponent, typeof FilterCellComponent, typeof FilterCellTemplateDirective, typeof StringFilterCellComponent, typeof NumericFilterCellComponent, typeof AutoCompleteFilterCellComponent, typeof BooleanFilterCellComponent, typeof FilterCellHostDirective, typeof FilterCellWrapperComponent, typeof DateFilterCellComponent, typeof FilterCellOperatorsComponent, typeof ContainsFilterOperatorComponent, typeof DoesNotContainFilterOperatorComponent, typeof EndsWithFilterOperatorComponent, typeof EqualFilterOperatorComponent, typeof IsEmptyFilterOperatorComponent, typeof IsNotEmptyFilterOperatorComponent, typeof IsNotNullFilterOperatorComponent, typeof IsNullFilterOperatorComponent, typeof NotEqualFilterOperatorComponent, typeof StartsWithFilterOperatorComponent, typeof GreaterFilterOperatorComponent, typeof GreaterOrEqualToFilterOperatorComponent, typeof LessFilterOperatorComponent, typeof LessOrEqualToFilterOperatorComponent, typeof AfterFilterOperatorComponent, typeof AfterEqFilterOperatorComponent, typeof BeforeEqFilterOperatorComponent, typeof BeforeFilterOperatorComponent, typeof FilterMenuComponent, typeof FilterMenuContainerComponent, typeof FilterMenuInputWrapperComponent, typeof StringFilterMenuInputComponent, typeof StringFilterMenuComponent, typeof FilterMenuTemplateDirective, typeof NumericFilterMenuComponent, typeof NumericFilterMenuInputComponent, typeof DateFilterMenuInputComponent, typeof DateFilterMenuComponent, typeof FilterMenuHostDirective, typeof BooleanFilterMenuComponent, typeof FilterMenuDropDownListDirective, typeof BooleanFilterRadioButtonDirective, typeof ColumnChooserComponent, typeof ColumnChooserToolbarDirective, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent, typeof GridClipboardDirective];
 /**
  * @hidden
  *
@@ -248,4 +249,4 @@ export declare const KENDO_GRID_PDF_EXPORT: readonly [typeof PDFComponent, typeo
 /**
  * Utility array that contains all `Grid` related components and directives
  */
-export declare const KENDO_GRID: readonly [typeof GridComponent, typeof ToolbarTemplateDirective, typeof ToolbarComponent, typeof GridSpacerComponent, typeof StatusBarTemplateDirective, typeof DataBindingDirective, typeof SelectionDirective, typeof CustomMessagesComponent, typeof GroupBindingDirective, typeof TemplateEditingDirective, typeof ReactiveEditingDirective, typeof InCellEditingDirective, typeof ExternalEditingDirective, typeof ExpandDetailsDirective, typeof ExpandGroupDirective, typeof GridToolbarFocusableDirective, typeof GroupHeaderTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderComponent, typeof GroupPanelComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof LogicalCellDirective, typeof LogicalRowDirective, typeof FocusableDirective, typeof FooterTemplateDirective, typeof ColGroupComponent, typeof ResizableContainerDirective, typeof TemplateContextDirective, typeof FieldAccessorPipe, typeof DetailTemplateDirective, typeof SpanColumnComponent, typeof LoadingComponent, typeof GridTableDirective, typeof CommandColumnComponent, typeof CheckboxColumnComponent, typeof SelectionCheckboxDirective, typeof CellTemplateDirective, typeof EditTemplateDirective, typeof RowDragHandleTemplateDirective, typeof RowDragHintTemplateDirective, typeof TableBodyComponent, typeof NoRecordsTemplateDirective, typeof CellComponent, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective, typeof AddCommandToolbarDirective, typeof CellLoadingTemplateDirective, typeof LoadingTemplateDirective, typeof RowReorderColumnComponent, typeof HeaderComponent, typeof HeaderTemplateDirective, typeof ColumnHandleDirective, typeof SelectAllCheckboxDirective, typeof FilterRowComponent, typeof FilterCellComponent, typeof FilterCellTemplateDirective, typeof StringFilterCellComponent, typeof NumericFilterCellComponent, typeof AutoCompleteFilterCellComponent, typeof BooleanFilterCellComponent, typeof FilterCellHostDirective, typeof FilterCellWrapperComponent, typeof DateFilterCellComponent, typeof FilterCellOperatorsComponent, typeof ContainsFilterOperatorComponent, typeof DoesNotContainFilterOperatorComponent, typeof EndsWithFilterOperatorComponent, typeof EqualFilterOperatorComponent, typeof IsEmptyFilterOperatorComponent, typeof IsNotEmptyFilterOperatorComponent, typeof IsNotNullFilterOperatorComponent, typeof IsNullFilterOperatorComponent, typeof NotEqualFilterOperatorComponent, typeof StartsWithFilterOperatorComponent, typeof GreaterFilterOperatorComponent, typeof GreaterOrEqualToFilterOperatorComponent, typeof LessFilterOperatorComponent, typeof LessOrEqualToFilterOperatorComponent, typeof AfterFilterOperatorComponent, typeof AfterEqFilterOperatorComponent, typeof BeforeEqFilterOperatorComponent, typeof BeforeFilterOperatorComponent, typeof FilterMenuComponent, typeof FilterMenuContainerComponent, typeof FilterMenuInputWrapperComponent, typeof StringFilterMenuInputComponent, typeof StringFilterMenuComponent, typeof FilterMenuTemplateDirective, typeof NumericFilterMenuComponent, typeof NumericFilterMenuInputComponent, typeof DateFilterMenuInputComponent, typeof DateFilterMenuComponent, typeof FilterMenuHostDirective, typeof BooleanFilterMenuComponent, typeof FilterMenuDropDownListDirective, typeof BooleanFilterRadioButtonDirective, typeof ColumnChooserComponent, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent, typeof GridClipboardDirective, typeof ExcelComponent, typeof ExcelCommandDirective, typeof ExcelCommandToolbarDirective, typeof ExcelColumnComponent, typeof ExcelColumnGroupComponent, typeof ExcelFooterTemplateDirective, typeof ExcelGroupFooterTemplateDirective, typeof ExcelGroupHeaderColumnTemplateDirective, typeof ExcelGroupHeaderTemplateDirective, typeof PDFComponent, typeof PDFMarginComponent, typeof PDFCommandDirective, typeof PDFTemplateDirective, typeof PDFCommandToolbarDirective];
+export declare const KENDO_GRID: readonly [typeof GridComponent, typeof ToolbarTemplateDirective, typeof ToolbarComponent, typeof GridSpacerComponent, typeof StatusBarTemplateDirective, typeof DataBindingDirective, typeof SelectionDirective, typeof CustomMessagesComponent, typeof GroupBindingDirective, typeof TemplateEditingDirective, typeof ReactiveEditingDirective, typeof InCellEditingDirective, typeof ExternalEditingDirective, typeof ExpandDetailsDirective, typeof ExpandGroupDirective, typeof GridToolbarFocusableDirective, typeof GroupHeaderTemplateDirective, typeof GroupHeaderColumnTemplateDirective, typeof GroupFooterTemplateDirective, typeof GroupHeaderComponent, typeof GroupPanelComponent, typeof ColumnComponent, typeof ColumnGroupComponent, typeof LogicalCellDirective, typeof LogicalRowDirective, typeof FocusableDirective, typeof FooterTemplateDirective, typeof ColGroupComponent, typeof ResizableContainerDirective, typeof TemplateContextDirective, typeof FieldAccessorPipe, typeof DetailTemplateDirective, typeof SpanColumnComponent, typeof LoadingComponent, typeof GridTableDirective, typeof CommandColumnComponent, typeof CheckboxColumnComponent, typeof SelectionCheckboxDirective, typeof CellTemplateDirective, typeof EditTemplateDirective, typeof RowDragHandleTemplateDirective, typeof RowDragHintTemplateDirective, typeof TableBodyComponent, typeof NoRecordsTemplateDirective, typeof CellComponent, typeof EditCommandDirective, typeof CancelCommandDirective, typeof SaveCommandDirective, typeof RemoveCommandDirective, typeof AddCommandDirective, typeof AddCommandToolbarDirective, typeof CellLoadingTemplateDirective, typeof LoadingTemplateDirective, typeof RowReorderColumnComponent, typeof HeaderComponent, typeof HeaderTemplateDirective, typeof ColumnHandleDirective, typeof SelectAllCheckboxDirective, typeof FilterRowComponent, typeof FilterCellComponent, typeof FilterCellTemplateDirective, typeof StringFilterCellComponent, typeof NumericFilterCellComponent, typeof AutoCompleteFilterCellComponent, typeof BooleanFilterCellComponent, typeof FilterCellHostDirective, typeof FilterCellWrapperComponent, typeof DateFilterCellComponent, typeof FilterCellOperatorsComponent, typeof ContainsFilterOperatorComponent, typeof DoesNotContainFilterOperatorComponent, typeof EndsWithFilterOperatorComponent, typeof EqualFilterOperatorComponent, typeof IsEmptyFilterOperatorComponent, typeof IsNotEmptyFilterOperatorComponent, typeof IsNotNullFilterOperatorComponent, typeof IsNullFilterOperatorComponent, typeof NotEqualFilterOperatorComponent, typeof StartsWithFilterOperatorComponent, typeof GreaterFilterOperatorComponent, typeof GreaterOrEqualToFilterOperatorComponent, typeof LessFilterOperatorComponent, typeof LessOrEqualToFilterOperatorComponent, typeof AfterFilterOperatorComponent, typeof AfterEqFilterOperatorComponent, typeof BeforeEqFilterOperatorComponent, typeof BeforeFilterOperatorComponent, typeof FilterMenuComponent, typeof FilterMenuContainerComponent, typeof FilterMenuInputWrapperComponent, typeof StringFilterMenuInputComponent, typeof StringFilterMenuComponent, typeof FilterMenuTemplateDirective, typeof NumericFilterMenuComponent, typeof NumericFilterMenuInputComponent, typeof DateFilterMenuInputComponent, typeof DateFilterMenuComponent, typeof FilterMenuHostDirective, typeof BooleanFilterMenuComponent, typeof FilterMenuDropDownListDirective, typeof BooleanFilterRadioButtonDirective, typeof ColumnChooserComponent, typeof ColumnChooserToolbarDirective, typeof ColumnMenuFilterComponent, typeof ColumnMenuItemComponent, typeof ColumnMenuItemContentTemplateDirective, typeof ColumnMenuSortComponent, typeof ColumnMenuLockComponent, typeof ColumnMenuStickComponent, typeof ColumnMenuPositionComponent, typeof ColumnMenuChooserComponent, typeof ColumnMenuTemplateDirective, typeof ColumnMenuContainerComponent, typeof ColumnMenuItemDirective, typeof ColumnMenuComponent, typeof ColumnMenuAutoSizeColumnComponent, typeof ColumnMenuAutoSizeAllColumnsComponent, typeof GridClipboardDirective, typeof ExcelComponent, typeof ExcelCommandDirective, typeof ExcelCommandToolbarDirective, typeof ExcelColumnComponent, typeof ExcelColumnGroupComponent, typeof ExcelFooterTemplateDirective, typeof ExcelGroupFooterTemplateDirective, typeof ExcelGroupHeaderColumnTemplateDirective, typeof ExcelGroupHeaderTemplateDirective, typeof PDFComponent, typeof PDFMarginComponent, typeof PDFCommandDirective, typeof PDFTemplateDirective, typeof PDFCommandToolbarDirective];

package/esm2022/column-menu/column-chooser-tool.directive.mjs

@@ -0,0 +1,172 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, NgZone, Input, Renderer2 } from '@angular/core';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { RefreshService, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
+import { ColumnListComponent } from './column-list.component';
+import { closest, isPresent } from '@progress/kendo-angular-common';
+import { Subscription } from 'rxjs';
+import { columnsIcon } from '@progress/kendo-svg-icons';
+import { ContextService } from '../common/provider.service';
+import { filter, take } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-popup";
+import * as i2 from "@progress/kendo-angular-toolbar";
+import * as i3 from "../common/provider.service";
+let incrementingId = 0;
+/**
+ * Represents the `column-chooser` toolbar tool of the Grid.
+ * You can apply this directive to any `kendo-toolbar-button` element inside a
+ * ToolbarComponent used in the Grid.
+ *
+ * @example
+ * ```html-no-run
+ * <kendo-grid>
+ *      <kendo-toolbar>
+ *         <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
+ *      </kendo-toolbar>
+ * </kendo-grid>
+ * ```
+ */
+export class ColumnChooserToolbarDirective {
+    renderer;
+    popupSerivce;
+    host;
+    ctx;
+    zone;
+    refresh;
+    /**
+     * Specifies if the changes in the visibility of the column will be immediately applied.
+     *
+     * @default false
+     */
+    autoSync = false;
+    /**
+     * Specifies if all columns can be hidden.
+     *
+     * @default true
+     */
+    allowHideAll = true;
+    popupRef;
+    subs = new Subscription();
+    nextId = incrementingId++;
+    constructor(renderer, popupSerivce, host, ctx, zone, refresh) {
+        this.renderer = renderer;
+        this.popupSerivce = popupSerivce;
+        this.host = host;
+        this.ctx = ctx;
+        this.zone = zone;
+        this.refresh = refresh;
+    }
+    ngOnInit() {
+        this.subs.add(this.host.click.subscribe(e => this.onClick(e)));
+        const hasToolbarIcon = isPresent(this.host.toolbarOptions.icon) && this.host.toolbarOptions.icon !== '';
+        const hasOverflowIcon = isPresent(this.host.overflowOptions.icon) && this.host.overflowOptions.icon !== '';
+        const hasIcon = hasToolbarIcon && hasOverflowIcon;
+        const hasSvgIcon = isPresent(this.host.toolbarOptions.svgIcon) && isPresent(this.host.overflowOptions.svgIcon);
+        if (!hasIcon) {
+            this.host.icon = 'columns';
+        }
+        if (!hasSvgIcon) {
+            this.host.svgIcon = columnsIcon;
+        }
+    }
+    ngAfterViewInit() {
+        const hasText = isPresent(this.host.text);
+        if (!hasText) {
+            this.zone.onStable.pipe(take(1)).subscribe(() => {
+                this.host.text = this.ctx.localization.get(`columns`);
+            });
+        }
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-haspopup', 'dialog');
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
+        this.host.toolbarButtonElement.nativeElement.setAttribute('title', this.ctx.localization.get('columns'));
+        this.subs.add(this.refresh.onRefresh.pipe(filter((tool) => tool === this.host)).subscribe((tool) => {
+            if (tool.overflows && this.popupRef) {
+                this.popupRef.close();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    onClick(e) {
+        e.preventDefault();
+        if (!this.popupRef) {
+            if (!this.host.overflows) {
+                const direction = this.ctx.localization.rtl ? 'right' : 'left';
+                this.popupRef = this.popupSerivce.open({
+                    anchor: this.host.toolbarButtonElement,
+                    content: ColumnListComponent,
+                    positionMode: 'absolute',
+                    anchorAlign: { vertical: 'bottom', horizontal: direction },
+                    popupAlign: { vertical: 'top', horizontal: direction }
+                });
+                const popupElement = this.popupRef.popupElement;
+                const popupId = `k-column-chooser-tool-${this.nextId}-popup`;
+                const popupAriaElement = popupElement.querySelector('.k-popup');
+                this.zone.runOutsideAngular(() => {
+                    this.renderer.listen(popupAriaElement, 'keydown', (e) => {
+                        if (e.key === 'Escape') {
+                            this.closePopup(true);
+                        }
+                    });
+                });
+                this.renderer.setAttribute(popupElement, 'dir', this.ctx.localization.rtl ? 'rtl' : 'ltr');
+                this.renderer.setAttribute(popupAriaElement, 'id', popupId);
+                this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
+                this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'true');
+                this.host.toolbarButtonElement.nativeElement.setAttribute('aria-controls', popupId);
+                const columnList = this.popupRef.content.instance;
+                columnList.isLast = true;
+                columnList.autoSync = this.autoSync;
+                columnList.allowHideAll = this.allowHideAll;
+                columnList.applyText = this.ctx.localization.get('columnsApply');
+                columnList.resetText = this.ctx.localization.get('columnsReset');
+                columnList.columns = this.ctx.grid.columns;
+                columnList.ariaLabel = this.ctx.localization.get('columns');
+                this.subs.add(this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
+                    this.closePopup(true);
+                }));
+                this.subs.add(columnList.apply.subscribe(() => {
+                    this.closePopup();
+                }));
+                this.zone.runOutsideAngular(() => this.renderer.listen('document', 'click', ({ target }) => {
+                    if (this.popupRef && !closest(target, node => node === this.popupRef.popupElement || node === this.host.toolbarButtonElement.nativeElement)) {
+                        this.zone.run(() => {
+                            this.closePopup();
+                        });
+                    }
+                }));
+            }
+        }
+        else {
+            this.closePopup();
+        }
+    }
+    closePopup(focusAnchor = false) {
+        this.popupRef.close();
+        this.popupRef = null;
+        this.host.toolbarButtonElement.nativeElement.setAttribute('aria-expanded', 'false');
+        this.host.toolbarButtonElement.nativeElement.removeAttribute('aria-controls');
+        focusAnchor && this.host.toolbarButtonElement.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i1.PopupService }, { token: i2.ToolBarButtonComponent }, { token: i3.ContextService }, { token: i0.NgZone }, { token: i2.RefreshService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnChooserToolbarDirective, isStandalone: true, selector: "[kendoGridColumnChooserTool]", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridColumnChooserTool]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PopupService }, { type: i2.ToolBarButtonComponent }, { type: i3.ContextService }, { type: i0.NgZone }, { type: i2.RefreshService }]; }, propDecorators: { autoSync: [{
+                type: Input
+            }], allowHideAll: [{
+                type: Input
+            }] } });

package/esm2022/column-menu/column-list.component.mjs

@@ -11,6 +11,8 @@ import { Subscription } from 'rxjs';
 import { NgFor, NgIf, NgClass } from '@angular/common';
 import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import { take } from 'rxjs/operators';
+import { arrowRotateCcwIcon, checkIcon } from '@progress/kendo-svg-icons';
+import { ButtonDirective } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-list-kb-nav.service";
 /**
@@ -21,6 +23,8 @@ export class ColumnListComponent {
     ngZone;
     renderer;
     listNavigationService;
+    checkIcon = checkIcon;
+    arrowRotateCcwIcon = arrowRotateCcwIcon;
     className = true;
     reset = new EventEmitter();
     apply = new EventEmitter();
@@ -74,9 +78,11 @@ export class ColumnListComponent {
         });
     }
     ngAfterViewInit() {
-        this.listNavigationService.items = this.options.toArray();
-        this.listNavigationService.toggle(0, true);
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.updateDisabled());
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this.listNavigationService.items = this.options.toArray();
+            this.listNavigationService.toggle(0, true);
+            this.updateDisabled();
+        });
     }
     ngOnChanges(changes) {
         if (!this.service) {
@@ -268,21 +274,22 @@ export class ColumnListComponent {
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
             <button
                 #applyButton
+                kendoButton
                 type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                themeColor="primary"
                 (click)="applyChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
                 (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
                 #resetButton
+                kendoButton
                 type="button"
                 (keydown.tab)="onTab($event)"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
                 (click)="cancelChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
                 (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ColumnMenuChooserItemCheckedDirective, selector: "[kendoColumnMenuChooserItemChecked]", inputs: ["kendoColumnMenuChooserItemChecked"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -312,23 +319,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
             <button
                 #applyButton
+                kendoButton
                 type="button"
-                class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                themeColor="primary"
                 (click)="applyChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); applyChanges();"
                 (keydown.space)="$event.preventDefault(); $event.stopPropagation(); applyChanges();">{{ applyText }}</button>
             <button
                 #resetButton
+                kendoButton
                 type="button"
                 (keydown.tab)="onTab($event)"
-                class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
                 (click)="cancelChanges()"
                 (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();"
                 (keydown.space)="$event.preventDefault(); $event.stopPropagation(); cancelChanges();">{{ resetText }}</button>
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent]
+                    imports: [NgFor, ColumnMenuChooserItemCheckedDirective, NgIf, NgClass, CheckBoxComponent, ButtonDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ColumnListKeyboardNavigation }]; }, propDecorators: { className: [{
                 type: HostBinding,

package/esm2022/directives.mjs

@@ -73,6 +73,7 @@ import { FilterRowComponent } from "./filtering/filter-row.component";
 // COLUMN MENU
 import { ColumnMenuChooserItemCheckedDirective } from "./column-menu/column-chooser-item-checked.directive";
 import { ColumnChooserComponent } from "./column-menu/column-chooser.component";
+import { ColumnChooserToolbarDirective } from "./column-menu/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
 import { ColumnMenuAutoSizeAllColumnsComponent } from "./column-menu/column-menu-autosize-all.component";
 import { ColumnMenuAutoSizeColumnComponent } from "./column-menu/column-menu-autosize.component";
@@ -290,6 +291,7 @@ export const KENDO_GRID_COLUMN_MENU_DECLARATIONS = [
     ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
+    ColumnChooserToolbarDirective,
     ColumnMenuChooserComponent,
     ColumnMenuFilterComponent,
     ColumnMenuItemComponent,
@@ -312,6 +314,7 @@ export const KENDO_GRID_COLUMN_MENU_DECLARATIONS = [
  */
 export const KENDO_GRID_COLUMN_MENU_EXPORTS = [
     ColumnChooserComponent,
+    ColumnChooserToolbarDirective,
     ColumnMenuFilterComponent,
     ColumnMenuItemComponent,
     ColumnMenuItemContentTemplateDirective,

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

@@ -36,6 +36,7 @@ export class EditingDirectiveBase {
     localization;
     defaultRemoveConfirmation = (_item) => {
         const dialog = this.dialogService.open({
+            appendTo: this.grid.dialogContainer,
             title: this.localization.get('removeConfirmationDialogTitle'),
             content: this.localization.get('removeConfirmationDialogContent'),
             actions: [{

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

@@ -46,7 +46,7 @@ export class ExternalEditingDirective extends EditingDirectiveBase {
      * Opens a Dialog that contains the edit form.
      */
     openEditFormDialog(editEventArgs, formGroup, formSettings) {
-        const settings = { content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
+        const settings = { appendTo: this.grid.dialogContainer, content: DialogFormComponent, title: this.localization.get('externalEditingTitle'), ...this.dialogSettings };
         const dialog = this.dialogService.open(settings);
         const formControls = this.normalizeFormSettings(formGroup, editEventArgs);
         dialog.content.setInput('controls', formControls);

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 } from '@angular/core';
+import { Component, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, QueryList, ViewChild, isDevMode, NgZone, ViewChildren, ChangeDetectorRef, ViewEncapsulation, ViewContainerRef } from '@angular/core';
 import { ZoneAwareEventEmitter } from './common/event-emitter';
 import { FormControl, FormGroup } from '@angular/forms';
 import { merge } from 'rxjs';
@@ -96,7 +96,6 @@ import { LocalizedMessagesDirective } from './localization/localized-messages.di
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { PagerTemplateDirective, PagerContextService, PagerNavigationService, KENDO_PAGER } from '@progress/kendo-angular-pager';
 import { RowspanService } from './rendering/rowspan.service';
-import { DialogContainerDirective } from '@progress/kendo-angular-dialog';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -846,6 +845,7 @@ export class GridComponent {
     ariaRoot;
     dragTargetContainer;
     dropTargetContainer;
+    dialogContainer;
     get scrollbarWidth() {
         return this.supportService.scrollbarWidth;
     }
@@ -2245,7 +2245,7 @@ export class GridComponent {
             RowReorderService,
             ClipboardService,
             RowspanService
-        ], 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: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+        ], 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: "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"
@@ -2391,7 +2391,7 @@ export class GridComponent {
             i18n-columnMenu="kendo.grid.columnMenu|The title of the column menu icon"
             columnMenu="{{ '{columnName} Column Menu' }}"
 
-            i18n-columns="kendo.grid.columns|The text shown in the column menu for the columns item"
+            i18n-columns="kendo.grid.columns|The text for the Grid Column Chooser and Column Chooser toolbar tool"
             columns="Columns"
 
             i18n-lock="kendo.grid.lock|The text shown in the column menu for the lock item"
@@ -2928,10 +2928,10 @@ export class GridComponent {
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
-        <div kendoDialogContainer></div>
+        <div #dialogContainer></div>
         
         <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", "stickyRowHeight", "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", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "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: i25.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i25.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i25.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i25.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i25.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i25.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i25.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i25.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i25.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DialogContainerDirective, selector: "[kendoDialogContainer]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, 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", "stickyRowHeight", "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", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "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: i25.CustomMessagesComponent, selector: "kendo-datapager-messages, kendo-pager-messages" }, { kind: "component", type: i25.PagerInfoComponent, selector: "kendo-datapager-info, kendo-pager-info" }, { kind: "component", type: i25.PagerInputComponent, selector: "kendo-datapager-input, kendo-pager-input", inputs: ["size"] }, { kind: "component", type: i25.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons, kendo-pager-next-buttons", inputs: ["size"] }, { kind: "component", type: i25.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons, kendo-pager-numeric-buttons", inputs: ["buttonCount", "size"] }, { kind: "component", type: i25.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes, kendo-pager-page-sizes", inputs: ["pageSizes", "size"] }, { kind: "component", type: i25.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons, kendo-pager-prev-buttons", inputs: ["size"] }, { kind: "directive", type: i25.PagerTemplateDirective, selector: "[kendoDataPagerTemplate], [kendoPagerTemplate]" }, { kind: "component", type: i25.PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -3133,7 +3133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-columnMenu="kendo.grid.columnMenu|The title of the column menu icon"
             columnMenu="{{ '{columnName} Column Menu' }}"
 
-            i18n-columns="kendo.grid.columns|The text shown in the column menu for the columns item"
+            i18n-columns="kendo.grid.columns|The text for the Grid Column Chooser and Column Chooser toolbar tool"
             columns="Columns"
 
             i18n-lock="kendo.grid.lock|The text shown in the column menu for the lock item"
@@ -3670,7 +3670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <kendo-pager-info *ngIf="normalizedPageableSettings.info">
             </kendo-pager-info>
         </ng-template>
-        <div kendoDialogContainer></div>
+        <div #dialogContainer></div>
         
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `,
@@ -3680,7 +3680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         TableDirective, GridTableDirective, ColGroupComponent, HeaderComponent, ResizableContainerDirective,
                         ListComponent, DragTargetContainerDirective, DropTargetContainerDirective, DraggableDirective,
                         GridMarqueeDirective, FooterComponent, TableBodyComponent, LoadingComponent, StatusBarComponent,
-                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet, DialogContainerDirective
+                        IconWrapperComponent, WatermarkOverlayComponent, ...KENDO_PAGER, NgTemplateOutlet
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }, { type: i23.SizingOptionsService }, { type: i24.RowReorderService }]; }, propDecorators: { data: [{
@@ -3868,10 +3868,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [ColumnMenuTemplateDirective]
             }], lockedHeader: [{
                 type: ViewChild,
-                args: ['lockedHeader', { static: false }]
+                args: ['lockedHeader']
             }], header: [{
                 type: ViewChild,
-                args: ['header', { static: false }]
+                args: ['header']
             }], footer: [{
                 type: ViewChildren,
                 args: ['footer']
@@ -3884,6 +3884,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], dropTargetContainer: [{
                 type: ViewChild,
                 args: [DropTargetContainerDirective]
+            }], dialogContainer: [{
+                type: ViewChild,
+                args: ['dialogContainer', { read: ViewContainerRef }]
             }], isDetailExpanded: [{
                 type: Input
             }], isGroupExpanded: [{