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

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

@@ -6,7 +6,7 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ElementRef, ViewContainerRef, ViewEncapsulation, inject, Injector, NgModule } from '@angular/core';
 import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, hasClasses as hasClasses$1, isPresent as isPresent$1, normalizeNumpadKeys, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, replaceMessagePlaceholder, isChanged as isChanged$1, KendoInput, guid, areObjectsEqual, PrefixTemplateDirective, closest as closest$1, hasObservers, ResizeSensorComponent, isFirefox, firefoxMaxHeight, closestInScope as closestInScope$1, isFocusable as isFocusable$1, PreventableEvent as PreventableEvent$1, getLicenseMessage, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
 import * as i1$1 from '@progress/kendo-angular-icons';
 import { IconWrapperComponent, IconsService, KENDO_ICONS } from '@progress/kendo-angular-icons';
@@ -32,7 +32,7 @@ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, FormControl, FormG
 import * as i2$1 from '@progress/kendo-angular-utils';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import * as i4 from '@progress/kendo-angular-inputs';
-import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, RadioButtonComponent, CheckBoxComponent, TextBoxPrefixTemplateDirective, KENDO_FORMFIELD, KENDO_TEXTBOX, KENDO_NUMERICTEXTBOX, KENDO_CHECKBOX } from '@progress/kendo-angular-inputs';
 import * as i5 from '@progress/kendo-angular-dateinputs';
 import { DatePickerComponent, DatePickerCustomMessagesComponent, KENDO_DATEPICKER, CalendarDOMService, CenturyViewService, DecadeViewService, MonthViewService, YearViewService, NavigationService as NavigationService$1 } from '@progress/kendo-angular-dateinputs';
 import * as i54 from '@progress/kendo-angular-toolbar';
@@ -1933,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * 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:
@@ -2869,6 +2869,12 @@ class ColumnComponent extends ColumnBase {
      * @default 'text'
      */
     filter = 'text';
+    /**
+     * Specifies the filter type for the filter menu UI.
+     *
+     * @default 'default'
+     */
+    filterVariant = 'default';
     /**
      * Shows or hides the filter UI for this column. [See example](slug:filtering_grid).
      *
@@ -2916,7 +2922,7 @@ class ColumnComponent extends ColumnBase {
         return this.title === undefined ? this.field : this.title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterVariant: "filterVariant", filterable: "filterable", editable: "editable" }, providers: [
             {
                 provide: ColumnBase,
                 useExisting: forwardRef(() => ColumnComponent)
@@ -2956,6 +2962,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], filter: [{
                 type: Input
+            }], filterVariant: [{
+                type: Input
             }], filterable: [{
                 type: Input
             }], editable: [{
@@ -3045,7 +3053,7 @@ 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) {
@@ -3507,6 +3515,7 @@ class NavigationService {
             return columnIndexInsideGroup !== columnGroupChildren.length - 1;
         }
     }
+    preventScroll = false;
     viewport;
     columnViewport;
     activeRowIndex = 0;
@@ -5264,8 +5273,14 @@ class LogicalCellDirective {
                 this.focusGroup.focus();
             }
             else {
-                if (!this.logicalSlaveCell && this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
-                    this.microtask(() => this.isFocused() && el.focus());
+                if (!this.logicalSlaveCell &&
+                    this.navigationService.autoFocusCell(this.logicalColIndex, this.logicalColIndex + this.colSpan - 1)) {
+                    this.microtask(() => {
+                        if (this.isFocused()) {
+                            el.focus({ preventScroll: this.navigationService.preventScroll });
+                            this.navigationService.preventScroll = false;
+                        }
+                    });
                 }
                 this.renderer.addClass(el, 'k-focus');
             }
@@ -5478,7 +5493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-owns']
             }] } });
 
-const FORMAT_REGEX = /\{\d+:?/;
+const FORMAT_REGEX$1 = /\{\d+:?/;
 /**
  * @hidden
  */
@@ -5499,7 +5514,7 @@ class FieldAccessorPipe {
     }
     formatValue(format, value) {
         const intl = this.intlService;
-        if (isString(format) && format.match(FORMAT_REGEX)) {
+        if (isString(format) && FORMAT_REGEX$1.exec(format)) {
             return intl.format(format, value);
         }
         return intl.toString(value, format);
@@ -8964,11 +8979,11 @@ 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 });
             }
         }
     }
