@progress/kendo-angular-grid 20.0.4-develop.2 → 20.1.0-develop.10

package/esm2022/column-menu/column-menu-chooser.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, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { columnsIcon } from '@progress/kendo-svg-icons';
@@ -10,6 +10,7 @@ import { ContextService } from '../common/provider.service';
 import { ColumnListComponent } from './column-list.component';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 import { ColumnMenuItemComponent } from './column-menu-item.component';
+import { ColumnChooserContentComponent } from './column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 import * as i2 from "../common/column-info.service";
@@ -40,7 +41,6 @@ import * as i2 from "../common/column-info.service";
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     ctx;
     columnInfoService;
-    changeDetector;
     hostElement;
     /**
      * Fires when the content expands.
@@ -67,23 +67,12 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         return this.columnInfoService.leafNamedColumns;
     }
     columnsIcon = columnsIcon;
-    constructor(ctx, columnInfoService, changeDetector, hostElement) {
+    constructor(ctx, columnInfoService, hostElement) {
         super();
         this.ctx = ctx;
         this.columnInfoService = columnInfoService;
-        this.changeDetector = changeDetector;
         this.hostElement = hostElement;
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close();
-        if (changed.length) {
-            this.changeDetector.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -101,7 +90,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.expanded = true;
         this.expand.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.ContextService }, { token: i2.ColumnInfoService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuChooserComponent, isStandalone: true, selector: "kendo-grid-columnmenu-chooser", inputs: { expanded: "expanded", isLast: "isLast" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
         <kendo-grid-columnmenu-item
             [text]="ctx.localization.get('columns')"
@@ -111,22 +100,18 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
             (collapse)="onCollapse()"
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
-                <kendo-grid-columnlist
-                    [applyText]="ctx.localization.get('columnsApply')"
-                    [resetText]="ctx.localization.get('columnsReset')"
-                    [ariaLabel]="ctx.localization.get('columns')"
+                <kendo-grid-column-chooser-content
                     [columns]="columns"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    [actionsClass]="actionsClass"
                     [isLast]="isLast"
                     [isExpanded]="expanded"
+                    [closeOnReset]="false"
                     [service]="service"
-                    (apply)="onApply($event)">
-                </kendo-grid-columnlist>
+                    (close)="close()"
+                >
+                </kendo-grid-column-chooser-content>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
@@ -141,26 +126,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             (collapse)="onCollapse()"
             (expand)="onExpand()">
             <ng-template kendoGridColumnMenuItemContentTemplate>
-                <kendo-grid-columnlist
-                    [applyText]="ctx.localization.get('columnsApply')"
-                    [resetText]="ctx.localization.get('columnsReset')"
-                    [ariaLabel]="ctx.localization.get('columns')"
+                <kendo-grid-column-chooser-content
                     [columns]="columns"
-                    [autoSync]="false"
-                    [allowHideAll]="false"
-                    [actionsClass]="actionsClass"
                     [isLast]="isLast"
                     [isExpanded]="expanded"
+                    [closeOnReset]="false"
                     [service]="service"
-                    (apply)="onApply($event)">
-                </kendo-grid-columnlist>
+                    (close)="close()"
+                >
+                </kendo-grid-column-chooser-content>
             </ng-template>
         </kendo-grid-columnmenu-item>
     `,
                     standalone: true,
-                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent]
+                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent, ColumnChooserContentComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i0.ElementRef }]; }, propDecorators: { expand: [{
                 type: Output
             }], collapse: [{
                 type: Output

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

@@ -6,6 +6,7 @@ import { ColumnMenuItemDirective } from './column-menu-item.directive';
 import { Component, ContentChildren, Inject, NgZone, QueryList } from '@angular/core';
 import { take } from 'rxjs/operators';
 import { ColumnMenuService } from './column-menu.service';
+import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import * as i0 from "@angular/core";
 import * as i1 from "./column-menu.service";
 /**
@@ -33,7 +34,15 @@ export class ColumnMenuContainerComponent {
         else {
             return;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.service.menuTabbingService.firstFocusable?.focus());
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            const firstFocusable = this.service.menuTabbingService.firstFocusable;
+            if (firstFocusable instanceof DropDownListComponent) {
+                firstFocusable.wrapper.nativeElement.focus({ preventScroll: true });
+            }
+            else {
+                firstFocusable?.focus({ preventScroll: true });
+            }
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuContainerComponent, deps: [{ token: i1.ColumnMenuService }, { token: NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuContainerComponent, isStandalone: true, selector: "kendo-grid-columnmenu-container", queries: [{ propertyName: "columnMenuItems", predicate: ColumnMenuItemDirective, descendants: true }], ngImport: i0, template: `

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

@@ -31,6 +31,7 @@ import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { AdaptiveGridService } from '../common/adaptiveness.service';
 import { replaceMessagePlaceholder } from '@progress/kendo-angular-common';
+import { ColumnChooserContentComponent } from './column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./../navigation/navigation.service";
 import * as i2 from "../common/single-popup.service";
@@ -199,16 +200,6 @@ export class ColumnMenuComponent {
     get hasColumnChooser() {
         return hasColumnChooser(this.settings);
     }
-    /**
-     * @hidden
-     */
-    onApply(changed) {
-        this.close(true);
-        if (changed.length) {
-            this.cdr.markForCheck();
-            this.columnInfoService.changeVisibility(changed);
-        }
-    }
     /**
      * @hidden
      */
