@progress/kendo-angular-grid 7.3.3 → 7.4.0

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

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ContextService } from '../common/provider.service';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import * as i0 from "@angular/core";
+/**
+ * Represents the component for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * > To enable the autosize-all-columns option, set the [`resizable`]({% slug api_grid_gridcomponent %}#toc-resizable)
+ * > property of the Grid to `true`.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * > the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <kendo-grid-columnmenu-autosize-all-columns [service]="service">
+ *              </kendo-grid-columnmenu-autosize-all-columns>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export declare class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase implements OnInit {
+    localization: LocalizationService;
+    ctx: ContextService;
+    constructor(localization: LocalizationService, ctx: ContextService);
+    ngOnInit(): void;
+    autoSizeAllColumns(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuAutoSizeAllColumnsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuAutoSizeAllColumnsComponent, "kendo-grid-columnmenu-autosize-all-columns", never, {}, {}, never, never>;
+}

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

@@ -0,0 +1,55 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnInit } from '@angular/core';
+import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { ContextService } from '../common/provider.service';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import * as i0 from "@angular/core";
+/**
+ * Represents the component for resizing the specified column to the minimum possible width so that it fits the header or cell content without wrapping.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * > To enable the autosize-column option, set the [`resizable`]({% slug api_grid_gridcomponent %}#toc-resizable)
+ * > property of the Grid to `true`.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) and `column` that are passed by
+ * > the template to the `service` and `column` input of the `kendo-grid-columnmenu-autosize-column` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
+ *              <kendo-grid-columnmenu-autosize-column [column]="column" [service]="service">
+ *              </kendo-grid-columnmenu-autosize-column>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export declare class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase implements OnInit {
+    localization: LocalizationService;
+    ctx: ContextService;
+    /**
+     * The Grid column instance which will be resized through the auto size column option.
+     */
+    column: any;
+    constructor(localization: LocalizationService, ctx: ContextService);
+    ngOnInit(): void;
+    autoSizeColumn(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuAutoSizeColumnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuAutoSizeColumnComponent, "kendo-grid-columnmenu-autosize-column", never, { "column": "column"; }, {}, never, never>;
+}

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

@@ -15,7 +15,6 @@ import * as i0 from "@angular/core";
  * > the template to the service input of the `kendo-grid-columnmenu-chooser` component.
  *
  * @example
- * {% meta height:300 %}
  * ```ts-preview
  *
  * _@Component({
@@ -37,7 +36,6 @@ import * as i0 from "@angular/core";
  * }
  *
  * ```
- * {% endmeta %}
  */
 export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     localization: LocalizationService;

package/column-menu/column-menu-settings.interface.d.ts

@@ -60,4 +60,14 @@ export interface ColumnMenuSettings {
      * @default false
      */
     setColumnPosition?: boolean | ExpandableColumnMenuItem;
+    /**
+     * Applies the minimum possible width for the specified column, so that the whole text fits without wrapping.
+     * @default false
+     */
+    autoSizeColumn?: boolean;
+    /**
+     * Adjusts the width of all columns to fit their entire content, including headers, without wrapping.
+     * @default false
+     */
+    autoSizeAllColumns?: boolean;
 }

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

@@ -3,20 +3,22 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { NavigationService } from './../navigation/navigation.service';
-import { TemplateRef, OnChanges, OnDestroy, ElementRef } from '@angular/core';
+import { TemplateRef, OnChanges, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnMenuSettings } from './column-menu-settings.interface';
+import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
  * Represents the [column menu]({% slug columnmenu_grid %}) component.
  */
-export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
+export declare class ColumnMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
+    protected navigationService: NavigationService;
     protected popupService: SinglePopupService;
     localization: LocalizationService;
     service: ColumnMenuService;
-    protected navigationService: NavigationService;
+    private ctx;
     /**
      * @hidden
      */
@@ -67,7 +69,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
     expandedPosition: boolean;
     private popupRef;
     private closeSubscription;
-    constructor(popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService, navigationService: NavigationService);
+    constructor(navigationService: NavigationService, popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService, ctx: ContextService);
     /**
      * @hidden
      */
@@ -84,6 +86,14 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
      * @hidden
      */
     get hasColumnChooser(): boolean;
+    /**
+     * @hidden
+     */
+    get hasAutoSizeColumn(): boolean;
+    /**
+     * @hidden
+     */
+    get hasAutoSizeAllColumns(): boolean;
     /**
      * @hidden
      */
@@ -96,6 +106,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
      * @hidden
      */
     get hasPosition(): boolean;