@@ -10670,6 +10685,300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ */
+class LocalDataChangesService {
+    changes = new EventEmitter();
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, decorators: [{
+            type: Injectable
+        }] });
+
+const FORMAT_REGEX = /\{\d+:?/;
+/**
+ * @hidden
+ */
+class FormatPipe {
+    intlService;
+    constructor(intlService) {
+        this.intlService = intlService;
+    }
+    transform(value, format) {
+        const intl = this.intlService;
+        if (isString(format) && FORMAT_REGEX.exec(format)) {
+            return intl.format(format, value);
+        }
+        return intl.toString(value, format);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, deps: [{ token: i1$4.IntlService }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, isStandalone: true, name: "format", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/pipe-prefix
+                    name: 'format',
+                    pure: false,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.IntlService }]; } });
+
+const DEFAULT_SEARCH_DELAY = 500;
+/**
+ * @hidden
+ */
+class MultiCheckboxFilterComponent {
+    ctx;
+    dataChangesService;
+    column;
+    filterChange = new EventEmitter();
+    constructor(ctx, dataChangesService) {
+        this.ctx = ctx;
+        this.dataChangesService = dataChangesService;
+    }
+    listData;
+    searchIcon = searchIcon;
+    showSelectAll = true;
+    currentlySelected = new Set();
+    isSearched = false;
+    currentFilter;
+    typingTimeout;
+    ngOnInit() {
+        this.listData = [...new Set(this.gridData.map(i => i[this.column.field]))].sort((a, b) => { return a - b; });
+        this.currentlySelected = new Set(this.filteredGridData.map(i => i[this.column.field]));
+        this.currentFilter = this.ctx.grid?.filter;
+        if (this.currentFilter) {
+            this.filterChange.emit(this.currentFilter);
+        }
+    }
+    ngOnDestroy() {
+        if (this.typingTimeout) {
+            clearTimeout(this.typingTimeout);
+            this.typingTimeout = null;
+        }
+    }
+    isItemSelected(item) {
+        return this.currentlySelected.has(item);
+    }
+    onSearch(value) {
+        clearTimeout(this.typingTimeout);
+        this.typingTimeout = setTimeout(() => {
+            this.isSearched = value.length > 0;
+            this.showSelectAll = !this.isSearched;
+            const field = this.column?.field;
+            if (!field) {
+                this.listData = [];
+                return;
+            }
+            const base = [...new Set(this.gridData.map(i => i[field]))].sort((a, b) => { return a - b; });
+            if (!value) {
+                this.listData = base;
+                return;
+            }
+            this.listData = filterBy(base, { operator: 'contains', value });
+        }, DEFAULT_SEARCH_DELAY);
+    }
+    handleCheckBoxChange(checkedState, value, selectAllChecked) {
+        const field = this.column?.field;
+        if (!field) {
+            return;
+        }
+        if (!this.currentFilter) {
+            const existing = this.ctx.grid.filter;
+            this.currentFilter = existing ? { ...existing } : { logic: 'and', filters: [] };
+        }
+        const compositeIndex = this.currentFilter.filters.findIndex((f) => f && Array.isArray(f.filters) && f.filters.some((ff) => ff.field === field));
+        let fieldFilters = [];
+        if (compositeIndex !== -1) {
+            fieldFilters = [...this.currentFilter.filters[compositeIndex].filters];
+        }
+        const valueForItem = (item) => item?.[field];
+        if (selectAllChecked) {
+            if (checkedState) {
+                fieldFilters = [];
+                this.currentlySelected = new Set(this.gridData.map(i => i[this.column.field]));
+            }
+            else {
+                fieldFilters = this.gridData.map(item => ({
+                    field,
+                    operator: 'neq',
+                    value: valueForItem(item)
+                }));
+                this.currentlySelected.clear();
+            }
+        }
+        else {
+            const exists = fieldFilters.some(f => f.value === value);
+            if (checkedState) {
+                if (!exists) {
+                    fieldFilters.push({ field, operator: 'eq', value });
+                }
+                else {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                this.currentlySelected.add(value);
+            }
+            else {
+                if (exists) {
+                    fieldFilters = fieldFilters.filter(f => f.value !== value);
+                }
+                else {
+                    fieldFilters.push({ field, operator: 'neq', value });
+                }
+                this.currentlySelected.delete(value);
+            }
+        }
+        if (fieldFilters.length === 0) {
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters.splice(compositeIndex, 1);
+            }
+            else {
+                this.currentFilter.filters = fieldFilters;
+            }
+        }
+        else {
+            const compositeBlock = {
+                logic: 'and',
+                filters: fieldFilters
+            };
+            if (compositeIndex !== -1) {
+                this.currentFilter.filters[compositeIndex] = compositeBlock;
+            }
+            else {
+                this.currentFilter.filters.push(compositeBlock);
+            }
+        }
+        this.filterChange.emit(this.currentFilter);
+    }
+    get filteredGridData() {
+        return filterBy(this.gridData, this.ctx.grid?.filter);
+    }
+    get selectAllChecked() {
+        if (!this.listData) {
+            return;
+        }
+        if (this.currentlySelected.size === this.listData.length && this.currentlySelected.size > 0) {
+            return true;
+        }
+        else if (this.currentlySelected.size === 0) {
+            return false;
+        }
+        else {
+            return 'indeterminate';
+        }
+    }
+    get gridData() {
+        let data = [];
+        const isLocalData = isPresent$1(this.ctx?.dataBindingDirective);
+        if (isPresent$1(this.normalizedFilterVariant.data)) {
+            data = this.normalizedFilterVariant.data;
+        }
+        else if (isLocalData) {
+            data = this.dataChangesService.data;
+        }
+        else {
+            data = this.ctx.grid?.flatData;
+        }
+        return data || [];
+    }
+    get normalizedFilterVariant() {
+        const defaultMultiCheckboxSettings = { variant: 'multiCheckbox', search: true };
+        if (typeof this.column?.filterVariant === 'string') {
+            return {
+                variant: this.column.filterVariant,
+                search: true
+            };
+        }
+        return Object.assign(defaultMultiCheckboxSettings, this.column?.filterVariant);
+    }
+    get selectedItemsMessage() {
+        const localizationMsg = this.messageFor('multiCheckboxFilterSelectedItemsCount') || '';
+        return replaceMessagePlaceholder(localizationMsg, 'selectedItemsCount', this.currentlySelected.size.toString());
+    }
+    messageFor(key) {
+        return this.ctx.localization.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, deps: [{ token: ContextService }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultiCheckboxFilterComponent, isStandalone: true, selector: "kendo-grid-multicheckbox-filter", inputs: { column: "column" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "pipe", type: FormatPipe, name: "format" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultiCheckboxFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-multicheckbox-filter',
+                    template: `
+        <kendo-textbox *ngIf="normalizedFilterVariant.search"
+            class="k-searchbox"
+            [placeholder]="messageFor('multiCheckboxFilterSearchPlaceholder')"
+            (valueChange)="onSearch($event)">
+            <ng-template kendoTextBoxPrefixTemplate>
+                <kendo-icon-wrapper innerCssClass="k-input-icon" name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
+            </ng-template>
+        </kendo-textbox>
+        <ul class="k-reset k-multicheck-wrap">
+            <li class="k-item k-check-all-wrap" *ngIf="showSelectAll">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="selectAllChecked"
+                        (checkedStateChange)="handleCheckBoxChange($event, null, true)">
+                    </kendo-checkbox>
+                    <span>{{ messageFor('multiCheckboxFilterSelectAllLabel') }}</span>
+                </label>
+            </li>
+            <li class="k-item" *ngFor="let item of listData">
+                <label class="k-label k-checkbox-label" role="option">
+                    <kendo-checkbox
+                        [checkedState]="isItemSelected(item)"
+                        (checkedStateChange)="handleCheckBoxChange($event, item)">
+                    </kendo-checkbox>
+                    <span>{{ item | format: column.format }}</span>
+                </label>
+            </li>
+        </ul>
+        <div class="k-filter-selected-items">{{selectedItemsMessage}}</div>
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgIf, CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, FormatPipe]
+                }]
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }]; }, propDecorators: { column: [{
+                type: Input
+            }], filterChange: [{
+                type: Output
+            }] } });
+
 const isNoValueOperator = operator => (operator === "isnull"
     || operator === "isnotnull"
     || operator === "isempty"
@@ -10754,11 +11063,11 @@ class FilterMenuContainerComponent {
         return this._childFilter;
     }
     resetButton;
-    filterButton;
     _childFilter;
     subscription;
     _templateContext = {};
     _filter;
+    checkboxFilter;
     constructor(parentService, childService, ctx, cd, menuTabbingService, adaptiveGridService) {
         this.parentService = parentService;
         this.childService = childService;
@@ -10784,7 +11093,7 @@ class FilterMenuContainerComponent {
         this.menuTabbingService.lastFocusable = undefined;
     }
     get disabled() {
-        return !this.childFilter.filters.some(validFilters);
+        return this.isMultiFilter ? this.areFiltersEqual : !this.childFilter.filters.some(validFilters);
     }
     get templateContext() {
         this._templateContext.column = this.column;
@@ -10797,15 +11106,20 @@ class FilterMenuContainerComponent {
         return isPresent(this.column) && isPresent(this.column.filterMenuTemplateRef);
     }
     submit() {
-        const filter = trimFilters(this.childFilter);
-        if (filter.filters.length) {
-            const root = this.filter || {
-                filters: [],
-                logic: "and"
-            };
-            removeFilter(root, this.column.field);
-            root.filters.push(filter);
-            this.parentService.filter(root);
+        if (this.isMultiFilter) {
+            this.parentService.filter(this.checkboxFilter);
+        }
+        else {
+            const filter = trimFilters(this.childFilter);
+            if (filter.filters.length) {
+                const root = this.filter || {
+                    filters: [],
+                    logic: "and"
+                };
+                removeFilter(root, this.column.field);
+                root.filters.push(filter);
+                this.parentService.filter(root);
+            }
         }
         this.close.emit();
         return false;
@@ -10833,29 +11147,100 @@ class FilterMenuContainerComponent {
             }
         }
     }
+    onCheckboxFilterChange(filter) {
+        this.checkboxFilter = filter;
+    }
+    getButtonIcon(buttonType, iconType) {
+        if (!this.isMultiFilter) {
+            return;
+        }
+        const icons = {
+            filter: {
+                icon: 'filter',
+                svgIcon: filterIcon
+            },
+            reset: {
+                icon: 'filter-clear',
+                svgIcon: filterClearIcon
+            }
+        };
+        return icons[buttonType]?.[iconType];
+    }
     get clearText() {
         return this.ctx.localization.get("filterClearButton");
     }
     get filterText() {
         return this.ctx.localization.get("filterFilterButton");
     }
+    get isMultiFilter() {
+        if (!isPresent(this.column?.filterVariant)) {
+            return false;
+        }
+        const filterVariant = this.column?.filterVariant;
+        return isPresent(filterVariant) && (filterVariant === 'multiCheckbox' || typeof filterVariant === 'object' && filterVariant.variant === 'multiCheckbox');
+    }
+    get areFiltersEqual() {
+        const checkboxFilter = this.checkboxFilter;
+        const gridFilter = this.filter;
+        const isComposite = (f) => !!f && Array.isArray(f.filters);
+        // Treat undefined and "empty (no inner filters)" as equivalent
+        const isEmptyComposite = (f) => isComposite(f) && f.filters.length === 0;
+        if (!checkboxFilter && !gridFilter) {
+            return true;
+        }
+        if ((!checkboxFilter && isEmptyComposite(gridFilter)) || (!gridFilter && isEmptyComposite(checkboxFilter))) {
+            return true;
+        }
+        if (!checkboxFilter || !gridFilter) {
+            return false;
+        }
+        const eq = (x, y) => {
+            const xIsComp = isComposite(x);
+            const yIsComp = isComposite(y);
+            if (xIsComp !== yIsComp) {
+                return false;
+            }
+            if (xIsComp) {
+                const xLogic = x.logic || 'and';
+                const yLogic = y.logic || 'and';
+                if (xLogic !== yLogic) {
+                    return false;
+                }
+                if (x.filters.length !== y.filters.length) {
+                    return false;
+                }
+                for (let i = 0; i < x.filters.length; i++) {
+                    if (!eq(x.filters[i], y.filters[i])) {
+                        return false;
+                    }
+                }
+                return true;
+            }
+            return areObjectsEqual(x, y);
+        };
+        return eq(checkboxFilter, gridFilter);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: FilterService, skipSelf: true }, { token: FilterService }, { token: ContextService }, { token: i0.ChangeDetectorRef }, { token: MenuTabbingService }, { token: AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
             FilterService,
             MenuTabbingService
-        ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }, { propertyName: "filterButton", first: true, predicate: ["filterButton"], descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "resetButton", first: true, predicate: ["resetButton"], descendants: true }], ngImport: i0, template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu">
+            class="k-filter-menu"
+            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
             <div class="k-filter-menu-container">
                 <ng-container [ngSwitch]="hasTemplate">
                     <ng-container *ngSwitchCase="false">
-                        <ng-container
+                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
                             [filter]="childFilter"
                             [menuTabbingService]="menuTabbingService">
                         </ng-container>
+                        <ng-template #multiFilter>
+                            <kendo-grid-multicheckbox-filter [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
                         <ng-template
@@ -10867,20 +11252,24 @@ class FilterMenuContainerComponent {
                     </ng-container>
                 </ng-container>
                 <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton
+                    <button #filterButton kendoButton
+                        themeColor="primary"
                         type="submit"
-                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
                         [disabled]="disabled"
+                        [icon]="getButtonIcon('filter', 'icon')"
+                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button
-                        #resetButton
+                    <button #resetButton kendoButton
                         type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                        [icon]="getButtonIcon('reset', 'icon')"
+                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MultiCheckboxFilterComponent, selector: "kendo-grid-multicheckbox-filter", inputs: ["column"], outputs: ["filterChange"] }, { kind: "component", type: ButtonComponent, 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: FilterMenuContainerComponent, decorators: [{
             type: Component,
@@ -10892,17 +11281,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-filter-menu-container',
                     template: `
         <form (submit)="submit()" (reset)="reset()"
-            class="k-filter-menu">
+            class="k-filter-menu"
+            [ngClass]="{'k-popup k-group k-reset': isMultiFilter && !ctx.grid?.isActionSheetExpanded}">
             <div class="k-filter-menu-container">
                 <ng-container [ngSwitch]="hasTemplate">
                     <ng-container *ngSwitchCase="false">
-                        <ng-container
+                        <ng-container *ngIf="!isMultiFilter; else multiFilter"
                             kendoFilterMenuHost
                             [filterService]="childService"
                             [column]="column"
                             [filter]="childFilter"
                             [menuTabbingService]="menuTabbingService">
                         </ng-container>
+                        <ng-template #multiFilter>
+                            <kendo-grid-multicheckbox-filter [column]="column" (filterChange)="onCheckboxFilterChange($event)"></kendo-grid-multicheckbox-filter>
+                        </ng-template>
                     </ng-container>
                     <ng-container *ngSwitchCase="true">
                         <ng-template
@@ -10914,22 +11307,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-container>
                 </ng-container>
                 <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
-                    <button #filterButton
+                    <button #filterButton kendoButton
+                        themeColor="primary"
                         type="submit"
-                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
                         [disabled]="disabled"
+                        [icon]="getButtonIcon('filter', 'icon')"
+                        [svgIcon]="getButtonIcon('filter', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
-                    <button
-                        #resetButton
+                    <button #resetButton kendoButton
                         type="reset"
-                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
+                        [ngClass]="{'k-button-rectangle': !isMultiFilter}"
+                        [icon]="getButtonIcon('reset', 'icon')"
+                        [svgIcon]="getButtonIcon('reset', 'svgIcon')"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                 </div>
             </div>
         </form>
     `,
                     standalone: true,
-                    imports: [FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass]
+                    imports: [FormsModule, NgSwitch, NgSwitchCase, FilterMenuHostDirective, NgIf, NgTemplateOutlet, NgClass, MultiCheckboxFilterComponent, ButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: FilterService, decorators: [{
                     type: SkipSelf
@@ -10950,9 +11347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], resetButton: [{
                 type: ViewChild,
                 args: ['resetButton', { static: false }]
-            }], filterButton: [{
-                type: ViewChild,
-                args: ['filterButton', { static: false }]
             }] } });
 
 let id$1 = 0;
@@ -10968,7 +11362,6 @@ class FilterMenuComponent {
     renderer;
     cdr;
     adaptiveGridService;
-    zone;
     idService;
     filterIcon = filterIcon;
     /**
@@ -10986,7 +11379,7 @@ class FilterMenuComponent {
     tabIndex = '-1';
     popupRef;
     popupSubs;
-    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, zone, idService) {
+    constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, idService) {
         this.filterService = filterService;
         this.popupService = popupService;
         this.ctx = ctx;
@@ -10994,7 +11387,6 @@ class FilterMenuComponent {
         this.renderer = renderer;
         this.cdr = cdr;
         this.adaptiveGridService = adaptiveGridService;
-        this.zone = zone;
         this.idService = idService;
     }
     ngOnDestroy() {
@@ -11072,9 +11464,15 @@ 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: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AdaptiveGridService }, { token: i0.NgZone }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: FilterService }, { token: SinglePopupService }, { token: ContextService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: AdaptiveGridService }, { token: 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: `
         <a #anchor
             class="k-grid-filter-menu k-grid-header-menu"
@@ -11133,7 +11531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [IconWrapperComponent, FilterMenuContainerComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AdaptiveGridService }, { type: i0.NgZone }, { type: IdService, decorators: [{
+        }], ctorParameters: function () { return [{ type: FilterService }, { type: SinglePopupService }, { type: ContextService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: AdaptiveGridService }, { type: IdService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { column: [{
                 type: Input
@@ -12087,7 +12485,7 @@ class ColumnListKeyboardNavigation {
     toggle(index, active) {
         const element = this.items[index]?.hostElement.nativeElement.closest('.k-column-list-item');
         element && this.renderer.setAttribute(element, 'tabindex', active ? '0' : '-1');
-        active && element?.focus();
+        active && element?.focus({ preventScroll: true });
     }
     toggleCheckedState() {
         this.items[this.activeIndex].hostElement.nativeElement.closest('.k-column-list-item').firstElementChild.click();
@@ -12217,15 +12615,6 @@ class ColumnListComponent {
             this.service.menuTabbingService.lastFocusable = this.applyButton.nativeElement;
         }
     }
-    onSelectAllClick(e) {
-        if (e.target.classList.contains('k-checkbox')) {
-            return;
-        }
-        e.preventDefault();
-        const label = e.target.closest('.k-column-list-item');
-        const input = label?.querySelector('input');
-        input.click();
-    }
     onSelectAllCheckboxChange(checkedState) {
         if (!checkedState && !this.allowHideAll) {
             const columnsToKeep = [];
@@ -12407,25 +12796,6 @@ class ColumnListComponent {
             });
         }
     }
-    checkBoxClick(e) {
-        const closestItem = e.target.closest('.k-column-list-item');
-        if (!closestItem)
-            return;
-        const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
-        const input = checkboxElement?.querySelector('input');
-        if (e.target === input) {
-            return;
-        }
-        e.preventDefault();
-        if (input) {
-            const index = parseInt(input.getAttribute('data-index'), 10);
-            const column = this.filteredColumns[index];
-            const isDisabled = checkboxElement.classList.contains('k-disabled');
-            if (column && !isDisabled) {
-                input.click();
-            }
-        }
-    }
     onCheckboxChange(checkedState, column, _index) {
         column.currentlyChecked = checkedState;
         if (this.autoSync) {
@@ -12459,9 +12829,7 @@ class ColumnListComponent {
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -12474,9 +12842,7 @@ class ColumnListComponent {
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -12487,7 +12853,7 @@ class ColumnListComponent {
                 <span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnListComponent, decorators: [{
             type: Component,
@@ -12503,9 +12869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngIf="showSelectAll"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: onSelectAllClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': '0'}"
@@ -12518,9 +12882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <label
                 *ngFor="let column of filteredColumns; let index = index;"
                 class='k-column-list-item'
-                role="option"
-                [kendoEventsOutsideAngular]="{click: checkBoxClick}"
-                [scope]="this">
+                role="option">
                 <kendo-checkbox
                     #checkbox
                     [inputAttributes]="{'data-index': index.toString()}"
@@ -12533,7 +12895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, CheckBoxComponent, EventsOutsideAngularDirective]
+                    imports: [NgFor, NgIf, CheckBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: ColumnListKeyboardNavigation }, { type: i0.ChangeDetectorRef }, { type: ColumnInfoService, decorators: [{
                     type: Optional
@@ -13375,7 +13737,7 @@ class ColumnChooserToolbarDirective extends ToolbarToolBase {
         this.buttonElement?.setAttribute('aria-expanded', 'false');
         this.buttonElement?.removeAttribute('aria-controls');
         this.host.selected = false;
-        focusAnchor && this.buttonElement?.focus();
+        focusAnchor && this.buttonElement?.focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnChooserToolbarDirective, deps: [{ token: i0.Renderer2 }, { token: i2.PopupService }, { token: i54.ToolBarButtonComponent }, { token: ContextService }, { token: i0.NgZone }, { token: i54.RefreshService }, { token: AdaptiveGridService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], 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", filterable: "filterable", showSelectAll: "showSelectAll" }, usesInheritance: true, ngImport: i0 });
@@ -14899,7 +15261,15 @@ 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: 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: `
@@ -15354,7 +15724,13 @@ 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: NavigationService }, { token: SinglePopupService }, { token: ColumnMenuService }, { token: ContextService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: ColumnInfoService }, { token: IdService, optional: true }, { token: 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: [
@@ -17258,19 +17634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['dblclick']
             }] } });
 
-/**
- * @hidden
- */
-class LocalDataChangesService {
-    changes = new EventEmitter();
-    data;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalDataChangesService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @hidden
  */
@@ -18491,7 +18854,7 @@ class HeaderComponent {
     }
     onHeaderKeydown(column, args) {
         const code = normalizeNumpadKeys(args);
-        if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu) {
+        if (code === Keys.ArrowDown && args.altKey && this.showFilterMenu && this.isFilterable(column)) {
             args.preventDefault();
             args.stopImmediatePropagation();
             const filterMenu = this.filterMenus.find(fm => fm.column === column);
@@ -19549,7 +19912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * 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
@@ -21796,7 +22159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * 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
@@ -21900,7 +22263,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * 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.
@@ -22003,7 +22366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * 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.
@@ -22427,8 +22790,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1758187632,
-    version: '20.1.0-develop.2',
+    publishDate: 1760010088,
+    version: '20.1.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -24389,9 +24752,6 @@ class ScrollerService {
         const lastItemIndex = this.rowHeightService.index(scrollTop + offsetHeight);
         const overflow = Math.max(firstItemIndex + (this.virtualPageSize || this.take) - this.total, 0);
         firstItemIndex = Math.max(firstItemIndex - overflow, 0);
-        if (lastItemIndex < this.lastLoaded) {
-            this.lastLoaded = lastItemIndex;
-        }
         if (down) {
             const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
             if (atBottom) {
@@ -24993,6 +25353,9 @@ class ListComponent {
             this.handleSkipOnData = true;
         }
         if (isChanged$1('isVirtual', changes)) {
+            if (this.isVirtual && !(this.minRowHeight || this.rowHeight)) {
+                this.minRowHeight = calcRowHeight(this.table.nativeElement);
+            }
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.scroller.reset();
                 this.rowHeightService = this.scroller.rowHeightService = new RowHeightService(this.total, this.rowHeight || this.minRowHeight);
@@ -25013,6 +25376,7 @@ class ListComponent {
     get totalIsAllItems() {
         return this.isVirtual && (Boolean(this.ctx.grid?.pageable || this.ctx.grid?.group?.length));
     }
+    rebindGroupedDataFlag = false;
     ngDoCheck() {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
@@ -25031,6 +25395,14 @@ class ListComponent {
             this.scroller.reset(this.skipScroll);
             this.scroller.total = this.allItems.length;
         }
+        else if (totalChanged && !this.ctx.grid?.group?.length) {
+            this.scroller.reset(this.skipScroll);
+            this.scroller.total = this.total;
+        }
+        const rebindGroupedData = this.isVirtual && !totalChanged && this.ctx.grid?.group?.length && !this.rebindGroupedDataFlag;
+        if (rebindGroupedData) {
+            this.rebindGroupedDataFlag = true;
+        }
         if (shouldCalculatePageSize || !isPresent(this.scroller.rowHeightService)) {
             const calculatedPageSize = this.virtualPageSize ?? this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
@@ -25051,6 +25423,10 @@ class ListComponent {
                 });
             }
         }
+        else if (this.rebindGroupedDataFlag) {
+            this.ngZone.run(() => this.itemsToRender = this.allItems.slice(this.scroller.virtualSkip, this.scroller.virtualSkip + this.virtualPageSize));
+            this.rebindGroupedDataFlag = false;
+        }
         if (!this.zoneSub) {
             this.zoneSub = this.ngZone.onStable.subscribe(() => {
                 if (!this.scroller.rowHeightService) {
@@ -25571,7 +25947,7 @@ class ListComponent {
             <div></div>
         </div>
     </div>
-    <div 
+    <div
         #container
         class="k-grid-content k-virtual-content"
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
@@ -25696,7 +26072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div></div>
         </div>
     </div>
-    <div 
+    <div
         #container
         class="k-grid-content k-virtual-content"
         [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
@@ -26561,8 +26937,29 @@ class GridMessages extends ComponentMessages {
      * Sets the text for the external editing Dialog <b>Cancel</b> button.
      */
     externalEditingCancelText;
+    /**
+     * The placeholder text for the multi-checkbox filter search input
+     */
+    multiCheckboxFilterSearchPlaceholder;
+    /**
+     * The label for the multi-checkbox filter select all option
+     */
+    multiCheckboxFilterSelectAllLabel;
+    /**
+     * The text for the multi-checkbox filter selected items count
+     *
+     * The text includes the selected items count and a localizable string.
+     * For 3 selected items the default text is `3 selected items`.
+     *
+     * To customize the text, use the `{selectedItemsCount}` placeholder and a custom localizable string.
+     * For example, `{selectedItemsCount} items are selected`.
+     *
+     * The `{selectedItemsCount}` placeholder is replaced with the count of selected items,
+     * and the message is rendered as `3 items are selected`.
+     */
+    multiCheckboxFilterSelectedItemsCount;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerInputLabel: "pagerInputLabel", pagerSelectPage: "pagerSelectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterCellOperatorLabel: "filterCellOperatorLabel", booleanFilterCellLabel: "booleanFilterCellLabel", aiAssistantApplyButtonText: "aiAssistantApplyButtonText", aiAssistantToolbarToolText: "aiAssistantToolbarToolText", aiAssistantWindowTitle: "aiAssistantWindowTitle", aiAssistantWindowCloseTitle: "aiAssistantWindowCloseTitle", aiAssistantOutputCardTitle: "aiAssistantOutputCardTitle", aiAssistantOutputCardBodyContent: "aiAssistantOutputCardBodyContent", aiAssistantWindowMaximizeTitle: "aiAssistantWindowMaximizeTitle", aiAssistantWindowMinimizeTitle: "aiAssistantWindowMinimizeTitle", aiAssistantWindowRestoreTitle: "aiAssistantWindowRestoreTitle", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", adaptiveFilterOperatorsTitle: "adaptiveFilterOperatorsTitle", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveBackButtonTitle: "adaptiveBackButtonTitle", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", filterToolbarToolText: "filterToolbarToolText", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", columnChooserSelectedColumnsCount: "columnChooserSelectedColumnsCount", columnsSubtitle: "columnsSubtitle", adaptiveFilterTitle: "adaptiveFilterTitle", adaptiveSortTitle: "adaptiveSortTitle", adaptiveGroupTitle: "adaptiveGroupTitle", filterClearAllButton: "filterClearAllButton", groupClearButton: "groupClearButton", sortClearButton: "sortClearButton", sortDoneButton: "sortDoneButton", groupDoneButton: "groupDoneButton", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", sortToolbarToolText: "sortToolbarToolText", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", editToolbarToolText: "editToolbarToolText", saveToolbarToolText: "saveToolbarToolText", addToolbarToolText: "addToolbarToolText", cancelToolbarToolText: "cancelToolbarToolText", removeToolbarToolText: "removeToolbarToolText", excelExportToolbarToolText: "excelExportToolbarToolText", pdfExportToolbarToolText: "pdfExportToolbarToolText", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel", columnMenuFilterTabTitle: "columnMenuFilterTabTitle", columnMenuGeneralTabTitle: "columnMenuGeneralTabTitle", columnMenuColumnsTabTitle: "columnMenuColumnsTabTitle", groupChipMenuPrevious: "groupChipMenuPrevious", groupChipMenuNext: "groupChipMenuNext", groupToolbarToolText: "groupToolbarToolText", formValidationErrorText: "formValidationErrorText", removeConfirmationDialogTitle: "removeConfirmationDialogTitle", removeConfirmationDialogContent: "removeConfirmationDialogContent", removeConfirmationDialogConfirmText: "removeConfirmationDialogConfirmText", removeConfirmationDialogRejectText: "removeConfirmationDialogRejectText", externalEditingTitle: "externalEditingTitle", externalEditingAddTitle: "externalEditingAddTitle", externalEditingSaveText: "externalEditingSaveText", externalEditingCancelText: "externalEditingCancelText", multiCheckboxFilterSearchPlaceholder: "multiCheckboxFilterSearchPlaceholder", multiCheckboxFilterSelectAllLabel: "multiCheckboxFilterSelectAllLabel", multiCheckboxFilterSelectedItemsCount: "multiCheckboxFilterSelectedItemsCount" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
@@ -26820,6 +27217,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], externalEditingCancelText: [{
                 type: Input
+            }], multiCheckboxFilterSearchPlaceholder: [{
+                type: Input
+            }], multiCheckboxFilterSelectAllLabel: [{
+                type: Input
+            }], multiCheckboxFilterSelectedItemsCount: [{
+                type: Input
             }] } });
 
 /**
@@ -26925,7 +27328,7 @@ class FilterToolbarToolComponent {
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.filterItems?.get(0)?.nativeElement.focus();
+            this.filterItems?.get(0)?.nativeElement.focus({ preventScroll: true });
         });
     }
     ngOnDestroy() {
@@ -27111,7 +27514,7 @@ class SortToolbarToolComponent {
     }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.sortItems?.get(0)?.nativeElement.focus();
+            this.sortItems?.get(0)?.nativeElement.focus({ preventScroll: true });
         });
     }
     ngOnDestroy() {
@@ -27673,12 +28076,12 @@ class GroupToolbarToolComponent {
         if (items?.first && (!isPresent$1(this.currentFocusedItemIndex) || this.currentFocusedItemIndex >= items.length || this.currentFocusedItemIndex < 0)) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.currentFocusedItemIndex = 0;
-                this.groupItems.first.nativeElement.focus();
+                this.groupItems.first.nativeElement.focus({ preventScroll: true });
             });
             return;
         }
         if (items?.first) {
-            items.get(this.currentFocusedItemIndex).nativeElement.focus();
+            items.get(this.currentFocusedItemIndex).nativeElement.focus({ preventScroll: true });
         }
     }
     get groupItems() {
@@ -30058,7 +30461,7 @@ class GridComponent {
      */
     selectable = false;
     /**
-     * Sets the descriptors for sorting the data ([see example]({% slug sorting_grid %})).
+     * Sets the descriptors for sorting the data ([see example](slug:manual_sorting_grid)).
      */
     set sort(value) {
         if (isArray(value)) {
@@ -30091,11 +30494,11 @@ class GridComponent {
      */
     trackBy = defaultTrackBy;
     /**
-     * Sets the filter descriptor for the data ([see examples]({% slug filtering_grid %})).
+     * Sets the filter descriptor for the data ([see examples](slug:manual_filtering_grid)).
      */
     filter;
     /**
-     * Sets the descriptors for grouping the data ([see example]({% slug grouping_grid %})).
+     * Sets the descriptors for grouping the data ([see example](slug:manual_grouping_grid)).
      */
     set group(value) {
         if (isArray(value)) {
@@ -32616,6 +33019,15 @@ class GridComponent {
 
             i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
             columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
+
+            i18n-multiCheckboxFilterSearchPlaceholder="kendo.grid.multiCheckboxFilterSearchPlaceholder|The placeholder text for the multi-checkbox filter search input"
+            multiCheckboxFilterSearchPlaceholder="Search..."
+
+            i18n-multiCheckboxFilterSelectAllLabel="kendo.grid.multiCheckboxFilterSelectAllLabel|The label for the multi-checkbox filter select all option"
+            multiCheckboxFilterSelectAllLabel="Select all"
+
+            i18n-multiCheckboxFilterSelectedItemsCount="kendo.grid.multiCheckboxFilterSelectedItemsCount|The text for the multi-checkbox filter selected items count"
+            multiCheckboxFilterSelectedItemsCount="{{ '{selectedItemsCount} selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -33476,6 +33888,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
             i18n-columnChooserSelectedColumnsCount="kendo.grid.columnChooserSelectedColumnsCount|The text displayed in the Column Chooser for the number of selected columns"
             columnChooserSelectedColumnsCount="{{ '{selectedColumnsCount} Selected items' }}"
+
+            i18n-multiCheckboxFilterSearchPlaceholder="kendo.grid.multiCheckboxFilterSearchPlaceholder|The placeholder text for the multi-checkbox filter search input"
+            multiCheckboxFilterSearchPlaceholder="Search..."
+
+            i18n-multiCheckboxFilterSelectAllLabel="kendo.grid.multiCheckboxFilterSelectAllLabel|The label for the multi-checkbox filter select all option"
+            multiCheckboxFilterSelectAllLabel="Select all"
+
+            i18n-multiCheckboxFilterSelectedItemsCount="kendo.grid.multiCheckboxFilterSelectedItemsCount|The text for the multi-checkbox filter selected items count"
+            multiCheckboxFilterSelectedItemsCount="{{ '{selectedItemsCount} selected items' }}"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -34706,7 +35127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 /**
- * Represents the directive that manages editing operations in the Grid when using Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
+ * 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
@@ -34783,7 +35204,7 @@ const markAllAsTouched = (control) => {
 };
 
 /**
- * Represents the directive that manages editing operations in the Grid when using Reactive Forms ([see example](slug:editing_directives_grid#toc-reactive-editing-directive)).
+ * 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
@@ -34832,7 +35253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represent the directive that manages in-cell editing operations in the Grid when using Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
+ * 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
@@ -34918,7 +35339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 /**
  * 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
@@ -38082,5 +38503,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable };
+export { AIAssistantToolbarDirective, AddCommandDirective, AddCommandToolbarDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CancelCommandToolbarDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionAggregateService, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnChooserToolbarDirective, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_AI_REQUEST_OPTIONS, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditCommandToolbarDirective, EditService as EditServiceClass, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelCommandToolbarDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, ExternalEditingDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterCommandToolbarDirective, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridClipboardDirective, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarAIResponseErrorEvent, GridToolbarAIResponseSuccessEvent, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupCommandToolbarDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupPanelComponent, GroupsService, HeaderComponent, HeaderTemplateDirective, HighlightDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, KENDO_GRID, KENDO_GRID_BODY_EXPORTS, KENDO_GRID_COLUMN_DRAGANDDROP, KENDO_GRID_COLUMN_MENU_DECLARATIONS, KENDO_GRID_COLUMN_MENU_EXPORTS, KENDO_GRID_DECLARATIONS, KENDO_GRID_EXCEL_EXPORT, KENDO_GRID_EXPORTS, KENDO_GRID_FILTER_MENU, KENDO_GRID_FILTER_MENU_EXPORTS, KENDO_GRID_FILTER_OPERATORS, KENDO_GRID_FILTER_ROW, KENDO_GRID_FILTER_ROW_EXPORTS, KENDO_GRID_FILTER_SHARED, KENDO_GRID_FOOTER_EXPORTS, KENDO_GRID_GROUP_EXPORTS, KENDO_GRID_HEADER_EXPORTS, KENDO_GRID_PDF_EXPORT, KENDO_GRID_SHARED, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, MultiCheckboxFilterComponent, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFCommandToolbarDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RedoCommandToolbarDirective, RemoveCommandDirective, RemoveCommandToolbarDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowDragHandleTemplateDirective, RowDragHintTemplateDirective, RowEditingDirectiveBase, RowReorderColumnComponent, RowReorderService, SaveCommandDirective, SaveCommandToolbarDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectAllToolbarToolComponent, SelectionCheckboxDirective, SelectionDirective, SelectionService, SinglePopupService, SizingOptionsService, Skip, SortCommandToolbarDirective, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StatusBarTemplateDirective, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, UndoCommandToolbarDirective, UndoRedoDirective, UndoRedoEvent, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable };