@progress/kendo-angular-grid 18.5.0-develop.4 → 18.5.0-develop.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/column-menu/column-chooser.component.d.ts +0 -4
  2. package/columns/column-base.d.ts +3 -2
  3. package/columns/column.component.d.ts +2 -3
  4. package/esm2022/column-menu/column-chooser.component.mjs +2 -13
  5. package/esm2022/column-menu/column-list.component.mjs +53 -33
  6. package/esm2022/columns/column-base.mjs +4 -0
  7. package/esm2022/columns/column.component.mjs +0 -4
  8. package/esm2022/package-metadata.mjs +2 -2
  9. package/fesm2022/progress-kendo-angular-grid.mjs +61 -52
  10. package/package.json +19 -19
  11. package/schematics/ngAdd/index.js +4 -4
package/column-menu/column-chooser.component.d.ts CHANGED
@@ -65,10 +65,6 @@ export declare class ColumnChooserComponent implements OnDestroy {
65
65
  * @hidden
66
66
  */
67
67
  onChange(changed: any[]): void;
68
- /**
69
- * @hidden
70
- */
71
- onShiftTab(e: Event): void;
72
68
  private close;
73
69
  private detachClose;
74
70
  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnChooserComponent, never>;
package/columns/column-base.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { TemplateRef, QueryList } from '@angular/core';
5
+ import { TemplateRef, QueryList, AfterViewInit } from '@angular/core';
6
6
  import { HeaderTemplateDirective } from '../rendering/header/header-template.directive';
7
7
  import { FooterTemplateDirective } from '../rendering/footer/footer-template.directive';
8
8
  import { ColumnMenuTemplateDirective } from '../column-menu/column-menu-template.directive';
@@ -24,7 +24,7 @@ export declare const isRowReorderColumn: (column: any) => any;
24
24
  /**
25
25
  * The base class for the column components of the Grid.
26
26
  */
27
- export declare class ColumnBase {
27
+ export declare class ColumnBase implements AfterViewInit {
28
28
  parent?: ColumnBase;
29
29
  /**
30
30
  * @hidden
@@ -303,6 +303,7 @@ export declare class ColumnBase {
303
303
  * @hidden
304
304
  */
305
305
  constructor(parent?: ColumnBase, idService?: IdService);
306
+ ngAfterViewInit(): void;
306
307
  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnBase, never>;
307
308
  static ɵcmp: i0.ɵɵComponentDeclaration<ColumnBase, "kendo-grid-column-base", never, { "resizable": { "alias": "resizable"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "minResizableWidth": { "alias": "minResizableWidth"; "required": false; }; "maxResizableWidth": { "alias": "maxResizableWidth"; "required": false; }; "title": { "alias": "title"; "required": false; }; "width": { "alias": "width"; "required": false; }; "autoSize": { "alias": "autoSize"; "required": false; }; "locked": { "alias": "locked"; "required": false; }; "sticky": { "alias": "sticky"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "media": { "alias": "media"; "required": false; }; "lockable": { "alias": "lockable"; "required": false; }; "stickable": { "alias": "stickable"; "required": false; }; "columnMenu": { "alias": "columnMenu"; "required": false; }; "includeInChooser": { "alias": "includeInChooser"; "required": false; }; "tableCellsRole": { "alias": "tableCellsRole"; "required": false; }; "style": { "alias": "style"; "required": false; }; "headerStyle": { "alias": "headerStyle"; "required": false; }; "filterStyle": { "alias": "filterStyle"; "required": false; }; "footerStyle": { "alias": "footerStyle"; "required": false; }; "cssClass": { "alias": "class"; "required": false; }; "headerClass": { "alias": "headerClass"; "required": false; }; "filterClass": { "alias": "filterClass"; "required": false; }; "footerClass": { "alias": "footerClass"; "required": false; }; "cellRowspan": { "alias": "cellRowspan"; "required": false; }; }, {}, ["footerTemplate", "headerTemplates", "columnMenuTemplates"], never, false, never>;
308
309
  }
package/columns/column.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { TemplateRef, AfterViewInit } from '@angular/core';
5
+ import { TemplateRef } from '@angular/core';
6
6
  import { CellTemplateDirective } from '../rendering/cell-template.directive';
7
7
  import { GroupHeaderTemplateDirective } from '../grouping/group-header-template.directive';
8
8
  import { GroupHeaderColumnTemplateDirective } from '../grouping/group-header-column-template.directive';
@@ -31,7 +31,7 @@ export declare function isColumnComponent(column: any): column is ColumnComponen
31
31
  * </kendo-grid>
32
32
  * ```
33
33
  */
34
- export declare class ColumnComponent extends ColumnBase implements AfterViewInit {
34
+ export declare class ColumnComponent extends ColumnBase {
35
35
  /**
36
36
  * The field to which the column is bound.
37
37
  */
@@ -95,7 +95,6 @@ export declare class ColumnComponent extends ColumnBase implements AfterViewInit
95
95
  get filterCellTemplateRef(): TemplateRef<any>;
96
96
  get filterMenuTemplateRef(): TemplateRef<any>;
97
97
  get displayTitle(): string;
98
- ngAfterViewInit(): void;
99
98
  static ɵfac: i0.ɵɵFactoryDeclaration<ColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
100
99
  static ɵcmp: i0.ɵɵComponentDeclaration<ColumnComponent, "kendo-grid-column", never, { "field": { "alias": "field"; "required": false; }; "format": { "alias": "format"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "groupable": { "alias": "groupable"; "required": false; }; "editor": { "alias": "editor"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; }, {}, ["template", "groupHeaderTemplate", "groupHeaderColumnTemplate", "groupFooterTemplate", "editTemplate", "filterCellTemplate", "filterMenuTemplate"], never, true, never>;
101
100
  }
package/esm2022/column-menu/column-chooser.component.mjs CHANGED
@@ -131,15 +131,6 @@ export class ColumnChooserComponent {
131
131
  this.changeDetector.markForCheck();
132
132
  this.columnInfoService.changeVisibility(changed);
133
133
  }
134
- /**
135
- * @hidden
136
- */
137
- onShiftTab(e) {
138
- if (e.target.matches('.k-column-list-item')) {
139
- e.preventDefault();
140
- this.columnList.resetButton.nativeElement.focus();
141
- }
142
- }
143
134
  close(focusAnchor = false) {
144
135
  if (this.popupRef) {
145
136
  this.popupRef.close();
@@ -181,8 +172,7 @@ export class ColumnChooserComponent {
181
172
  [autoSync]="autoSync"
182
173
  [allowHideAll]="allowHideAll"
183
174
  (apply)="onApply($event)"
184
- (columnChange)="onChange($event)"
185
- (keydown.shift.tab)="onShiftTab($event)">
175
+ (columnChange)="onChange($event)">
186
176
  </kendo-grid-columnlist>
187
177
  </ng-template>
188
178
  `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
@@ -215,8 +205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
215
205
  [autoSync]="autoSync"
216
206
  [allowHideAll]="allowHideAll"
217
207
  (apply)="onApply($event)"
218
- (columnChange)="onChange($event)"
219
- (keydown.shift.tab)="onShiftTab($event)">
208
+ (columnChange)="onChange($event)">
220
209
  </kendo-grid-columnlist>
221
210
  </ng-template>
222
211
  `,
package/esm2022/column-menu/column-list.component.mjs CHANGED
@@ -131,6 +131,17 @@ export class ColumnListComponent {
131
131
  if (e.keyCode !== Keys.Tab) {
132
132
  e.preventDefault();
133
133
  }
134
+ if (e.key === 'Tab' && !e.shiftKey && this.autoSync) {
135
+ e.preventDefault();
136
+ }
137
+ if (e.key === 'Tab' && e.shiftKey) {
138
+ this.ngZone.run(() => {
139
+ if (e.target.matches('.k-column-list-item')) {
140
+ e.preventDefault();
141
+ this.resetButton?.nativeElement.focus();
142
+ }
143
+ });
144
+ }
134
145
  if (e.keyCode === Keys.ArrowDown) {
135
146
  this.listNavigationService.next();
136
147
  }
@@ -145,19 +156,23 @@ export class ColumnListComponent {
145
156
  if (this.allowHideAll && !this.hasLocked) {
146
157
  return;
147
158
  }
148
- const checkedItems = [];
159
+ // Cache visible columns to avoid repeated checks
160
+ const visibleColumns = [];
161
+ const columnMap = new Map();
149
162
  this.checkboxes.forEach((checkbox, index) => {
163
+ // Reset all disabled states first
164
+ this.setDisabledState(checkbox, false);
150
165
  if (checkbox.checkedState) {
151
- checkedItems.push({ checkbox, index });
166
+ visibleColumns.push({ checkbox, index });
167
+ columnMap.set(index, this.columns[index]);
152
168
  }
153
- this.setDisabledState(checkbox, false);
154
169
  });
155
- if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
156
- this.setDisabledState(checkedItems[0].checkbox, true);
170
+ // Only apply disabled states where needed
171
+ if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
172
+ this.setDisabledState(visibleColumns[0].checkbox, true);
157
173
  }
158
174
  else if (this.hasLocked && !this.hasUnlockedFiltered) {
159
- const columns = this.columns;
160
- const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
175
+ const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
161
176
  if (checkedUnlocked.length === 1) {
162
177
  this.setDisabledState(checkedUnlocked[0].checkbox, true);
163
178
  }
@@ -178,34 +193,32 @@ export class ColumnListComponent {
178
193
  }
179
194
  }
180
195
  setDisabledState(checkbox, disabled) {
181
- this.ngZone.run(() => checkbox.disabled = disabled);
182
- const checkboxElement = checkbox.hostElement.nativeElement;
183
- const parentElement = checkboxElement.parentElement;
184
- const classCommand = disabled ? 'addClass' : 'removeClass';
185
- const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
186
- this.renderer[classCommand](parentElement, 'k-disabled');
187
- this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
196
+ if (checkbox.disabled !== disabled) {
197
+ this.ngZone.runOutsideAngular(() => {
198
+ checkbox.disabled = disabled;
199
+ const checkboxElement = checkbox.hostElement.nativeElement;
200
+ const parentElement = checkboxElement.parentElement;
201
+ if (disabled) {
202
+ this.renderer.addClass(parentElement, 'k-disabled');
203
+ this.renderer.setAttribute(parentElement, 'aria-disabled', 'true');
204
+ }
205
+ else {
206
+ this.renderer.removeClass(parentElement, 'k-disabled');
207
+ this.renderer.removeAttribute(parentElement, 'aria-disabled');
208
+ }
209
+ });
210
+ }
188
211
  }
189
212
  handleCheckBoxClick = (e) => {
190
213
  const closestItem = e.target.closest('.k-column-list-item');
191
214
  if (closestItem) {
192
215
  const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
193
- const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
194
216
  const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
195
- if (index !== this.listNavigationService.activeIndex) {
196
- this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
197
- this.listNavigationService.activeIndex = index;
198
- this.listNavigationService.toggle(index, true);
217
+ const checkbox = this.checkboxes.toArray()[index];
218
+ if (e.target === checkbox.input.nativeElement) {
219
+ closestItem.focus();
220
+ e.target.classList.remove('k-focus');
199
221
  }
200
- if (checkboxElement.contains(e.target)) {
201
- const checkboxInputElement = checkboxElement.firstElementChild;
202
- checkboxInputElement.blur();
203
- checkboxInputElement.classList.remove('k-focus');
204
- }
205
- else {
206
- this.listNavigationService.toggleCheckedState();
207
- }
208
- closestItem.focus();
209
222
  if (this.autoSync) {
210
223
  if (!this.columns[index]) {
211
224
  return;
@@ -213,14 +226,21 @@ export class ColumnListComponent {
213
226
  const column = this.columns[index];
214
227
  const hidden = !checkbox.checkedState;
215
228
  if (Boolean(column.hidden) !== hidden) {
216
- this.ngZone.run(() => {
229
+ this.ngZone.runOutsideAngular(() => {
217
230
  column.hidden = hidden;
218
- this.columnChange.emit([column]);
231
+ this.ngZone.run(() => {
232
+ this.columnChange.emit([column]);
233
+ });
219
234
  });
220
235
  }
221
236
  }
222
237
  else {
223
- this.updateDisabled();
238
+ this.ngZone.run(() => this.updateDisabled());
239
+ }
240
+ if (index !== this.listNavigationService.activeIndex) {
241
+ this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
242
+ this.listNavigationService.activeIndex = index;
243
+ this.listNavigationService.toggle(index, true);
224
244
  }
225
245
  }
226
246
  };
@@ -238,9 +258,9 @@ export class ColumnListComponent {
238
258
  role="option">
239
259
  <kendo-checkbox
240
260
  [inputAttributes]="{'data-index': index.toString()}"
261
+ [tabindex]="-1"
241
262
  [checkedState]="!column.hidden"
242
263
  [disabled]="isDisabled(column)"
243
- [tabindex]="-1"
244
264
  ></kendo-checkbox>
245
265
  <span class="k-checkbox-label">{{ column.displayTitle }}</span>
246
266
  </label>
@@ -282,9 +302,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
282
302
  role="option">
283
303
  <kendo-checkbox
284
304
  [inputAttributes]="{'data-index': index.toString()}"
305
+ [tabindex]="-1"
285
306
  [checkedState]="!column.hidden"
286
307
  [disabled]="isDisabled(column)"
287
- [tabindex]="-1"
288
308
  ></kendo-checkbox>
289
309
  <span class="k-checkbox-label">{{ column.displayTitle }}</span>
290
310
  </label>
package/esm2022/columns/column-base.mjs CHANGED
@@ -354,6 +354,10 @@ export class ColumnBase {
354
354
  throw new Error(ColumnConfigurationErrorMessages.columnNested);
355
355
  }
356
356
  }
357
+ ngAfterViewInit() {
358
+ this.initialMaxResizableWidth = this.maxResizableWidth;
359
+ this.initialMinResizableWidth = this.minResizableWidth;
360
+ }
357
361
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: i1.IdService }], target: i0.ɵɵFactoryTarget.Component });
358
362
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
359
363
  }
package/esm2022/columns/column.component.mjs CHANGED
@@ -116,10 +116,6 @@ export class ColumnComponent extends ColumnBase {
116
116
  get displayTitle() {
117
117
  return this.title === undefined ? this.field : this.title;
118
118
  }
119
- ngAfterViewInit() {
120
- this.initialMaxResizableWidth = this.maxResizableWidth;
121
- this.initialMinResizableWidth = this.minResizableWidth;
122
- }
123
119
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
124
120
  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: [
125
121
  {
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1743767484,
14
- version: '18.5.0-develop.4',
13
+ publishDate: 1743780159,
14
+ version: '18.5.0-develop.6',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
package/fesm2022/progress-kendo-angular-grid.mjs CHANGED
@@ -2482,6 +2482,10 @@ class ColumnBase {
2482
2482
  throw new Error(ColumnConfigurationErrorMessages.columnNested);
2483
2483
  }
2484
2484
  }
2485
+ ngAfterViewInit() {
2486
+ this.initialMaxResizableWidth = this.maxResizableWidth;
2487
+ this.initialMinResizableWidth = this.minResizableWidth;
2488
+ }
2485
2489
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
2486
2490
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass", cellRowspan: "cellRowspan" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
2487
2491
  }
@@ -2855,10 +2859,6 @@ class ColumnComponent extends ColumnBase {
2855
2859
  get displayTitle() {
2856
2860
  return this.title === undefined ? this.field : this.title;
2857
2861
  }
2858
- ngAfterViewInit() {
2859
- this.initialMaxResizableWidth = this.maxResizableWidth;
2860
- this.initialMinResizableWidth = this.minResizableWidth;
2861
- }
2862
2862
  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 });
2863
2863
  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: [
2864
2864
  {
@@ -11147,6 +11147,17 @@ class ColumnListComponent {
11147
11147
  if (e.keyCode !== Keys.Tab) {
11148
11148
  e.preventDefault();
11149
11149
  }
11150
+ if (e.key === 'Tab' && !e.shiftKey && this.autoSync) {
11151
+ e.preventDefault();
11152
+ }
11153
+ if (e.key === 'Tab' && e.shiftKey) {
11154
+ this.ngZone.run(() => {
11155
+ if (e.target.matches('.k-column-list-item')) {
11156
+ e.preventDefault();
11157
+ this.resetButton?.nativeElement.focus();
11158
+ }
11159
+ });
11160
+ }
11150
11161
  if (e.keyCode === Keys.ArrowDown) {
11151
11162
  this.listNavigationService.next();
11152
11163
  }
@@ -11161,19 +11172,23 @@ class ColumnListComponent {
11161
11172
  if (this.allowHideAll && !this.hasLocked) {
11162
11173
  return;
11163
11174
  }
11164
- const checkedItems = [];
11175
+ // Cache visible columns to avoid repeated checks
11176
+ const visibleColumns = [];
11177
+ const columnMap = new Map();
11165
11178
  this.checkboxes.forEach((checkbox, index) => {
11179
+ // Reset all disabled states first
11180
+ this.setDisabledState(checkbox, false);
11166
11181
  if (checkbox.checkedState) {
11167
- checkedItems.push({ checkbox, index });
11182
+ visibleColumns.push({ checkbox, index });
11183
+ columnMap.set(index, this.columns[index]);
11168
11184
  }
11169
- this.setDisabledState(checkbox, false);
11170
11185
  });
11171
- if (!this.allowHideAll && checkedItems.length === 1 && !this.hasFiltered) {
11172
- this.setDisabledState(checkedItems[0].checkbox, true);
11186
+ // Only apply disabled states where needed
11187
+ if (!this.allowHideAll && visibleColumns.length === 1 && !this.hasFiltered) {
11188
+ this.setDisabledState(visibleColumns[0].checkbox, true);
11173
11189
  }
11174
11190
  else if (this.hasLocked && !this.hasUnlockedFiltered) {
11175
- const columns = this.columns;
11176
- const checkedUnlocked = checkedItems.filter(item => !columns[item.index].locked);
11191
+ const checkedUnlocked = visibleColumns.filter(item => !columnMap.get(item.index).locked);
11177
11192
  if (checkedUnlocked.length === 1) {
11178
11193
  this.setDisabledState(checkedUnlocked[0].checkbox, true);
11179
11194
  }
@@ -11194,34 +11209,32 @@ class ColumnListComponent {
11194
11209
  }
11195
11210
  }
11196
11211
  setDisabledState(checkbox, disabled) {
11197
- this.ngZone.run(() => checkbox.disabled = disabled);
11198
- const checkboxElement = checkbox.hostElement.nativeElement;
11199
- const parentElement = checkboxElement.parentElement;
11200
- const classCommand = disabled ? 'addClass' : 'removeClass';
11201
- const attributeCommand = disabled ? 'setAttribute' : 'removeAttribute';
11202
- this.renderer[classCommand](parentElement, 'k-disabled');
11203
- this.renderer[attributeCommand](parentElement, 'aria-disabled', disabled ? 'true' : undefined);
11212
+ if (checkbox.disabled !== disabled) {
11213
+ this.ngZone.runOutsideAngular(() => {
11214
+ checkbox.disabled = disabled;
11215
+ const checkboxElement = checkbox.hostElement.nativeElement;
11216
+ const parentElement = checkboxElement.parentElement;
11217
+ if (disabled) {
11218
+ this.renderer.addClass(parentElement, 'k-disabled');
11219
+ this.renderer.setAttribute(parentElement, 'aria-disabled', 'true');
11220
+ }
11221
+ else {
11222
+ this.renderer.removeClass(parentElement, 'k-disabled');
11223
+ this.renderer.removeAttribute(parentElement, 'aria-disabled');
11224
+ }
11225
+ });
11226
+ }
11204
11227
  }
11205
11228
  handleCheckBoxClick = (e) => {
11206
11229
  const closestItem = e.target.closest('.k-column-list-item');
11207
11230
  if (closestItem) {
11208
11231
  const checkboxElement = closestItem.querySelector('.k-checkbox-wrap');
11209
- const checkbox = this.checkboxes.find(checkBox => checkBox.hostElement.nativeElement === checkboxElement);
11210
11232
  const index = parseInt(checkboxElement.firstElementChild.getAttribute('data-index'), 10);
11211
- if (index !== this.listNavigationService.activeIndex) {
11212
- this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
11213
- this.listNavigationService.activeIndex = index;
11214
- this.listNavigationService.toggle(index, true);
11215
- }
11216
- if (checkboxElement.contains(e.target)) {
11217
- const checkboxInputElement = checkboxElement.firstElementChild;
11218
- checkboxInputElement.blur();
11219
- checkboxInputElement.classList.remove('k-focus');
11233
+ const checkbox = this.checkboxes.toArray()[index];
11234
+ if (e.target === checkbox.input.nativeElement) {
11235
+ closestItem.focus();
11236
+ e.target.classList.remove('k-focus');
11220
11237
  }
11221
- else {
11222
- this.listNavigationService.toggleCheckedState();
11223
- }
11224
- closestItem.focus();
11225
11238
  if (this.autoSync) {
11226
11239
  if (!this.columns[index]) {
11227
11240
  return;
@@ -11229,14 +11242,21 @@ class ColumnListComponent {
11229
11242
  const column = this.columns[index];
11230
11243
  const hidden = !checkbox.checkedState;
11231
11244
  if (Boolean(column.hidden) !== hidden) {
11232
- this.ngZone.run(() => {
11245
+ this.ngZone.runOutsideAngular(() => {
11233
11246
  column.hidden = hidden;
11234
- this.columnChange.emit([column]);
11247
+ this.ngZone.run(() => {
11248
+ this.columnChange.emit([column]);
11249
+ });
11235
11250
  });
11236
11251
  }
11237
11252
  }
11238
11253
  else {
11239
- this.updateDisabled();
11254
+ this.ngZone.run(() => this.updateDisabled());
11255
+ }
11256
+ if (index !== this.listNavigationService.activeIndex) {
11257
+ this.listNavigationService.toggle(this.listNavigationService.activeIndex, false);
11258
+ this.listNavigationService.activeIndex = index;
11259
+ this.listNavigationService.toggle(index, true);
11240
11260
  }
11241
11261
  }
11242
11262
  };
@@ -11254,9 +11274,9 @@ class ColumnListComponent {
11254
11274
  role="option">
11255
11275
  <kendo-checkbox
11256
11276
  [inputAttributes]="{'data-index': index.toString()}"
11277
+ [tabindex]="-1"
11257
11278
  [checkedState]="!column.hidden"
11258
11279
  [disabled]="isDisabled(column)"
11259
- [tabindex]="-1"
11260
11280
  ></kendo-checkbox>
11261
11281
  <span class="k-checkbox-label">{{ column.displayTitle }}</span>
11262
11282
  </label>
@@ -11298,9 +11318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
11298
11318
  role="option">
11299
11319
  <kendo-checkbox
11300
11320
  [inputAttributes]="{'data-index': index.toString()}"
11321
+ [tabindex]="-1"
11301
11322
  [checkedState]="!column.hidden"
11302
11323
  [disabled]="isDisabled(column)"
11303
- [tabindex]="-1"
11304
11324
  ></kendo-checkbox>
11305
11325
  <span class="k-checkbox-label">{{ column.displayTitle }}</span>
11306
11326
  </label>
@@ -11485,15 +11505,6 @@ class ColumnChooserComponent {
11485
11505
  this.changeDetector.markForCheck();
11486
11506
  this.columnInfoService.changeVisibility(changed);
11487
11507
  }
11488
- /**
11489
- * @hidden
11490
- */
11491
- onShiftTab(e) {
11492
- if (e.target.matches('.k-column-list-item')) {
11493
- e.preventDefault();
11494
- this.columnList.resetButton.nativeElement.focus();
11495
- }
11496
- }
11497
11508
  close(focusAnchor = false) {
11498
11509
  if (this.popupRef) {
11499
11510
  this.popupRef.close();
@@ -11535,8 +11546,7 @@ class ColumnChooserComponent {
11535
11546
  [autoSync]="autoSync"
11536
11547
  [allowHideAll]="allowHideAll"
11537
11548
  (apply)="onApply($event)"
11538
- (columnChange)="onChange($event)"
11539
- (keydown.shift.tab)="onShiftTab($event)">
11549
+ (columnChange)="onChange($event)">
11540
11550
  </kendo-grid-columnlist>
11541
11551
  </ng-template>
11542
11552
  `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "ariaLabel", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
@@ -11569,8 +11579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
11569
11579
  [autoSync]="autoSync"
11570
11580
  [allowHideAll]="allowHideAll"
11571
11581
  (apply)="onApply($event)"
11572
- (columnChange)="onChange($event)"
11573
- (keydown.shift.tab)="onShiftTab($event)">
11582
+ (columnChange)="onChange($event)">
11574
11583
  </kendo-grid-columnlist>
11575
11584
  </ng-template>
11576
11585
  `,
@@ -19817,8 +19826,8 @@ const packageMetadata = {
19817
19826
  productName: 'Kendo UI for Angular',
19818
19827
  productCode: 'KENDOUIANGULAR',
19819
19828
  productCodes: ['KENDOUIANGULAR'],
19820
- publishDate: 1743767484,
19821
- version: '18.5.0-develop.4',
19829
+ publishDate: 1743780159,
19830
+ version: '18.5.0-develop.6',
19822
19831
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
19823
19832
  };
19824
19833
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-grid",
3
- "version": "18.5.0-develop.4",
3
+ "version": "18.5.0-develop.6",
4
4
  "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -26,7 +26,7 @@
26
26
  "package": {
27
27
  "productName": "Kendo UI for Angular",
28
28
  "productCode": "KENDOUIANGULAR",
29
- "publishDate": 1743767484,
29
+ "publishDate": 1743780159,
30
30
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
31
31
  }
32
32
  },
@@ -39,27 +39,27 @@
39
39
  "@progress/kendo-data-query": "^1.0.0",
40
40
  "@progress/kendo-drawing": "^1.21.0",
41
41
  "@progress/kendo-licensing": "^1.5.0",
42
- "@progress/kendo-angular-buttons": "18.5.0-develop.4",
43
- "@progress/kendo-angular-common": "18.5.0-develop.4",
44
- "@progress/kendo-angular-dateinputs": "18.5.0-develop.4",
45
- "@progress/kendo-angular-layout": "18.5.0-develop.4",
46
- "@progress/kendo-angular-dropdowns": "18.5.0-develop.4",
47
- "@progress/kendo-angular-excel-export": "18.5.0-develop.4",
48
- "@progress/kendo-angular-icons": "18.5.0-develop.4",
49
- "@progress/kendo-angular-inputs": "18.5.0-develop.4",
50
- "@progress/kendo-angular-intl": "18.5.0-develop.4",
51
- "@progress/kendo-angular-l10n": "18.5.0-develop.4",
52
- "@progress/kendo-angular-label": "18.5.0-develop.4",
53
- "@progress/kendo-angular-pager": "18.5.0-develop.4",
54
- "@progress/kendo-angular-pdf-export": "18.5.0-develop.4",
55
- "@progress/kendo-angular-popup": "18.5.0-develop.4",
56
- "@progress/kendo-angular-toolbar": "18.5.0-develop.4",
57
- "@progress/kendo-angular-utils": "18.5.0-develop.4",
42
+ "@progress/kendo-angular-buttons": "18.5.0-develop.6",
43
+ "@progress/kendo-angular-common": "18.5.0-develop.6",
44
+ "@progress/kendo-angular-dateinputs": "18.5.0-develop.6",
45
+ "@progress/kendo-angular-layout": "18.5.0-develop.6",
46
+ "@progress/kendo-angular-dropdowns": "18.5.0-develop.6",
47
+ "@progress/kendo-angular-excel-export": "18.5.0-develop.6",
48
+ "@progress/kendo-angular-icons": "18.5.0-develop.6",
49
+ "@progress/kendo-angular-inputs": "18.5.0-develop.6",
50
+ "@progress/kendo-angular-intl": "18.5.0-develop.6",
51
+ "@progress/kendo-angular-l10n": "18.5.0-develop.6",
52
+ "@progress/kendo-angular-label": "18.5.0-develop.6",
53
+ "@progress/kendo-angular-pager": "18.5.0-develop.6",
54
+ "@progress/kendo-angular-pdf-export": "18.5.0-develop.6",
55
+ "@progress/kendo-angular-popup": "18.5.0-develop.6",
56
+ "@progress/kendo-angular-toolbar": "18.5.0-develop.6",
57
+ "@progress/kendo-angular-utils": "18.5.0-develop.6",
58
58
  "rxjs": "^6.5.3 || ^7.0.0"
59
59
  },
60
60
  "dependencies": {
61
61
  "tslib": "^2.3.1",
62
- "@progress/kendo-angular-schematics": "18.5.0-develop.4",
62
+ "@progress/kendo-angular-schematics": "18.5.0-develop.6",
63
63
  "@progress/kendo-common": "^1.0.1",
64
64
  "@progress/kendo-file-saver": "^1.0.0"
65
65
  },
package/schematics/ngAdd/index.js CHANGED
@@ -4,14 +4,14 @@ const schematics_1 = require("@angular-devkit/schematics");
4
4
  function default_1(options) {
5
5
  const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'GridModule', package: 'grid', peerDependencies: {
6
6
  // peer deps of the dropdowns
7
- '@progress/kendo-angular-treeview': '18.5.0-develop.4',
8
- '@progress/kendo-angular-navigation': '18.5.0-develop.4',
7
+ '@progress/kendo-angular-treeview': '18.5.0-develop.6',
8
+ '@progress/kendo-angular-navigation': '18.5.0-develop.6',
9
9
  // peer dependency of kendo-angular-inputs
10
- '@progress/kendo-angular-dialog': '18.5.0-develop.4',
10
+ '@progress/kendo-angular-dialog': '18.5.0-develop.6',
11
11
  // peer dependency of kendo-angular-icons
12
12
  '@progress/kendo-svg-icons': '^4.0.0',
13
13
  // peer dependency of kendo-angular-layout
14
- '@progress/kendo-angular-progressbar': '18.5.0-develop.4'
14
+ '@progress/kendo-angular-progressbar': '18.5.0-develop.6'
15
15
  } });
16
16
  return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
17
17
  }