+    ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
     /**

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

@@ -17,14 +17,16 @@ import * as i11 from "./column-menu-container.component";
 import * as i12 from "./column-menu-item.directive";
 import * as i13 from "./column-menu-stick.component";
 import * as i14 from "./column-menu-position.component";
-import * as i15 from "@angular/common";
-import * as i16 from "../filtering/menu/filter-menu.module";
+import * as i15 from "./column-menu-autosize.component";
+import * as i16 from "./column-menu-autosize-all.component";
+import * as i17 from "@angular/common";
+import * as i18 from "../filtering/menu/filter-menu.module";
 /**
  * @hidden
  */
 export declare class ColumnMenuModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent], [typeof i15.CommonModule, typeof i16.FilterMenuModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent], [typeof i17.CommonModule, typeof i18.FilterMenuModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ColumnMenuModule>;
 }

package/column-menu/utils.d.ts

@@ -26,6 +26,18 @@ export declare const hasPosition: (settings: any, column: any) => boolean;
  * @hidden
  */
 export declare const hasColumnChooser: (settings: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const hasAutoSizeColumn: (settings: any) => boolean;
+/**
+* @hidden
+*/
+export declare const hasAutoSizeAllColumns: (settings: any) => boolean;
+/**
+ * @hidden
+ */
+export declare const autoSizeColumn: (grid: any, service: any, column?: any) => void;
 /**
  * @hidden
  */

package/common/error-messages.d.ts

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export declare const ColunnMenuErrorMessages: any;

package/esm2015/column-menu/column-menu-autosize-all.component.js

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, isDevMode } from '@angular/core';
+import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import { autoSizeColumn } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/provider.service";
+import * as i3 from "./column-menu-item.component";
+import * as i4 from "@angular/common";
+/**
+ * Represents the component for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * > To enable the autosize-all-columns option, set the [`resizable`]({% slug api_grid_gridcomponent %}#toc-resizable)
+ * > property of the Grid to `true`.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * > the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *              <kendo-grid-columnmenu-autosize-all-columns [service]="service">
+ *              </kendo-grid-columnmenu-autosize-all-columns>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
+    constructor(localization, ctx) {
+        super();
+        this.localization = localization;
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
+        if (isVirtualColumns && isDevMode()) {
+            console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+        }
+    }
+    autoSizeAllColumns() {
+        autoSizeColumn(this.ctx.grid, this.service);
+    }
+}
+ColumnMenuAutoSizeAllColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns", usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-columnmenu-item
+            *ngIf="!this.ctx.grid.virtualColumns"
+            [text]="localization.get('autosizeAllColumns')"
+            icon="display-inline-block"
+            (itemClick)="autoSizeAllColumns()"
+        >
+        </kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-autosize-all-columns',
+                    template: `
+        <kendo-grid-columnmenu-item
+            *ngIf="!this.ctx.grid.virtualColumns"
+            [text]="localization.get('autosizeAllColumns')"
+            icon="display-inline-block"
+            (itemClick)="autoSizeAllColumns()"
+        >
+        </kendo-grid-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ContextService }]; } });

package/esm2015/column-menu/column-menu-autosize.component.js

@@ -0,0 +1,91 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, isDevMode } from '@angular/core';
+import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { ColumnMenuItemBase } from './column-menu-item-base';
+import { autoSizeColumn } from './utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "../common/provider.service";
+import * as i3 from "./column-menu-item.component";
+import * as i4 from "@angular/common";
+/**
+ * Represents the component for resizing the specified column to the minimum possible width so that it fits the header or cell content without wrapping.
+ * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ *
+ * > To enable the autosize-column option, set the [`resizable`]({% slug api_grid_gridcomponent %}#toc-resizable)
+ * > property of the Grid to `true`.
+ *
+ * > You have to set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) and `column` that are passed by
+ * > the template to the `service` and `column` input of the `kendo-grid-columnmenu-autosize-column` component.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *       <kendo-grid [data]="data" [columnMenu]="true">
+ *          <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
+ *              <kendo-grid-columnmenu-autosize-column [column]="column" [service]="service">
+ *              </kendo-grid-columnmenu-autosize-column>
+ *          </ng-template>
+ *          <kendo-grid-column field="Field1"></kendo-grid-column>
+ *          <kendo-grid-column field="Field2"></kendo-grid-column>
+ *       </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ * }
+ *
+ * ```
+ */
+export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
+    constructor(localization, ctx) {
+        super();
+        this.localization = localization;
+        this.ctx = ctx;
+    }
+    ngOnInit() {
+        const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
+        if (isVirtualColumns && isDevMode()) {
+            console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+        }
+    }
+    autoSizeColumn() {
+        autoSizeColumn(this.ctx.grid, this.service, this.column);
+    }
+}
+ColumnMenuAutoSizeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: `
+        <kendo-grid-columnmenu-item
+            *ngIf="!this.ctx.grid.virtualColumns"
+            class="k-grid-columnmenu-autosize-column"
+            [text]="localization.get('autosizeThisColumn')"
+            icon="max-width"
+            (itemClick)="autoSizeColumn()"
+        >
+        </kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-columnmenu-autosize-column',
+                    template: `
+        <kendo-grid-columnmenu-item
+            *ngIf="!this.ctx.grid.virtualColumns"
+            class="k-grid-columnmenu-autosize-column"
+            [text]="localization.get('autosizeThisColumn')"
+            icon="max-width"
+            (itemClick)="autoSizeColumn()"
+        >
+        </kendo-grid-columnmenu-item>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ContextService }]; }, propDecorators: { column: [{
+                type: Input
+            }] } });

