@progress/kendo-angular-grid 21.2.0 → 21.3.0-develop.10

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

@@ -54,6 +54,7 @@ export declare class ColumnListComponent implements OnInit, OnDestroy {
     private _columns;
     private domSubscriptions;
     private lastDisabledCheckbox;
+    private handledKeys;
     constructor(element: ElementRef, ngZone: NgZone, renderer: Renderer2, listNavigationService: ColumnListKeyboardNavigation, cdr: ChangeDetectorRef, columnInfoService: ColumnInfoService, adaptiveGridService: AdaptiveGridService, ctx: ContextService);
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/common/id.service.d.ts

@@ -2,18 +2,23 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { OnDestroy } from "@angular/core";
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class IdService {
+export declare class IdService implements OnDestroy {
     private prefix;
+    private gridIndex;
+    private columnCounter;
     constructor();
+    ngOnDestroy(): void;
     gridId(): string;
     cellId(rowIndex: number, colIndex: number): string;
     selectionCheckboxId(itemIndex: any): string;
     selectAllCheckboxId(): string;
     columnId(colIndex: number): string;
+    nextColumnId(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<IdService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IdService>;
 }

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

@@ -86,6 +86,7 @@ export class ColumnListComponent {
     _columns;
     domSubscriptions = new Subscription();
     lastDisabledCheckbox;
+    handledKeys = [Keys.ArrowDown, Keys.ArrowUp, Keys.Space];
     constructor(element, ngZone, renderer, listNavigationService, cdr, columnInfoService, adaptiveGridService, ctx) {
         this.element = element;
         this.ngZone = ngZone;
@@ -228,7 +229,7 @@ export class ColumnListComponent {
     }
     onKeydown = (e) => {
         const code = normalizeKeys(e);
-        if (code !== Keys.Tab) {
+        if (this.handledKeys.includes(code)) {
             e.preventDefault();
         }
         if (code === 'Tab' && e.shiftKey) {

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

@@ -7,7 +7,6 @@ import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import { columnsIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
-import { ColumnListComponent } from './column-list.component';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 import { ColumnMenuItemComponent } from './column-menu-item.component';
 import { ColumnChooserContentComponent } from './column-chooser-content.component';
@@ -139,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </kendo-grid-columnmenu-item>
     `,
                     standalone: true,
-                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnListComponent, ColumnChooserContentComponent]
+                    imports: [ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnChooserContentComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ContextService }, { type: i2.ColumnInfoService }, { type: i0.ElementRef }], propDecorators: { expand: [{
                 type: Output

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

@@ -15,7 +15,6 @@ import { moreVerticalIcon, columnsIcon, filterIcon, slidersIcon } from '@progres
 import { TabContentDirective, TabStripComponent, TabStripTabComponent, TabTitleDirective } from '@progress/kendo-angular-layout';
 import { ColumnInfoService } from '../common/column-info.service';
 import { IdService } from '../common/id.service';
-import { ColumnListComponent } from './column-list.component';
 import { FilterMenuContainerComponent } from '../filtering/menu/filter-menu-container.component';
 import { ColumnMenuFilterComponent } from './column-menu-filter.component';
 import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
@@ -437,7 +436,7 @@ export class ColumnMenuComponent {
                 >
               </kendo-grid-columnmenu-autosize-column>
             }
-        
+
             @if (hasAutoSizeAllColumns) {
               <kendo-grid-columnmenu-autosize-all-columns
                 #autoSizeAllColumnsItem
@@ -565,7 +564,7 @@ export class ColumnMenuComponent {
             }
           </kendo-tabstrip>
         </ng-template>
-        
+
         `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: TabTitleDirective, selector: "[kendoTabTitle]" }, { kind: "directive", type: TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnMenuComponent, decorators: [{
@@ -648,7 +647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 >
               </kendo-grid-columnmenu-autosize-column>
             }
-        
+
             @if (hasAutoSizeAllColumns) {
               <kendo-grid-columnmenu-autosize-all-columns
                 #autoSizeAllColumnsItem
@@ -776,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
           </kendo-tabstrip>
         </ng-template>
-        
+
         `,
                     standalone: true,
                     imports: [
@@ -798,7 +797,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TabTitleDirective,
                         TabContentDirective,
                         FilterMenuContainerComponent,
-                        ColumnListComponent,
                         ColumnChooserContentComponent
                     ]
                 }]

package/esm2022/columns/column-base.mjs

@@ -24,7 +24,6 @@ export const isCheckboxColumn = column => column?.isCheckboxColumn;
  */
 export const isRowReorderColumn = column => column?.isRowReorderColumn;
 const isColumnContainer = column => column?.isColumnGroup || isSpanColumn(column);
-let columnId = 0;
 /**
  * The base class for the column components of the Grid.
  *
@@ -355,7 +354,7 @@ export class ColumnBase {
         if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
             throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
-        this._id = this.idService?.columnId(columnId++);
+        this._id = this.idService?.nextColumnId();
     }
     ngAfterViewInit() {
         this.initialMinResizableWidth = this.minResizableWidth || 10;

package/esm2022/common/id.service.mjs

@@ -4,15 +4,34 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from "@angular/core";
 import * as i0 from "@angular/core";
-// Incremented each time the service is instantiated.
-let sequence = 0;
+// Registry to track active Grid instances and their indices
+const activeGridIndices = new Set();
+// Get the next available grid index (reuses freed indices)
+function getNextGridIndex() {
+    let index = 0;
+    while (activeGridIndices.has(index)) {
+        index++;
+    }
+    activeGridIndices.add(index);
+    return index;
+}
+// Release a grid index when the Grid is destroyed
+function releaseGridIndex(index) {
+    activeGridIndices.delete(index);
+}
 /**
  * @hidden
  */
 export class IdService {
     prefix;
+    gridIndex;
+    columnCounter = 0;
     constructor() {
-        this.prefix = `k-grid${sequence++}`;
+        this.gridIndex = getNextGridIndex();
+        this.prefix = `k-grid${this.gridIndex}`;
+    }
+    ngOnDestroy() {
+        releaseGridIndex(this.gridIndex);
     }
     gridId() {
         return this.prefix;
@@ -29,6 +48,9 @@ export class IdService {
     columnId(colIndex) {
         return `${this.prefix}-col${colIndex}`;
     }
+    nextColumnId() {
+        return `${this.prefix}-col${this.columnCounter++}`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IdService });
 }

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

@@ -7,7 +7,7 @@ import { Component, Input } from '@angular/core';
 import { ColumnComponent } from "../../columns/column.component";
 import { FilterService } from '../filter.service';
 import { SinglePopupService } from '../../common/single-popup.service';
-import { take } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 import { DatePickerComponent, DatePickerCustomMessagesComponent } from '@progress/kendo-angular-dateinputs';
 import { ContextService } from '../../common/provider.service';
 import { FilterInputDirective } from '../filter-input.directive';
@@ -49,12 +49,12 @@ export class DateFilterMenuInputComponent {
             this.subscription.unsubscribe();
         }
     }
-    open() {
+    open(picker) {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
         this.subscription = this.popupService.onClose
-            .pipe(take(1))
+            .pipe(filter(() => picker.isActive))
             .subscribe(e => e.preventDefault());
     }
     messageFor(key) {
@@ -76,13 +76,13 @@ export class DateFilterMenuInputComponent {
             [filterService]="filterService"
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService">
-            <kendo-datepicker
+            <kendo-datepicker #picker
                 kendoFilterInput
                 [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                (open)="open()"
+                (open)="open(picker)"
                 [value]="currentFilter?.value"
                 [placeholder]="placeholder"
                 [formatPlaceholder]="formatPlaceholder"
@@ -115,13 +115,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [filterService]="filterService"
             [isFirstDropDown]="isFirstDropDown"
             [menuTabbingService]="menuTabbingService">
-            <kendo-datepicker
+            <kendo-datepicker #picker
                 kendoFilterInput
                 [adaptiveMode]="ctx.grid?.adaptiveMode"
                 [size]="ctx.grid?.isActionSheetExpanded ? 'large' : null"
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"
-                (open)="open()"
+                (open)="open(picker)"
                 [value]="currentFilter?.value"
                 [placeholder]="placeholder"
                 [formatPlaceholder]="formatPlaceholder"