@progress/kendo-angular-grid 12.0.0 → 12.0.1-develop.2

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "./edit-event-args.interface";
 /**
- * Arguments for the `add` event.
+ * Arguments for the [`add`](slug:api_grid_gridcomponent#toc-add) event. [See example](slug:inline_editing_grid#toc-adding-records).
  */
 export interface AddEvent extends EditEvent {
 }

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { SaveEvent } from "./save-event-args.interface";
 /**
- * Arguments for the `cancel` event.
+ * Arguments for the [`cancel`](slug:api_grid_gridcomponent#toc-cancel) event. [See example](slug:inline_editing_grid#toc-canceling-editing).
  */
 export interface CancelEvent extends SaveEvent {
 }

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

@@ -15,10 +15,10 @@ import * as i0 from "@angular/core";
  * [edit]({% slug api_grid_gridcomponent %}#toc-edit) event
  * is triggered ([see example]({% slug basics_editing_grid %})).
  *
- * > When the row is in the edit mode, the button with `kendoGridEditCommand` is automatically hidden.
+ * When the row is in the `edit` mode, the button with `kendoGridEditCommand` is automatically hidden.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate>

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import type { GridComponent } from "../grid.component";
 /**
- * Arguments for the `remove` event.
+ * Arguments for the [`edit`](slug:api_grid_gridcomponent#toc-edit) event.
  */
 export interface EditEvent {
     /**

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

@@ -10,8 +10,7 @@ import * as i0 from "@angular/core";
  * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
  *
  * The template context is set to the current form group and the following additional fields are passed:
- * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
- * If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax, for example, `let-formGroup`. If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
  * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.
  * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.

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

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

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

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

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 /**
  * The interface of the `editService` that can be set to the
- * [editing directives]({% slug editing_directives_grid %}#toc-custom-service) of the Grid.
+ * [editing directives](slug:editing_directives_grid#toc-custom-editing-service) of the Grid.
  */
 export interface EditService {
     /**

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

@@ -16,27 +16,18 @@ import * as i3 from "@progress/kendo-angular-popup";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "./column-list.component";
 /**
- * Represents the component for selecting columns in the Grid. To enable the user to show or hide columns,
- * add the component inside a [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}) directive.
+ * Represents the component for toggling the visibility of the Grid columns. [See example](slug:columnmenu_grid#toc-using-standalone-column-chooser).
+ * To show and hide the columns without including the column chooser item in the [Column Menu](slug:columnmenu_grid),
+ * add the component inside the [ToolbarTemplate](slug:toolbartemplate_grid) directive.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data">
- *          <ng-template kendoGridToolbarTemplate>
- *             <kendo-grid-column-chooser></kendo-grid-column-chooser>
- *          </ng-template>
- *          <kendo-grid-column field="Field1"></kendo-grid-column>
- *          <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
+ * ```html
+ * <kendo-grid [data]="data">
+ *   <ng-template kendoGridToolbarTemplate>
+ *     <kendo-grid-column-chooser></kendo-grid-column-chooser>
+ *   </ng-template>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export class ColumnChooserComponent {
@@ -53,10 +44,14 @@ export class ColumnChooserComponent {
         this.columnsIcon = columnsIcon;
         /**
          * Specifies if the changes in the visibility of the column will be immediately applied.
+         *
+         * @default false
          */
         this.autoSync = false;
         /**
          * Specifies if all columns can be hidden.
+         *
+         * @default true
          */
         this.allowHideAll = true;
     }

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

@@ -15,36 +15,21 @@ 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`.
+ * 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).
  *
- * > 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.
+ * 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-autosize-all-columns` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @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' }];
- * }
- *
+ * ```html
+ * <kendo-grid [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>
  * ```
  */
 export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
@@ -60,6 +45,9 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
             console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
         }
     }
+    /**
+     * Resizes all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+     */
     autoSizeAllColumns() {
         autoSizeColumn(this.ctx.grid, this.service);
     }

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

@@ -15,36 +15,22 @@ 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.
+ * 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: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).
  *
- * > 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.
+ * 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' }];
- * }
- *
+ * ```html
+ * <kendo-grid [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>
  * ```
  */
 export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
@@ -60,6 +46,9 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
             console.warn(ColunnMenuErrorMessages.autoSizeColumn);
         }
     }