package/esm2015/column-menu/column-menu-chooser.component.js

@@ -18,7 +18,6 @@ import * as i5 from "./column-menu-item-content-template.directive";
  * > the template to the service input of the `kendo-grid-columnmenu-chooser` component.
  *
  * @example
- * {% meta height:300 %}
  * ```ts-preview
  *
  * _@Component({
@@ -40,7 +39,6 @@ import * as i5 from "./column-menu-item-content-template.directive";
  * }
  *
  * ```
- * {% endmeta %}
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     constructor(localization, columnInfoService, changeDetector, hostElement) {

package/esm2015/column-menu/column-menu.component.js

@@ -3,35 +3,40 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { MenuTabbingService } from './../filtering/menu/menu-tabbing.service';
-import { Component, Input, TemplateRef, HostBinding, ViewChild } from '@angular/core';
+import { Component, Input, TemplateRef, HostBinding, ViewChild, isDevMode } from '@angular/core';
 import { ColumnMenuService } from './column-menu.service';
 import { filtersByField } from '../filtering/base-filter-cell.component';
-import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasPosition } from './utils';
+import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeColumn, hasPosition, hasAutoSizeAllColumns } from './utils';
 import { replaceMessagePlaceholder } from '../utils';
+import { ColunnMenuErrorMessages } from '../common/error-messages';
 import * as i0 from "@angular/core";
