@progress/kendo-angular-grid 19.1.2-develop.4 → 19.1.2-develop.5

package/editing/form/models.d.ts

@@ -26,135 +26,142 @@ export interface FormControlSettings {
     templateContext?: any;
 }
 /**
- * The configurable settings of the built-in external editing form.
+ * Configures the built-in external editing form.
+ *
+ * @example
+ * ```typescript
+ * const settings: FormSettings = {
+ *   orientation: 'vertical',
+ *   showErrors: true,
+ *   floatingLabels: false,
+ *   fields: {
+ *     name: { label: 'Name', hint: 'Enter a name.' }
+ *   }
+ * };
+ * ```
  */
 export interface FormSettings {
     /**
-     * Allows customizing the label, hint, and error messages for each form control.
+     * Customizes the label, hint, and error messages for each form control.
      */
     fields?: {
         [key: string]: FormFieldSettings;
     };
     /**
-     * Sets the orientation of the elements within the form.
+     * Sets the orientation of the elements in the form.
      *
-     * @default 'vertical'
      */
     orientation?: Orientation;
     /**
-     * Determines whether to display validation errors for each form control.
+     * Shows validation errors for each form control.
      *
-     * @default true
      */
     showErrors?: boolean;
     /**
-     * Determines whether to render `FloatingLabel` components instead of the default `Label` components.
+     * Renders FloatingLabel components instead of the default Label components.
      *
-     * @default false
      */
     floatingLabels?: boolean;
 }
 /**
- * The configurable settings of the form fields in the built-in external editing form.
+ * Configures the form fields in the built-in external editing form.
+ *
+ * @example
+ * ```typescript
+ * const fieldSettings: FormFieldSettings = {
+ *   label: 'Email',
+ *   hint: 'Enter a valid email address.',
+ *   errors: { required: 'Email is required.' }
+ * };
+ * ```
  */
 export interface FormFieldSettings {
     /**
-     * Use this option to pass custom error messages as key-value pairs where the key is the name of the error in
-     * the `FormControl` validators, and the value is the desired error message to be displayed in the form when the control is invalid.
+     * Passes custom error messages as key-value pairs. The key is the error name in the `FormControl` validators, and the value is the error message shown when the control is invalid.
      *
-     * The default error message will follow the pattern `The "{fieldName}" field has "{errorName}" validation error`.
+     * The default error message is `The "{fieldName}" field has "{errorName}" validation error.`
      */
     errors?: {
         [key: string]: string;
     };
     /**
-     * Use this option to provide custom hint text. By default, no hint message will be displayed.
+     * Provides custom hint text. By default, no hint message appears.
      */
     hint?: string;
     /**
-     * Use this option to provide custom label for the respective form control.
-     * By default, the column `title` (or `field` when there is no `title` set) will be displayed.
+     * Provides a custom label for the form control. By default, the column `title` or `field` appears.
      */
     label?: string;
 }
 /**
- * The settings of the external editing Dialog.
+ * Configures the external editing Dialog.
+ *
+ * @example
+ * ```typescript
+ * const dialogSettings: FormDialogSettings = {
+ *   title: 'Edit Item',
+ *   width: 400,
+ *   themeColor: 'primary'
+ * };
+ * ```
  */
 export interface FormDialogSettings {
     /**
-     * Sets the title of the Dialog. If `title` is omitted,
-     * the Dialog will not render a **Close** button.
+     * Sets the title of the Dialog. If the title is omitted, the Dialog does not render a **Close** button.
      */
     title?: string;
     /**
-     * Sets the CSS classes that will be rendered on the Dialog wrapper element.
-     * Supports the union type of values that [ngClass](link:site.data.urls.angular['ngclassapi']) accepts.
+     * Sets the CSS classes for the Dialog wrapper element. Supports the union type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) accepts.
      */
     cssClass?: any;
     /**
-     * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})).
-     * By default the animation type is set to `translate` and its duration is `300ms`.
+     * Configures the Dialog opening animation ([see example]({% slug animations_dialog %})). By default, the animation type is `translate` and its duration is `300ms`.
      */
     animation?: boolean | DialogAnimation;
     /**
-     * Sets the HTML attributes of the Dialog wrapper element.
-     * The property accepts string key-value based pairs.
+     * Sets the HTML attributes of the Dialog wrapper element. Accepts string key-value pairs.
      */
     htmlAttributes?: {
         [key: string]: string;
     };
     /**
-     * Specifies the width of the Dialog.
-     * A numeric value sets the width in pixels.
-     * A string value sets the width in arbitrary units—for example, `50%`.
+     * Sets the width of the Dialog. A number sets the width in pixels. A string sets the width in arbitrary units, for example, `50%`.
      */
     width?: number | string;
     /**
-     * Specifies the minimum width of the Dialog.
-     * A numeric value sets the minimum width in pixels.
-     * A string value sets the minimum width in arbitrary units—for example, `50%`.
+     * Sets the minimum width of the Dialog. A number sets the minimum width in pixels. A string sets the minimum width in arbitrary units, for example, `50%`.
      */
     minWidth?: number | string;
     /**
-     * Specifies the maximum width of the Dialog.
-     * A numeric value sets the maximum width in pixels.
-     * A string value sets the maximum width in arbitrary units—for example, `50%`.
+     * Sets the maximum width of the Dialog. A number sets the maximum width in pixels. A string sets the maximum width in arbitrary units, for example, `50%`.
      */
     maxWidth?: number | string;
     /**
-     * Specifies the height of the Dialog.
-     * A numeric value sets the height in pixels.
-     * A string value sets the height in arbitrary units—for example, `50%`.
+     * Sets the height of the Dialog. A number sets the height in pixels. A string sets the height in arbitrary units, for example, `50%`.
      */
     height?: number | string;
     /**
-     * Specifies the minimum height of the Dialog.
-     * A numeric value sets the minimum height in pixels.
-     * A string value sets the minimum height in arbitrary units—for example, `50%`.
+     * Sets the minimum height of the Dialog. A number sets the minimum height in pixels. A string sets the minimum height in arbitrary units, for example, `50%`.
      */
     minHeight?: number | string;
     /**
-     * Specifies the maximum height of the Dialog.
-     * A numeric value sets the maximum height in pixels.
-     * A string value sets the maximum height in arbitrary units—for example, `50%`.
+     * Sets the maximum height of the Dialog. A number sets the maximum height in pixels. A string sets the maximum height in arbitrary units, for example, `50%`.
      */
     maxHeight?: number | string;
     /**
-     * Defines the container in which the Dialog will be inserted.
-     * Specifying this option changes the place in the page hierarchy where the Dialog will be inserted.
-     * The styling of the Dialog will remain the same.
+     * Defines the container for the Dialog. Setting this option changes where the Dialog appears in the page hierarchy. The Dialog styling stays the same.
      */
     appendTo?: ViewContainerRef;
     /**
-     * Specifies the title of the close button.
+     * Sets the title of the close button.
      */
     closeTitle?: string;
     /**
-     * Specifies the layout of the action buttons in the Dialog.
+     * Sets the layout of the action buttons in the Dialog.
      */
     actionsLayout?: ActionsLayout;
     /**
-     * Specifies the theme color of the Dialog.
+     * Sets the theme color of the Dialog.
      */
     themeColor?: DialogThemeColor;
 }