+    /**
+     * Resizes a 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/esm2020/column-menu/column-menu-chooser.component.mjs

@@ -14,33 +14,19 @@ import * as i3 from "./column-menu-item.component";
 import * as i4 from "./column-list.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 /**
- * Represents the component for selecting columns in the Grid that can be placed
- * inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * Represents the column-menu item for selecting columns in the Grid. [See example](slug:columnmenu_grid#toc-column-chooser-item).
  *
- * > 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-chooser` component.
+ * 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).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-chooser [service]="service">
- *              </kendo-grid-columnmenu-chooser>
- *          </ng-template>
- *          <kendo-grid-column field="Field1"></kendo-grid-column>
- *          <kendo-grid-column field="Field2" [hidden]="true"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
- *
+ * ```html
+ * <kendo-grid [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-chooser [service]="service"> </kendo-grid-columnmenu-chooser>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
@@ -60,6 +46,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**

package/esm2020/column-menu/column-menu-filter.component.mjs

@@ -12,33 +12,20 @@ import * as i2 from "./column-menu-item.component";
 import * as i3 from "../filtering/menu/filter-menu-container.component";
 import * as i4 from "./column-menu-item-content-template.directive";
 /**
- * Represents the component for editing column filters in the Grid that can be placed
- * inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * Represents the column-menu item for editing column filters in the Grid. [See example](slug:columnmenu_grid#toc-filter-item).
  *
- * > 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-filter` component.
+ * 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-filter` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [kendoGridBinding]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-filter [service]="service">
- *              </kendo-grid-columnmenu-filter>
- *          </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' }];
- * }
- *
+ * ```html
+ * <kendo-grid [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-filter [service]="service">
+ *     </kendo-grid-columnmenu-filter>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
@@ -56,6 +43,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**

package/esm2020/column-menu/column-menu-item.component.mjs

@@ -13,27 +13,12 @@ import * as i2 from "@angular/common";
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true" [resizable]="true" #grid>
- *          <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
- *              <kendo-grid-columnmenu-item icon="arrows-resizing" text="Fit column"
- *                  (itemClick)="grid.autoFitColumn(column); service.close()">
- *              </kendo-grid-columnmenu-item>
- *          </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' }];
- * }
- *
+ * ```html
+ * <kendo-grid [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
+ *     <kendo-grid-columnmenu-item text="Fit column"></kendo-grid-columnmenu-item>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuItemComponent {

package/esm2020/column-menu/column-menu-lock.component.mjs

@@ -12,34 +12,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 /**
- * Represents a column-menu item that can be placed inside a
- * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * Allows the user to lock or unlock the columns.
+ * Represents the column-menu item for locking and unlocking columns in the Grid. [See example](slug:columnmenu_grid#toc-lock-and-unlock-items).
  *
- * > 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-lock` component.
+ * 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-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-lock [service]="service">
- *              </kendo-grid-columnmenu-lock>
- *          </ng-template>
- *          <kendo-grid-column field="Field1" [width]="100"></kendo-grid-column>
- *          <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-lock [service]="service">
+ *     </kendo-grid-columnmenu-lock>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuLockComponent extends ColumnMenuItemBase {

package/esm2020/column-menu/column-menu-position.component.mjs

@@ -14,33 +14,20 @@ import * as i4 from "./column-menu-stick.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 import * as i6 from "@angular/common";
 /**
- * Represents the component for editing column filters in the Grid that can be placed
- * inside a [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
+ * Represents the column-menu item which combines the lock and sticky column functionalities.
  *
- * > 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-filter` component.
+ * 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-filter` component. [See example](slug:columnmenu_grid#toc-set-column-position-item).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [kendoGridBinding]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-filter [service]="service">
- *              </kendo-grid-columnmenu-filter>
- *          </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' }];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service" let-column="column">
+ *     <kendo-grid-columnmenu-position [service]="service" [showLock]="true" [showStick]="true">
+ *     </kendo-grid-columnmenu-position>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
@@ -58,6 +45,7 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**

package/esm2020/column-menu/column-menu-sort.component.mjs

@@ -13,34 +13,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/sort.service";
 import * as i3 from "./column-menu-item.component";
 /**
- * Represents a column-menu item for sorting Grid columns that can be placed inside a
- * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * Allows the user to sort the column.
+ * Represents the column-menu item for sorting Grid columns.
+ * [See example](slug:columnmenu_grid#toc-sort-item).
  *
- * > 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-sort` component.
+ * 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-sort` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-sort [service]="service">
- *              </kendo-grid-columnmenu-sort>
- *          </ng-template>
- *          <kendo-grid-column field="Field1" [width]="100"></kendo-grid-column>
- *          <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }, { Field1: 'Foo1', Field2: 'Bar1' }];
- * }
- *
+ * ```html
+ * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-sort [service]="service">
+ *     </kendo-grid-columnmenu-sort>
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export class ColumnMenuSortComponent extends ColumnMenuItemBase {

package/esm2020/column-menu/column-menu-stick.component.mjs

@@ -12,33 +12,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "./column-menu-item.component";
 /**
- * Represents a column-menu item that can be placed inside a
- * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
- * Allows the user to stick or unstick the columns.
+ * Represents the column-menu item that sticks or unsticks columns in the Grid.
+ * [See example](slug:columnmenu_grid#toc-stick-and-unstick-items).
  *
- * > 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-stick` component.
+ * 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-lock` component. [See example](slug:columnmenu_grid#toc-customizing-the-content).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-stick [service]="service">
- *              </kendo-grid-columnmenu-stick>
- *          </ng-template>
- *          <kendo-grid-column field="Field1" [width]="100"></kendo-grid-column>
- *          <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *      <kendo-grid-columnmenu-stick [service]="service">
+ *      </kendo-grid-columnmenu-stick>
+ *   </ng-template>
+ * </kendo-grid>
  *
  * ```
  */

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

@@ -34,7 +34,15 @@ import * as i16 from "@angular/common";
 import * as i17 from "./column-menu-item.directive";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
- * Represents the [column menu]({% slug columnmenu_grid %}) component.
+ * Represents the [column menu](slug:columnmenu_grid#toc-customizing-the-position) component.
+ *
+ * <kendo-grid ...>
+ *   <kendo-grid-column field="ProductName" [columnMenu]="false">
+ *     <ng-template kendoGridHeaderTemplate let-column>
+ *        <kendo-grid-column-menu [column]="column"> </kendo-grid-column-menu>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
  */
 export class ColumnMenuComponent {
     constructor(navigationService, popupService, localization, service, ctx) {