-import * as i1 from "../common/single-popup.service";
-import * as i2 from "@progress/kendo-angular-l10n";
-import * as i3 from "./column-menu.service";
-import * as i4 from "./../navigation/navigation.service";
-import * as i5 from "./column-menu-container.component";
-import * as i6 from "./column-menu-sort.component";
-import * as i7 from "./column-menu-lock.component";
-import * as i8 from "./column-menu-stick.component";
-import * as i9 from "./column-menu-position.component";
-import * as i10 from "./column-menu-chooser.component";
-import * as i11 from "./column-menu-filter.component";
-import * as i12 from "@angular/common";
-import * as i13 from "./column-menu-item.directive";
+import * as i1 from "./../navigation/navigation.service";
+import * as i2 from "../common/single-popup.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "./column-menu.service";
+import * as i5 from "../common/provider.service";
+import * as i6 from "./column-menu-container.component";
+import * as i7 from "./column-menu-sort.component";
+import * as i8 from "./column-menu-lock.component";
+import * as i9 from "./column-menu-stick.component";
+import * as i10 from "./column-menu-position.component";
+import * as i11 from "./column-menu-chooser.component";
+import * as i12 from "./column-menu-autosize.component";
+import * as i13 from "./column-menu-autosize-all.component";
+import * as i14 from "./column-menu-filter.component";
+import * as i15 from "@angular/common";
+import * as i16 from "./column-menu-item.directive";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
  * Represents the [column menu]({% slug columnmenu_grid %}) component.
  */
 export class ColumnMenuComponent {
-    constructor(popupService, localization, service, navigationService) {
+    constructor(navigationService, popupService, localization, service, ctx) {
+        this.navigationService = navigationService;
         this.popupService = popupService;
         this.localization = localization;
         this.service = service;
-        this.navigationService = navigationService;
+        this.ctx = ctx;
         /**
          * @hidden
          */
@@ -87,6 +92,18 @@ export class ColumnMenuComponent {
     get hasColumnChooser() {
         return hasColumnChooser(this.settings);
     }
+    /**
+     * @hidden
+     */
+    get hasAutoSizeColumn() {
+        return hasAutoSizeColumn(this.settings);
+    }
+    /**
+     * @hidden
+     */
+    get hasAutoSizeAllColumns() {
+        return hasAutoSizeAllColumns(this.settings);
+    }
     /**
      * @hidden
      */
@@ -105,6 +122,18 @@ export class ColumnMenuComponent {
     get hasPosition() {
         return hasPosition(this.settings, this.column);
     }
+    ngAfterViewInit() {
+        if (this.ctx.grid.virtualColumns && isDevMode()) {
+            if (this.settings.autoSizeAllColumns) {
+                this.settings.autoSizeAllColumns = false;
+                console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
+            }
+            if (this.settings.autoSizeColumn) {
+                this.settings.autoSizeColumn = false;
+                console.warn(ColunnMenuErrorMessages.autoSizeColumn);
+            }
+        }
+    }
     ngOnChanges() {
         this.service.column = this.column;
         this.service.sort = this.sort;
@@ -161,7 +190,7 @@ export class ColumnMenuComponent {
         return typeof (menuItemSettings) === 'object' ? menuItemSettings.expanded : false;
     }
 }
-ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.SinglePopupService }, { token: i2.LocalizationService }, { token: i3.ColumnMenuService }, { token: i4.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuComponent, deps: [{ token: i1.NavigationService }, { token: i2.SinglePopupService }, { token: i3.LocalizationService }, { token: i4.ColumnMenuService }, { token: i5.ContextService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColumnMenuComponent, 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: [
         ColumnMenuService,
         MenuTabbingService
@@ -201,6 +230,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [service]="service"
                     [expanded]="expandedPosition">
                 </kendo-grid-columnmenu-position>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-chooser
                     #chooserItem
                     *ngIf="hasColumnChooser"
@@ -208,6 +238,23 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                     [service]="service"
                     [expanded]="expandedColumns">
                 </kendo-grid-columnmenu-chooser>
+                <kendo-grid-columnmenu-autosize-column
+                    #autoSizeColumnItem
+                    *ngIf="hasAutoSizeColumn"
+                    [service]="service"
+                    [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                    [column]="column"
+                >
+                </kendo-grid-columnmenu-autosize-column>
+
+                <kendo-grid-columnmenu-autosize-all-columns
+                    #autoSizeAllColumnsItem
+                    *ngIf="hasAutoSizeAllColumns"
+                    [service]="service"
+                    [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                >
+                </kendo-grid-columnmenu-autosize-all-columns>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-filter
                     #filterItem
                     *ngIf="hasFilter"
@@ -217,7 +264,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i6.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i7.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i8.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i9.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i10.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i11.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
+    `, isInline: true, components: [{ type: i6.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i7.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i8.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i9.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i10.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i11.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i13.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i14.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -262,6 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [service]="service"
                     [expanded]="expandedPosition">
                 </kendo-grid-columnmenu-position>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-chooser
                     #chooserItem
                     *ngIf="hasColumnChooser"
@@ -269,6 +317,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     [service]="service"
                     [expanded]="expandedColumns">
                 </kendo-grid-columnmenu-chooser>
+                <kendo-grid-columnmenu-autosize-column
+                    #autoSizeColumnItem
+                    *ngIf="hasAutoSizeColumn"
+                    [service]="service"
+                    [kendoGridColumnMenuItem]="autoSizeColumnItem"
+                    [column]="column"
+                >
+                </kendo-grid-columnmenu-autosize-column>
+
+                <kendo-grid-columnmenu-autosize-all-columns
+                    #autoSizeAllColumnsItem
+                    *ngIf="hasAutoSizeAllColumns"
+                    [service]="service"
+                    [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                >
+                </kendo-grid-columnmenu-autosize-all-columns>
+                <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasColumnChooser || hasAutoSizeColumn || hasAutoSizeAllColumns" class="k-separator"></span>
                 <kendo-grid-columnmenu-filter
                     #filterItem
                     *ngIf="hasFilter"
@@ -280,7 +345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.SinglePopupService }, { type: i2.LocalizationService }, { type: i3.ColumnMenuService }, { type: i4.NavigationService }]; }, propDecorators: { standalone: [{
+        }], ctorParameters: function () { return [{ type: i1.NavigationService }, { type: i2.SinglePopupService }, { type: i3.LocalizationService }, { type: i4.ColumnMenuService }, { type: i5.ContextService }]; }, propDecorators: { standalone: [{
                 type: HostBinding,
                 args: ['class.k-grid-column-menu-standalone']
             }, {