package/editing/remove-command-tool.directive.d.ts

@@ -10,21 +10,22 @@ import { ContextService } from '../common/provider.service';
 import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
 import * as i0 from "@angular/core";
 /**
- * Represents the `remove` command in the Grid.
- * You can apply this directive to any `kendo-toolbar-button` element inside a
- * ToolbarComponent used in the Grid.
+ * Represents the `remove` command in the Grid. Apply this directive to any `kendo-toolbar-button`
+ * element inside a ToolbarComponent used in the Grid.
  *
- * When the user clicks the toolbar button that is associated with the directive, the
- * [remove]({% slug api_grid_gridcomponent %}#toc-remove) event is triggered.
+ * When you click the toolbar button with this directive, the
+ * [`remove`]({% slug api_grid_gridcomponent %}#toc-remove) event fires.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
- *      <kendo-toolbar>
- *         <kendo-toolbar-button text="Remove row" kendoGridRemoveTool></kendo-toolbar-button>
- *      </kendo-toolbar>
+ *   <kendo-toolbar>
+ *      <kendo-toolbar-button text="Remove row" kendoGridRemoveTool></kendo-toolbar-button>
+ *   </kendo-toolbar>
  * </kendo-grid>
  * ```
+ * @remarks
+ * Applied to: {@link ToolBarButtonComponent}.
  */
 export declare class RemoveCommandToolbarDirective extends ToolbarEditingToolBase {
     editService: EditService;

package/editing/remove-command.directive.d.ts

@@ -9,13 +9,12 @@ import { CellContext } from '../rendering/common/cell-context';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `remove` command of the Grid. You can apply this directive to any `button` element
+ * 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)).
- * When an associated button with the directive is clicked, the
- * [remove]({% slug api_grid_gridcomponent %}#toc-remove) event
- * is triggered.
- * When the row is in the `edit` mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
+ * 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.
  *
  * @example
  * ```html

package/editing/remove-event-args.interface.d.ts

@@ -4,7 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "./edit-event-args.interface";
 /**
- * Arguments for the `remove` event. [See example](slug:inline_editing_grid#toc-removing-records).
+ * Provides the arguments for the `remove` event. [See example](slug:inline_editing_grid#toc-removing-records).
+ *
  */
 export interface RemoveEvent extends EditEvent {
 }

package/editing/save-command-tool.directive.d.ts

@@ -10,21 +10,22 @@ import { ContextService } from '../common/provider.service';
 import { ToolbarEditingToolBase } from './toolbar-editing-tool-base.directive';
 import * as i0 from "@angular/core";
 /**
- * Represents the `save` command in the Grid.
- * You can apply this directive to any `kendo-toolbar-button` element inside a
- * ToolbarComponent used in the Grid.
+ * Represents the `save` command in the Grid. Apply this directive to any `kendo-toolbar-button`
+ * element inside a ToolbarComponent used in the Grid.
  *
- * When the user clicks the toolbar button that is associated with the directive, the
- * [save]({% slug api_grid_gridcomponent %}#toc-save) event is triggered.
+ * When you click the toolbar button with this directive, the
+ * [`save`]({% slug api_grid_gridcomponent %}#toc-save) event fires.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *      <kendo-toolbar>
  *         <kendo-toolbar-button text="Save" kendoGridSaveTool></kendo-toolbar-button>
  *      </kendo-toolbar>
  * </kendo-grid>
  * ```
+ * @remarks
+ * Applied to: {@link ToolBarButtonComponent}.
  */
 export declare class SaveCommandToolbarDirective extends ToolbarEditingToolBase {
     editService: EditService;

package/editing/save-command.directive.d.ts

@@ -9,14 +9,14 @@ import { CellContext } from '../rendering/common/cell-context';
 import { ContextService } from '../common/provider.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `save` command of the Grid. You can apply this directive to any `button`
+ * 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)).
- * When an associated button with the directive is clicked, the
- * [save]({% slug api_grid_gridcomponent %}#toc-save) event
- * is triggered. When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
+ * 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.
  *
- * You can control the content of the button based on the state of the row.
+ * You can change the button content based on the row state.
  *
  * @example
  * ```html

package/editing/save-event-args.interface.d.ts

@@ -5,7 +5,8 @@
 import { EditEvent } from "./edit-event-args.interface";
 import { FormGroup } from "@angular/forms";
 /**
- * Arguments for the `save` event. [See example](slug:inline_editing_grid#toc-saving-records).
+ * Provides the arguments for the `save` event. [See example](slug:inline_editing_grid#toc-saving-records).
+ *
  */
 export interface SaveEvent extends EditEvent {
     /**

package/editing-directives/create-form-group-args.interface.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "../editing/edit-event-args.interface";
 /**
- * The argument that is passed to the `createFormGroup` function.
+ * Represents the argument passed to the `createFormGroup` function.
  */
 export interface CreateFormGroupArgs extends EditEvent {
 }

package/editing-directives/edit-service.interface.d.ts

@@ -3,24 +3,31 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * The interface of the `editService` that can be set to the
- * [editing directives](slug:editing_directives_grid#toc-custom-editing-service) of the Grid.
+ * The interface which must be extended when creating custom edit service.
+ * This interface defines the methods that a custom editing service should implement to handle create, update, and remove operations on grid items.
+ * Set the custom edit service to the `editService` input of the respective editing directive.
+ * [See exampe](slug:editing_directives_grid#toc-custom-editing-service).
  */
 export interface EditService {
     /**
-     * The method that is called to create the items for new rows.
+     * Creates an item for a new row.
+     * @param item The item to create.
      */
     create(item: any): void;
     /**
-     * The method that is called to update the items for existing rows.
+     * Updates an item for an existing row.
+     * @param item The item to update.
      */
     update(item: any): void;
     /**
-     * The method that is called to remove existing rows.
+     * Removes an existing row.
+     * @param item The item to remove.
      */
     remove(item: any): void;
     /**
-     * The method that is called to set new values to an item.
+     * Sets new values to an item.
+     * @param target The target item.
+     * @param source The source of values.
      */
     assignValues(target: any, source: any): void;
 }

package/editing-directives/external-editing.directive.d.ts

@@ -12,23 +12,30 @@ import { EditEvent } from '../editing/edit-event-args.interface';
 import { AdaptiveGridService } from '../common/adaptiveness.service';
 import * as i0 from "@angular/core";
 /**
- * A directive which encapsulates the editing operations of the Grid when using the
+ * 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)).
+ *
+ * @example
+ * ```typescript
+ * <kendo-grid [data]="data" kendoGridExternalEditing></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
  */
 export declare class ExternalEditingDirective extends EditingDirectiveBase {
     protected grid: GridComponent;
     protected localDataChangesService: LocalDataChangesService;
     private adaptiveGridService;
     /**
-     * The function that creates the `FormGroup` for the edited model.
+     * Specifies the function that creates the `FormGroup` for the edited model.
      */
     createFormGroup: CreateFormGroup;
     /**
-     * Allows you to customize form orientation, hints, labels and error messages.
+     * Customizes form orientation, hints, labels, and error messages.
      */
     formSettings: FormSettings;
     /**
-     * Allows you to customize the Dialog that contains the edit form.
+     * Customizes the Dialog that contains the edit form.
      */
     dialogSettings: FormDialogSettings;
     constructor(grid: GridComponent, localDataChangesService: LocalDataChangesService, adaptiveGridService: AdaptiveGridService);

package/editing-directives/in-cell-editing.directive.d.ts

@@ -9,15 +9,21 @@ import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
- * A directive which encapsulates the editing operations of the Grid when using the in-cell
- * editing with 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_directives_grid %}#toc-in-cell-editing)).
+ *
+ * @example
+ * ```typescript
+ * <kendo-grid [data]="data" kendoGridInCellEditing></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
  */
 export declare class InCellEditingDirective extends EditingDirectiveBase {
     protected grid: GridComponent;
     protected localDataChangesService: LocalDataChangesService;
     protected cdr: ChangeDetectorRef;
     /**
-     * The function that creates the `FormGroup` for the edited model.
+     * Specifies the function that creates the `FormGroup` for the edited model.
      */
     createFormGroup: CreateFormGroup;
     constructor(grid: GridComponent, localDataChangesService: LocalDataChangesService, cdr: ChangeDetectorRef);

package/editing-directives/reactive-editing.directive.d.ts

@@ -8,14 +8,20 @@ import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
- * A directive which encapsulates the editing operations of the Grid when using the
- * 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:editing_directives_grid#toc-reactive-editing-directive)).
+ *
+ * @example
+ * ```typescript
+ * <kendo-grid [data]="data" kendoGridReactiveEditing></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
  */
 export declare class ReactiveEditingDirective extends RowEditingDirectiveBase {
     protected grid: GridComponent;
     protected localDataChangesService: LocalDataChangesService;
     /**
-     * The function that creates the `FormGroup` for the edited model.
+     * Specifies the function that creates the `FormGroup` for the edited model.
      */
     createFormGroup: CreateFormGroup;
     constructor(grid: GridComponent, localDataChangesService: LocalDataChangesService);

package/editing-directives/template-editing.directive.d.ts

@@ -7,14 +7,20 @@ import { GridComponent } from '../grid.component';
 import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import * as i0 from "@angular/core";
 /**
- * A directive which encapsulates the editing operations of the Grid when using
- * the 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 editing_directives_grid %}#toc-template-editing-directive)).
+ *
+ * @example
+ * ```typescript
+ * <kendo-grid [data]="data" kendoGridTemplateEditing></kendo-grid>
+ * ```
+ * @remarks
+ * Applied to: {@link GridComponent}.
  */
 export declare class TemplateEditingDirective extends RowEditingDirectiveBase {
     protected grid: GridComponent;
     protected localDataChangesService: LocalDataChangesService;
     /**
-     * The function that creates the `dataItem` for the new rows.
+     * Specifies the function that creates the `dataItem` for new rows.
      */
     createNewItem: Function;
     protected dataItem: any;

package/esm2022/aggregates/status-bar-template.directive.mjs

@@ -5,10 +5,12 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the status bar template of the Grid. Allows you to visualize the aggregates using custom rendering inside the template.
- * The template context has the following field:
- * - `aggregates`—The [SelectionAggregates]({% slug api_grid_selectionaggregates %}) object that contains all calculated aggregates.
- * Use the Angular [ngFor](link:site.data.urls.angular['ngfor']) structural directive combined with the [KeyValuePipe](https://angular.io/api/common/KeyValuePipe)
+ * Represents the status bar template of the Grid. Use this directive to customize how the Grid displays aggregates in the status bar.
+ *
+ * The template context provides:
+ * - `aggregates`—The [`SelectionAggregates`]({% slug api_grid_selectionaggregates %}) object with all calculated aggregates.
+ *
+ * Use the Angular [`ngFor`](link:site.data.urls.angular['ngfor']) structural directive and the [`KeyValuePipe`](https://angular.io/api/common/KeyValuePipe)
  * to loop through the aggregates as key-value pairs.
  */
 export class StatusBarTemplateDirective {

package/esm2022/column-menu/column-locked-change-event.mjs

@@ -7,7 +7,7 @@
  */
 export class ColumnLockedChangeEvent {
     /**
-     * The columns whose locked state is changed.
+     * The columns whose locked state changes.
      */
     columns;
     /**

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

@@ -16,8 +16,8 @@ import * as i1 from "../common/provider.service";
  * Represents the column-menu item for resizing all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-all-columns-item).
  *
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
+ * Place this component inside a [`ColumnMenuTemplate`]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register it as a column menu item, set the [`ColumnMenuService`]({% slug api_grid_columnmenuservice %}) passed by
  * the template to the `service` input of the `kendo-grid-columnmenu-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
@@ -29,6 +29,15 @@ import * as i1 from "../common/provider.service";
  *   </ng-template>
  * </kendo-grid>
  * ```
+ * @example
+ * ```html
+ * <kendo-grid-column field="ProductName">
+ *   <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>
+ * ```
  */
 export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
     ctx;

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

@@ -15,11 +15,10 @@ import * as i1 from "../common/provider.service";
 /**
  * Represents the column-menu item for resizing the specified column to the minimum possible width so that it fits the header or cell content without wrapping.
  * [See example](slug:columnmenu_grid#toc-autosize-column-item).
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
- * 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.
+ * Place this component inside a [`ColumnMenuTemplate`]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * Set the [`ColumnMenuService`]({% slug api_grid_columnmenuservice %}) and `column` passed by
+ * the template to the `service` and `column` inputs of the `kendo-grid-columnmenu-autosize-column` component.
  *
  * @example
  * ```html
@@ -30,11 +29,20 @@ import * as i1 from "../common/provider.service";
  *   </ng-template>
  * </kendo-grid>
  * ```
+ * @example
+ * ```html
+ * <kendo-grid-column field="ProductName">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-autosize-column [column]="column" [service]="service">
+ *     </kendo-grid-columnmenu-autosize-column>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
     ctx;
     /**
-     * The Grid column instance which will be resized through the auto size column option.
+     * Specifies the Grid column instance to resize with the auto size column option.
      */
     column;
     maxWidthIcon = maxWidthIcon;
@@ -49,7 +57,7 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
         }
     }
     /**
-     * Resizes a specified column to the minimum possible width so that it fits the widest header or cell content without wrapping.
+     * Resizes the specified column to the minimum possible width so that it fits the widest header or cell content without wrapping.
      */
     autoSizeColumn() {
         autoSizeColumn(this.ctx.grid, this.service, this.column);

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

@@ -16,9 +16,9 @@ import * as i2 from "../common/column-info.service";
 /**
  * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
  *
- * The component can be placed inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * To register the component as a known column menu item, set the [ColumnMenuService]({% slug api_grid_columnmenuservice %}) that is passed by
- * the template to the service input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
+ * Place this component inside a [`ColumnMenuTemplate`]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * To register it as a column menu item, set the [`ColumnMenuService`]({% slug api_grid_columnmenuservice %}) passed by
+ * the template to the `service` input of the `kendo-grid-columnmenu-chooser` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
  * ```html
@@ -28,6 +28,14 @@ import * as i2 from "../common/column-info.service";
  *   </ng-template>
  * </kendo-grid>
  * ```
+ * @example
+ * ```html
+ * <kendo-grid-column field="ProductName">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-chooser [service]="service"></kendo-grid-columnmenu-chooser>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     ctx;
@@ -35,11 +43,11 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     changeDetector;
     hostElement;
     /**
-     * Fires when the content is expanded.
+     * Fires when the content expands.
      */
     expand = new EventEmitter();
     /**
-     * Fires when the content is collapsed.
+     * Fires when the content collapses.
      */
     collapse = new EventEmitter();
     /**