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

package/adaptiveness/adaptive-renderer.component.d.ts

@@ -9,7 +9,6 @@ import { FilterMenuContainerComponent } from '../filtering/menu/filter-menu-cont
 import { SVGIcon } from '@progress/kendo-svg-icons';
 import { FilterService } from '../filtering/filter.service';
 import { ColumnMenuService } from '../column-menu/column-menu.service';
-import { ColumnListComponent } from '../column-menu/column-list.component';
 import { ContextService } from '../common/provider.service';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { SortService } from '../common/sort.service';
@@ -18,6 +17,7 @@ import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnBase } from '../columns/column-base';
 import { SortDescriptor } from '@progress/kendo-data-query';
 import { GroupToolbarToolComponent } from '../rendering/toolbar/tools/group-toolbar-tool.component';
+import { ColumnChooserContentComponent } from '../column-menu/column-chooser-content.component';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -39,7 +39,6 @@ export declare class AdaptiveRendererComponent {
     cancelIcon: SVGIcon;
     saveIcon: SVGIcon;
     columns: Array<ColumnBase>;
-    actionsClass: string;
     externalEditingSettings: any;
     get hasSort(): boolean;
     get hasColumnChooser(): boolean;
@@ -58,7 +57,7 @@ export declare class AdaptiveRendererComponent {
     get filterLabel(): string;
     get hasXCloseIcon(): boolean;
     get hasCheckCloseIcon(): boolean;
-    columnList: ColumnListComponent;
+    columnChooserContent: ColumnChooserContentComponent;
     filterToolbarToolTemplate: ViewContainerRef;
     filterMenuContainer: FilterMenuContainerComponent;
     actionSheet: ActionSheetComponent;

package/column-menu/column-chooser-content.component.d.ts

@@ -0,0 +1,60 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit, ChangeDetectorRef, EventEmitter, ElementRef } from '@angular/core';
+import { ColumnInfoService } from '../common/column-info.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { ColumnListComponent } from './column-list.component';
+import { TextBoxComponent } from '@progress/kendo-angular-inputs';
+import { ColumnMenuService } from './column-menu.service';
+import { ContextService } from '../common/provider.service';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export declare class ColumnChooserContentComponent implements OnInit {
+    cdr: ChangeDetectorRef;
+    columnInfoService: ColumnInfoService;
+    ctx: ContextService;
+    resetButton: ElementRef;
+    private applyButton;
+    columnList: ColumnListComponent;
+    filterInput: TextBoxComponent;
+    filterable: boolean;
+    showSelectAll: boolean;
+    showCheckedCount: boolean;
+    allowHideAll: boolean;
+    autoSync: boolean;
+    actionsClass: string;
+    closeOnReset: boolean;
+    set columns(value: any[]);
+    get columns(): any[];
+    isLast: boolean;
+    isExpanded: boolean;
+    service: ColumnMenuService;
+    close: EventEmitter<undefined>;
+    get selectedItemsText(): string;
+    get actionSheetOpened(): boolean;
+    searchIcon: SVGIcon;
+    checkIcon: SVGIcon;
+    arrowRotateCcwIcon: SVGIcon;
+    applyText: string;
+    resetText: string;
+    filteredColumns: any[];
+    isFiltered: boolean;
+    private _columns;
+    constructor(cdr: ChangeDetectorRef, columnInfoService: ColumnInfoService, ctx: ContextService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
+    onFilter(value: string): void;
+    messageFor: (token: string) => string;
+    onChange(changed: any[]): void;
+    applyChanges(): void;
+    cancelChanges(): void;
+    onTab(e: KeyboardEvent): void;
+    onApplyButtonKeydown(e: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChooserContentComponent, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnChooserContentComponent, "kendo-grid-column-chooser-content", never, { "filterable": { "alias": "filterable"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "showCheckedCount": { "alias": "showCheckedCount"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; "autoSync": { "alias": "autoSync"; "required": false; }; "actionsClass": { "alias": "actionsClass"; "required": false; }; "closeOnReset": { "alias": "closeOnReset"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; }, { "close": "close"; }, never, never, true, never>;
+}

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

@@ -37,6 +37,18 @@ export declare class ColumnChooserComponent implements OnDestroy {
      * @default false
      */
     autoSync: boolean;
+    /**
+     * Specifies if the column chooser displays a search box.
+     *
+     * @default true
+     */
+    filterable: boolean;
+    /**
+     * Specifies if the column chooser displays a select all checkbox.
+     *
+     * @default true
+     */
+    showSelectAll: boolean;
     /**
      * Specifies if all columns can be hidden.
      *
@@ -64,13 +76,12 @@ export declare class ColumnChooserComponent implements OnDestroy {
     /**
      * @hidden
      */
-    onApply(changed: any[]): void;
+    onChange(changed: any[]): void;
     /**
      * @hidden
      */
-    onChange(changed: any[]): void;
-    private close;
+    close(focusAnchor?: boolean): void;
     private detachClose;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChooserComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnChooserComponent, "kendo-grid-column-chooser", never, { "autoSync": { "alias": "autoSync"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnChooserComponent, "kendo-grid-column-chooser", never, { "autoSync": { "alias": "autoSync"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; }, {}, never, never, true, never>;
 }

package/column-menu/column-list-kb-nav.service.d.ts

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Renderer2 } from '@angular/core';
-import { ColumnMenuChooserItemCheckedDirective } from './column-chooser-item-checked.directive';
+import { CheckBoxComponent } from '@progress/kendo-angular-inputs';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export declare class ColumnListKeyboardNavigation {
     private renderer;
-    items: ColumnMenuChooserItemCheckedDirective[];
+    items: CheckBoxComponent[];
     activeIndex: number;
     constructor(renderer: Renderer2);
     next(): void;

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

@@ -2,11 +2,13 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, NgZone, Renderer2, EventEmitter, OnInit, OnDestroy, SimpleChanges } from '@angular/core';
+import { ElementRef, NgZone, Renderer2, EventEmitter, OnInit, OnDestroy, SimpleChanges, QueryList, ChangeDetectorRef } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnListKeyboardNavigation } from './column-list-kb-nav.service';
+import { CheckBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { ContextService } from '../common/provider.service';
 import { AdaptiveGridService } from '../common/adaptiveness.service';
+import { ColumnInfoService } from '../common/column-info.service';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -15,11 +17,11 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private element;
     private ngZone;
     private renderer;
-    private listNavigationService;
+    listNavigationService: ColumnListKeyboardNavigation;
+    private cdr;
+    columnInfoService: ColumnInfoService;
     private adaptiveGridService;
     private ctx;
-    checkIcon: import("@progress/kendo-svg-icons").SVGIcon;
-    arrowRotateCcwIcon: import("@progress/kendo-svg-icons").SVGIcon;
     className: boolean;
     get listSizeMd(): boolean;
     get listSizeLg(): boolean;
@@ -28,42 +30,49 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     columnChange: EventEmitter<any>;
     set columns(value: any[]);
     get columns(): any[];
-    showActions: boolean;
+    get checkedCheckboxesLength(): number;
+    filteredColumns: any[];
     autoSync: boolean;
+    showSelectAll: boolean;
+    isFiltered: boolean;
     ariaLabel: string;
     allowHideAll: boolean;
     applyText: string;
     resetText: string;
-    actionsClass: string;
     isLast: boolean;
     isExpanded: boolean;
     service: ColumnMenuService;
+    filterable: boolean;
+    checkboxes: QueryList<CheckBoxComponent>;
+    get columnCheckboxes(): CheckBoxComponent[];
+    get lockedColumnCheckboxes(): CheckBoxComponent[];
+    get unlockedColumnCheckboxes(): CheckBoxComponent[];
+    get checkedCheckboxes(): number;
     resetButton: ElementRef;
-    private applyButton;
-    private options;
-    private checkboxes;
-    private hasLocked;
-    private hasVisibleLocked;
-    private unlockedCount;
-    private hasUnlockedFiltered;
-    private hasFiltered;
+    applyButton: ElementRef;
+    filterInput: TextBoxComponent;
     private _columns;
-    private allColumns;
     private domSubscriptions;
-    constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, listNavigationService: ColumnListKeyboardNavigation, adaptiveGridService: AdaptiveGridService, ctx: ContextService);
+    private lastDisabledCheckbox;
+    constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, listNavigationService: ColumnListKeyboardNavigation, cdr: ChangeDetectorRef, columnInfoService: ColumnInfoService, adaptiveGridService: AdaptiveGridService, ctx: ContextService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    onSelectAllClick(e: any): void;
+    onSelectAllCheckboxChange(checkedState: any): void;
     ngOnDestroy(): void;
-    isDisabled(column: any): boolean;
     cancelChanges(): void;
     applyChanges(): void;
+    focusActiveColumn(e: Event): void;
     onTab(e: Event): void;
     onKeydown: (e: KeyboardEvent) => void;
     private updateDisabled;
-    private updateColumnState;
+    private disableFirstUnlockedCheckedCheckbox;
+    private enableLastDisabledColumn;
     private setDisabledState;
-    private handleCheckBoxClick;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnListComponent, "kendo-grid-columnlist", never, { "columns": { "alias": "columns"; "required": false; }; "showActions": { "alias": "showActions"; "required": false; }; "autoSync": { "alias": "autoSync"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; "applyText": { "alias": "applyText"; "required": false; }; "resetText": { "alias": "resetText"; "required": false; }; "actionsClass": { "alias": "actionsClass"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; }, { "reset": "reset"; "apply": "apply"; "columnChange": "columnChange"; }, never, never, true, never>;
+    checkBoxClick(e: any): void;
+    onCheckboxChange(checkedState: any, column: any, _index: number): void;
+    private setTabindex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnListComponent, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnListComponent, "kendo-grid-columnlist", never, { "columns": { "alias": "columns"; "required": false; }; "filteredColumns": { "alias": "filteredColumns"; "required": false; }; "autoSync": { "alias": "autoSync"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "isFiltered": { "alias": "isFiltered"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "allowHideAll": { "alias": "allowHideAll"; "required": false; }; "applyText": { "alias": "applyText"; "required": false; }; "resetText": { "alias": "resetText"; "required": false; }; "isLast": { "alias": "isLast"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "service": { "alias": "service"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; }, { "reset": "reset"; "apply": "apply"; "columnChange": "columnChange"; }, never, never, true, never>;
 }

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

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { EventEmitter, ElementRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { SVGIcon } from '@progress/kendo-svg-icons';
@@ -35,7 +35,6 @@ import * as i0 from "@angular/core";
 export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     ctx: ContextService;
     private columnInfoService;
-    private changeDetector;
     private hostElement;
     /**
      * Fires when the content expands.
@@ -60,11 +59,7 @@ export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     actionsClass: string;
     get columns(): any;
     columnsIcon: SVGIcon;
-    constructor(ctx: ContextService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
-    /**
-     * @hidden
-     */
-    onApply(changed: any[]): void;
+    constructor(ctx: ContextService, columnInfoService: ColumnInfoService, hostElement: ElementRef);
     /**
      * @hidden
      */

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

@@ -142,10 +142,6 @@ export declare class ColumnMenuComponent implements AfterViewInit, OnChanges, On
      * @hidden
      */
     get hasColumnChooser(): boolean;
-    /**
-     * @hidden
-     */
-    onApply(changed: any[]): void;
     /**
      * @hidden
      */

package/columns/column-base.d.ts

@@ -40,6 +40,14 @@ export declare class ColumnBase implements AfterViewInit {
      * @hidden
      */
     initialMinResizableWidth: number;
+    /**
+     * @hidden
+     */
+    initiallyChecked: boolean;
+    /**
+     * @hidden
+     */
+    currentlyChecked: boolean;
     /**
      * @hidden
      */

package/directives.d.ts

@@ -66,7 +66,6 @@ import { FilterCellComponent } from "./filtering/cell/filter-cell.component";
 import { NumericFilterCellComponent } from "./filtering/cell/numeric-filter-cell.component";
 import { StringFilterCellComponent } from "./filtering/cell/string-filter-cell.component";
 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 "./rendering/toolbar/tools/column-chooser-tool.directive";
 import { ColumnListComponent } from "./column-menu/column-list.component";
@@ -211,7 +210,7 @@ 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 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];
+export declare const KENDO_GRID_COLUMN_MENU_DECLARATIONS: readonly [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
  *

package/esm2022/adaptiveness/adaptive-renderer.component.mjs

@@ -24,7 +24,6 @@ import { ColumnMenuItemComponent } from '../column-menu/column-menu-item.compone
 import { ColumnMenuItemDirective } from '../column-menu/column-menu-item.directive';
 import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from '../column-menu/utils';
 import { ColumnMenuService } from '../column-menu/column-menu.service';
-import { ColumnListComponent } from '../column-menu/column-list.component';
 import { ContextService } from '../common/provider.service';
 import { AdaptiveService } from '@progress/kendo-angular-utils';
 import { SortService } from '../common/sort.service';
@@ -34,6 +33,7 @@ import { directions } from '../rendering/toolbar/tools/sort-toolbar-tool.compone
 import { EventsOutsideAngularDirective, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
 import { FormComponent } from '../editing/form';
 import { GroupToolbarToolComponent } from '../rendering/toolbar/tools/group-toolbar-tool.component';
+import { ColumnChooserContentComponent } from '../column-menu/column-chooser-content.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../column-menu/column-menu.service";
 import * as i2 from "../common/adaptiveness.service";
@@ -62,7 +62,6 @@ export class AdaptiveRendererComponent {
     cancelIcon = cancelIcon;
     saveIcon = saveIcon;
     columns;
-    actionsClass = 'k-actions';
     externalEditingSettings;
     get hasSort() {
         return hasSort(this.ctx.grid.columnMenu, this.adaptiveGridService.column);
@@ -160,7 +159,7 @@ export class AdaptiveRendererComponent {
     get hasCheckCloseIcon() {
         return this.adaptiveGridService.viewType === 'sortToolbarTool' || this.adaptiveGridService.viewType === 'groupToolbarTool';
     }
-    columnList;
+    columnChooserContent;
     filterToolbarToolTemplate;
     filterMenuContainer;
     actionSheet;
@@ -224,7 +223,7 @@ export class AdaptiveRendererComponent {
         this.actionSheet.nextView();
     }
     applyChanges() {
-        this.columnList.applyChanges();
+        this.columnChooserContent.applyChanges();
         this.actionSheet.toggle(false);
     }
     sortBy(column) {
@@ -276,10 +275,11 @@ export class AdaptiveRendererComponent {
         this.adaptiveGridService.notifyAnimationEnd();
     }
     cancelChanges() {
-        this.columnList.cancelChanges();
+        this.columnChooserContent.cancelChanges();
+        this.columnChooserContent.cdr.detectChanges();
     }
     onTab(event) {
-        this.columnList.onTab(event);
+        this.columnChooserContent.onTab(event);
     }
     saveEditing() {
         const { event, formGroup, externalEditingDirective } = this.externalEditingSettings;
@@ -287,7 +287,7 @@ export class AdaptiveRendererComponent {
         this.actionSheet.toggle(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.ColumnMenuService }, { token: i2.AdaptiveGridService }, { token: i3.FilterService }, { token: i4.ContextService }, { token: i5.AdaptiveService }, { token: i6.SortService }, { token: i7.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnList", first: true, predicate: ["columnList"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnChooserContent", first: true, predicate: ["columnChooserContent"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             [cssClass]="{
                 'k-adaptive-actionsheet': true,
@@ -347,19 +347,14 @@ export class AdaptiveRendererComponent {
                     </ng-container>
                 </ng-template>
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
+                    <kendo-grid-column-chooser-content
+                        #columnChooserContent
+                        [columns]="columns"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                 </ng-template>
                 <ng-template kendoActionSheetFooterTemplate>
                     <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
@@ -501,20 +496,15 @@ export class AdaptiveRendererComponent {
                 </ng-template>
 
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
+                    <kendo-grid-column-chooser-content
                         *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnList
+                        #columnChooserContent
                         [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                     <kendo-grid-filter-menu-container
                         *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
                         [column]="adaptiveGridService.column"
@@ -713,7 +703,7 @@ export class AdaptiveRendererComponent {
                 {{messageFor('filterFilterButton')}}
             </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { 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"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { 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: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "showActions", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { 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"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { 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: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { 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: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -779,19 +769,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
                 </ng-template>
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
-                        #columnList
-                        [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
+                    <kendo-grid-column-chooser-content
+                        #columnChooserContent
+                        [columns]="columns"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                 </ng-template>
                 <ng-template kendoActionSheetFooterTemplate>
                     <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
@@ -933,20 +918,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </ng-template>
 
                 <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-columnlist
+                    <kendo-grid-column-chooser-content
                         *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnList
+                        #columnChooserContent
                         [columns]="adaptiveGridService.columns"
-                        [ariaLabel]="messageFor('columns')"
                         [isLast]="true"
-                        [showActions]="false"
-                        [applyText]="messageFor('columnsApply')"
-                        [resetText]="messageFor('columnsReset')"
                         [autoSync]="false"
-                        [actionsClass]="actionsClass"
                         [allowHideAll]="false"
                         >
-                    </kendo-grid-columnlist>
+                    </kendo-grid-column-chooser-content>
                     <kendo-grid-filter-menu-container
                         *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
                         [column]="adaptiveGridService.column"
@@ -1171,16 +1151,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ColumnMenuAutoSizeAllColumnsComponent,
                         ColumnMenuItemComponent,
                         ColumnMenuItemDirective,
-                        ColumnListComponent,
                         FilterMenuContainerComponent,
                         ColumnMenuLockComponent,
                         EventsOutsideAngularDirective,
-                        FormComponent
+                        FormComponent,
+                        ColumnChooserContentComponent
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }]; }, propDecorators: { columnList: [{
+        }], ctorParameters: function () { return [{ type: i1.ColumnMenuService }, { type: i2.AdaptiveGridService }, { type: i3.FilterService }, { type: i4.ContextService }, { type: i5.AdaptiveService }, { type: i6.SortService }, { type: i7.ColumnInfoService }]; }, propDecorators: { columnChooserContent: [{
                 type: ViewChild,
-                args: ['columnList', { static: false }]
+                args: ['columnChooserContent', { static: false }]
             }], filterToolbarToolTemplate: [{
                 type: ViewChild,
                 args: ['filterToolbarToolTemplate', { read: ViewContainerRef, static: false }]