@@ -362,7 +353,13 @@ export class ColumnMenuComponent {
         ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'false');
     }
     focusRoot() {
-        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+        if (this.isNavigable) {
+            this.navigationService.preventScroll = true;
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus({ preventScroll: true });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.ColumnMenuService }, { token: i4.ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.ColumnInfoService }, { token: i6.IdService, optional: true }, { token: i7.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuComponent, isStandalone: true, selector: "kendo-grid-column-menu", inputs: { standalone: "standalone", column: "column", settings: "settings", sort: "sort", filter: "filter", sortable: "sortable", columnMenuTemplate: "columnMenuTemplate", tabIndex: "tabIndex" }, host: { properties: { "class.k-grid-column-menu-standalone": "this.standalone" } }, providers: [
@@ -522,22 +519,18 @@ export class ColumnMenuComponent {
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>
-                        <kendo-grid-columnlist
-                            [applyText]="ctx.localization.get('columnsApply')"
-                            [resetText]="ctx.localization.get('columnsReset')"
+                        <kendo-grid-column-chooser-content
                             [columns]="columns"
-                            [autoSync]="false"
-                            [allowHideAll]="false"
-                            [actionsClass]="actionsClass"
                             [service]="service"
-                            (apply)="onApply($event)">
-                        </kendo-grid-columnlist>
+                            (close)="close()"
+                            >
+                        </kendo-grid-column-chooser-content>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
         </ng-template>
 
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
@@ -701,16 +694,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         </kendo-icon-wrapper>
                     </ng-template>
                     <ng-template kendoTabContent>
-                        <kendo-grid-columnlist
-                            [applyText]="ctx.localization.get('columnsApply')"
-                            [resetText]="ctx.localization.get('columnsReset')"
+                        <kendo-grid-column-chooser-content
                             [columns]="columns"
-                            [autoSync]="false"
-                            [allowHideAll]="false"
-                            [actionsClass]="actionsClass"
                             [service]="service"
-                            (apply)="onApply($event)">
-                        </kendo-grid-columnlist>
+                            (close)="close()"
+                            >
+                        </kendo-grid-column-chooser-content>
                     </ng-template>
                 </kendo-tabstrip-tab>
             </kendo-tabstrip>
@@ -723,7 +712,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ColumnMenuSortComponent, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuStickComponent,
                         ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuAutoSizeColumnComponent,
                         ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuFilterComponent, TabStripComponent,
-                        TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent
+                        TabStripTabComponent, TabTitleDirective, TabContentDirective, FilterMenuContainerComponent, ColumnListComponent,
+                        ColumnChooserContentComponent
                     ]
                 }]
         }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.ColumnMenuService }, { type: i4.ContextService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.ColumnInfoService }, { type: i6.IdService, decorators: [{

package/esm2022/columns/column-base.mjs

@@ -44,6 +44,14 @@ export class ColumnBase {
      * @hidden
      */
     initialMinResizableWidth;
+    /**
+     * @hidden
+     */
+    initiallyChecked;
+    /**
+     * @hidden
+     */
+    currentlyChecked;
     /**
      * @hidden
      */

package/esm2022/columns/command-column.component.mjs

@@ -11,7 +11,7 @@ import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
 /**
  * Represents the command columns of the Grid. Define the content of the column inside an `<ng-template>` tag.
- * For more information and examples, see the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
+ * For more information and examples, see the [Editing Action Buttons](slug:basics_editing_grid#editing-action-buttons) article.
  *
  * @example
  * ```html

package/esm2022/columns/span-column.component.mjs

@@ -75,7 +75,7 @@ export class SpanColumnComponent extends ColumnBase {
     includeInChooser = false;
     /**
      * Sets whether the edit template of the column is rendered.
-     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
+     * To enable editing for a spanned column, set an edit template for it ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
      * @default false
      */
     set editable(value) {

package/esm2022/common/column-info.service.mjs

@@ -38,6 +38,9 @@ export class ColumnInfoService {
         return this.list().filter(column => !column.isVisible);
     }
     get leafNamedColumns() {
+        if (!this.list) {
+            return [];
+        }
         const columns = expandColumns(this.list().filterSort(column => !column.isColumnGroup))
             .filter(column => column.matchesMedia && column.displayTitle);
         return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);

package/esm2022/directives.mjs

@@ -71,7 +71,6 @@ import { NumericFilterCellComponent } from "./filtering/cell/numeric-filter-cell
 import { StringFilterCellComponent } from "./filtering/cell/string-filter-cell.component";
 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 "./rendering/toolbar/tools/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
@@ -300,7 +299,6 @@ export const KENDO_GRID_FILTER_ROW = [
  * Utility array that contains the former ColumnMenu module declarations
  */
 export const KENDO_GRID_COLUMN_MENU_DECLARATIONS = [
-    ColumnMenuChooserItemCheckedDirective,
     ColumnListComponent,
     ColumnChooserComponent,
     ColumnChooserToolbarDirective,

package/esm2022/editing/cancel-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `cancel` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  *
  * When a button with this directive is clicked, the
  * [`cancel`]({% slug api_grid_gridcomponent %}#toc-cancel) event

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

@@ -5,7 +5,7 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
+ * Lets you customize the content of edited cells by providing a column edit-cell template for the Grid ([see example](slug:custom_editors_grid#setting-up-custom-editors)).
  * Place an `<ng-template>` tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag to define the template.
  *
  * The template context includes:

package/esm2022/editing/remove-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `remove` command of the Grid. Apply this directive to any `button` element
  * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`remove`]({% slug api_grid_gridcomponent %}#toc-remove) event fires.
  * The button with `kendoGridRemoveCommand` is automatically hidden when the row is in edit mode.

package/esm2022/editing/save-command.directive.mjs

@@ -15,7 +15,7 @@ import * as i2 from "../common/provider.service";
 /**
  * Represents the `save` command of the Grid. Apply this directive to any `button`
  * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
- * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
+ * ([see example](slug:basics_editing_grid#editing-action-buttons)).
  * When you click the button with this directive, the
  * [`save`]({% slug api_grid_gridcomponent %}#toc-save) event fires.
  * The button with `kendoGridSaveCommand` is automatically hidden when the row is not in edit mode.

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

@@ -16,7 +16,7 @@ import * as i2 from "../editing/local-data-changes.service";
 import * as i3 from "../common/adaptiveness.service";
 /**
  * Represents the Kendo UI Grid external editing directive. The directive manages editing operations in the Grid when using the
- * External Form ([see example](slug:editing_directives_grid#external-editing)).
+ * External Form ([see example](slug:external_editing_grid#quick-setup)).
  *
  * @example
  * ```typescript

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

@@ -12,7 +12,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
+ * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example](slug:editing_incell_grid#quick-setup)).
  *
  * @example
  * ```html

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

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:inline_editing_grid#using-reactive-forms)).
  *
  * @example
  * ```html

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

@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
- * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
+ * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example](slug:inline_editing_grid#using-template-driven-forms)).
  *
  * @example
  * ```html

package/esm2022/filtering/menu/filter-menu-input-wrapper.component.mjs

@@ -45,11 +45,11 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
             this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
             if (this.ctx.grid?.isActionSheetExpanded) {
                 this.subs.add(this.adaptiveGridService.animationEnd.subscribe(() => {
-                    this.firstOperatorDropDown.focus();
+                    this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
                 }));
             }
             else {
-                this.firstOperatorDropDown.focus();
+                this.firstOperatorDropDown.wrapper.nativeElement.focus({ preventScroll: true });
             }
         }
     }

package/esm2022/filtering/menu/filter-menu.component.mjs

@@ -139,7 +139,13 @@ export class FilterMenuComponent {
         this.cdr.markForCheck();
     }
     focusRoot() {
-        this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
+        if (this.isNavigable) {
+            this.navigationService.preventScroll = true;
+            this.navigationService.focusCell(0, this.column.leafIndex);
+        }
+        else {
+            this.anchor.nativeElement.focus({ preventScroll: true });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.AdaptiveGridService }, { token: i0.NgZone }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `

package/esm2022/grid.component.mjs

@@ -2867,6 +2867,9 @@ export class GridComponent {
 
             i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
             aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
+
+            i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
+            columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -3724,6 +3727,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-aiAssistantOutputCardBodyContent="kendo.grid.aiAssistantOutputCardBodyContent|The success message dispayed in the AI Assistant Prompt Output Card's body"
             aiAssistantOutputCardBodyContent="Operation is successful. Data is:"
+
+            i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
+            columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar