npm - @progress/kendo-angular-grid - Versions diffs - 12.0.0-develop.9 → 12.0.1-develop.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/fesm2020/progress-kendo-angular-grid.mjs CHANGED Viewed

@@ -169,7 +169,8 @@ const replaceMessagePlaceholder = (message, name, value) => message.replace(new
  * Represents the Kendo UI GridSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
  * and provides a way for customizing the spacer width.
- * It can also be used in any flex container within the Grid.
+ * It can also be used in any flex container within the Grid
+ * ([see example](slug:toolbartemplate_grid#toc-defining-the-spacing-between-toolbar-elements)).
  */
 class GridSpacerComponent {
     constructor() {
@@ -1035,7 +1036,7 @@ class PreventableEvent {
         this.prevented = true;
     }
     /**
-     * Returns `true` if the event was prevented
+     * Returns a respective boolean if the event was prevented
      * by any of its subscribers.
      *
      * @returns `true` if the default action was prevented.
@@ -2826,8 +2827,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1681884669,
-    version: '12.0.0-develop.9',
+    publishDate: 1683028339,
+    version: '12.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -3190,9 +3191,9 @@ class ColumnBase {
          */
         this.matchesMedia = true;
         /**
-         * The column index after reordering.
+         * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
          *
-         * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+         * @default 0
          */
         this.orderIndex = 0;
         /**
@@ -3215,6 +3216,7 @@ class ColumnBase {
         this.reorderable = true;
         /**
          * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+         * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
          * @default 10
          */
         this.minResizableWidth = 10;
@@ -3227,18 +3229,22 @@ class ColumnBase {
         this.sticky = false;
         /**
          * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+         * @default true
          */
         this.lockable = true;
         /**
          * Specifies if the column can be stuck or unstuck from the column menu.
+         * @default true
          */
         this.stickable = true;
         /**
          * Specifies if the column menu will be shown for the column.
+         * @default true
          */
         this.columnMenu = true;
         /**
          * Specifies if the column will be included in the column-chooser list.
+         * @default true
          */
         this.includeInChooser = true;
         /**
@@ -3286,44 +3292,6 @@ class ColumnBase {
      *
      * @default false
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value) {
         this._locked = value;
@@ -3503,113 +3471,56 @@ function isColumnComponent(column) {
     return isPresent(column.field);
 }
 /**
- * Represents the columns of the [Angular Data Grid]({% slug overview_grid %}).
+ * Represents the column of the Grid. [See example](slug:columns_config#toc-using-the-column-component)
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="Discontinued" [width]="120">
- *              <ng-template kendoGridCellTemplate let-dataItem>
- *                  <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
- *              </ng-template>
- *          </kendo-grid-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   <kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
+ *   <kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class ColumnComponent extends ColumnBase {
     constructor(parent, idService) {
         super(parent, idService);
         /**
-         * Allows the column headers to be clicked and the `sortChange` event emitted.
-         * You have to handle the `sortChange` event yourself and sort the data.
+         * Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
+         *
+         * @default true
          */
         this.sortable = true;
         /**
-         * Determines if the column can be dragged to the group panel. The default value is `true`.
+         * Determines if the column can be dragged to the group panel.
          * If set to `false`, you can group the columns by the column field by using the API of the Grid.
+         *
+         * @default true
          */
         this.groupable = true;
         /**
-         * Defines the editor type ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms)).
-         * Used when the column enters the edit mode. The default value is `text`.
+         * Defines the editor type. [See example](slug:inline_editing_grid#toc-using-reactive-forms).
+         * Used when the column enters the edit mode.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-grid>
-         *    <kendo-grid-column field="UnitPrice" editor="numeric">
-         *    </kendo-grid-column>
-         * </kendo-grid>
-         * ```
+         * @default 'text'
          */
         this.editor = 'text';
         /**
-         * Defines the filter type that is displayed inside the filter row. The default value is `text`.
+         * Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
          *
-         * @example
-         * ```html-no-run
-         * <kendo-grid>
-         *    <kendo-grid-column field="UnitPrice" filter="numeric">
-         *    </kendo-grid-column>
-         * </kendo-grid>
-         * ```
+         * @default 'text'
          */
         this.filter = 'text';
         /**
-         * Defines if a filter UI will be displayed for this column. The default value is `true`.
+         * Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
          *
-         * @example
-         * ```html-no-run
-         * <kendo-grid>
-         *    <kendo-grid-column field="UnitPrice" [filterable]="false">
-         *    </kendo-grid-column>
-         * </kendo-grid>
-         * ```
+         * @default true
          */
         this.filterable = true;
         /**
-         * Defines whether the column is editable. The default value is `true`.
+         * Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
          *
-         * @example
-         * ```html-no-run
-         * <kendo-grid>
-         *    <kendo-grid-column field="UnitPrice" [editable]="false">
-         *    </kendo-grid-column>
-         * </kendo-grid>
-         * ```
+         * @default true
          */
         this.editable = true;
     }
@@ -3718,62 +3629,15 @@ function isSpanColumnComponent(column) {
  * [grouping]({% slug grouping_grid %}). Wrap the columns that will be
  * merged inside the `<kendo-grid-span-column>` tag.
  *
- * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid
- *              [sortable]="true"
- *              [filterable]="true"
- *              [kendoGridBinding]="products">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-span-column>
- *              <kendo-grid-column field="ProductName" title="Product Name">
- *              </kendo-grid-column>
- *              <kendo-grid-column field="UnitPrice" title="Unit Price" filter="numeric" [width]="180" format="{0:c}">
- *              </kendo-grid-column>
- *          </kendo-grid-span-column>
- *          <kendo-grid-column field="Discontinued" [width]="120" filter="boolean">
- *              <ng-template kendoGridCellTemplate let-dataItem>
- *                  <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
- *              </ng-template>
- *          </kendo-grid-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *   public products = [{
- *      "ProductID": 1,
- *      "ProductName": "Chai",
- *      "UnitPrice": 18.0000,
- *      "Discontinued": true
- *    }, {
- *      "ProductID": 2,
- *      "ProductName": "Chang",
- *      "UnitPrice": 19.0000,
- *      "Discontinued": false
- *    }
- *   ];
- * }
- *
- * ```
- *
- * By default, the data cell displays the data for the specified fields. To further customize
- * the span-column functionality, use a [cell template]({% slug api_grid_celltemplatedirective %}).
- *
- * ```html-no-run
+ * ```html
  * <kendo-grid-span-column>
- *  <kendo-grid-column field="field1" title="Field 1"></kendo-grid-column>
- *  <kendo-grid-column field="field2" title="Field 2"></kendo-grid-column>
- *    <ng-template kendoGridCellTemplate let-dataItem>
- *        <h5>{{ dataItem.field1 }}</h5>
- *        <p>{{ dataItem.field2 }}</p>
- *    </ng-template>
- *  </kendo-grid-span-column>
+ *   <kendo-grid-column field="field1"></kendo-grid-column>
+ *   <kendo-grid-column field="field2"></kendo-grid-column>
+ *   <ng-template kendoGridCellTemplate let-dataItem>
+ *     <h5>{{ dataItem.field1 }}</h5>
+ *     <p>{{ dataItem.field2 }}</p>
+ *   </ng-template>
+ * </kendo-grid-span-column>
  * ```
  */
 class SpanColumnComponent extends ColumnBase {
@@ -3799,24 +3663,9 @@ class SpanColumnComponent extends ColumnBase {
         }
     }
     /**
-     * Defines whether the edit template of the column will be rendered. The default value is `false`.
-     *
-     * > To enable the editing functionality for a spanned column, set an edit template for it.
-     *
-     * @example
-     * ```html-no-run
-     * <kendo-grid>
-     *    <kendo-grid-span-column [editable]="false">
-     *      <kendo-grid-column field="UnitPrice">
-     *      </kendo-grid-column>
-     *      <kendo-grid-column field="ProductName">
-     *      </kendo-grid-column>
-     *      <ng-template kendoGridEditTemplate>
-     *         .....
-     *      </ng-template>
-     *    </kendo-grid-span-column>
-     * </kendo-grid>
-     * ```
+     * Defines whether the edit template of the column will be rendered.
+     * To enable the editing functionality for a spanned column, set an edit template for it ([see exmaple](slug:custom_reactive_editing_grid)).
+     * @default false
      */
     set editable(value) {
         this._editable = value;
@@ -3860,57 +3709,8 @@ class SpanColumnComponent extends ColumnBase {
         return this.childColumns.filter(c => c.isVisible).length;
     }
     /**
-     * Toggles the locked (frozen) state of the columns. Locked columns are visible
-     * at all times during the horizontal scrolling of the Grid.
-     *
-     * For the option to work properly, make sure that:
-     * - Scrolling is enabled.
-     * - The `height` option of the Grid is set.
-     * - The widths of all Grid columns are explicitly set in pixels. In this way,
-     * the Grid adjusts the layout of the locked and unlocked columns.
-     *
+     * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
      * @default false
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-grid-span-column [locked]="true">
-     *             <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
-     *             </kendo-grid-column>
-     *             <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
-     *             </kendo-grid-column>
-     *          </kendo-grid-span-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value) {
         this._locked = value;
@@ -4042,56 +3842,17 @@ function isColumnGroupComponent(column) {
 }
 /**
  * Represents the column group header of the Grid
- * ([more information and examples]({% slug multicolumnheaders_columns_grid %})).
+ * ([more information and examples](slug:multicolumnheaders_columns_grid)).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *     <kendo-grid [data]="gridData">
- *       <kendo-grid-column-group title="Product Info">
- *         <ng-template kendoGridHeaderTemplate let-columnIndex="columnIndex" let-column="column">
- *               Column index: {{columnIndex}} / column title: {{column.title}}
- *         </ng-template>
- *         <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *         </kendo-grid-column>
- *         <kendo-grid-column field="ProductName" title="Product Name">
- *         </kendo-grid-column>
- *       </kendo-grid-column-group>
- *       <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
- *       </kendo-grid-column>
- *       <kendo-grid-column field="Discontinued" [width]="120">
- *           <ng-template kendoGridCellTemplate let-dataItem>
- *               <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
- *           </ng-template>
- *       </kendo-grid-column>
- *     </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   <kendo-grid-column-group title="Product Info">
+ *     <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *     <kendo-grid-column field="ProductName"></kendo-grid-column>
+ *   </kendo-grid-column-group>
+ *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class ColumnGroupComponent extends ColumnBase {
@@ -5730,7 +5491,7 @@ class PopupCloseEvent extends PreventableEvent {
 const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
 /**
  * The service that is used for the popups of the filter and column menus
- * ([see example]({% slug filter_menu %}#toc-custom-filter-row-components)#toc-filter-menu-with-popup).
+ * ([see example]({% slug filter_menu %}#toc-filter-menu-with-popup)).
  */
 class SinglePopupService {
     constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
@@ -6323,6 +6084,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+/**
+ * @hidden
+*/
 class SizingOptionsService {
     constructor() {
         this.changes = new Subject();
@@ -6433,6 +6197,7 @@ class RowReorderService {
     }
     press(ev) {
         this.dragTarget = ev.dragTarget;
+        this.offsetY = ev.dragEvent.offsetY;
     }
     dragStart() {
         this.createDropIndicator();
@@ -6444,7 +6209,7 @@ class RowReorderService {
         }
         const position = {
             x: ev.dragEvent.clientX,
-            y: ev.dragEvent.clientY
+            y: ev.dragEvent.clientY - this.offsetY
         };
         if (isPresent$1(this.hintElement)) {
             this.renderer.setStyle(this.hintElement, 'left', `${position.x}px`);
@@ -6939,7 +6704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Displays buttons for navigating to the first and to the previous page ([see example]({% slug paging_grid %}#toc-pager-templates)).
+ * Displays buttons for navigating to the first and to the previous page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
@@ -7041,7 +6806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.ChangeDetectorRef }, { type: NavigationService }]; } });
 /**
- * Displays numeric buttons to enable navigation between the pages.
+ * Displays numeric buttons to enable navigation between the pages ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext) {
@@ -7297,54 +7062,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i3.NumericTextBoxComponent }, { type: i0.Renderer2 }]; } });
 /**
- * Displays an input element which allows the typing and rendering of page numbers.
- *
- * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *      <kendo-grid
- *        [kendoGridBinding]="gridData"
- *        [pageSize]="1"
- *        [pageable]="true"
- *      >
- *       <kendo-grid-column field="ProductID" title="ID" [width]="40">
- *       </kendo-grid-column>
- *       <kendo-grid-column field="ProductName" title="Name" [width]="250">
- *       </kendo-grid-column>
- *       <kendo-grid-column field="UnitPrice" title="Price" [width]="80" format="{0:c}">
- *       </kendo-grid-column>
- *
- *       <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
- *          <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
- *          <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
- *          <kendo-pager-next-buttons></kendo-pager-next-buttons>
- *          <kendo-pager-input></kendo-pager-input>
- *          <kendo-pager-info></kendo-pager-info>
- *       </ng-template>
- *
- *    </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- * }
- *
- * ```
+ * Displays an input element which allows the typing and rendering of page numbers ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerInputComponent extends PagerElementComponent {
     constructor(localization, pagerContext, zone, navigationService, cd) {
@@ -7468,7 +7186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Displays buttons for navigating to the next and to the last page ([see example]({% slug paging_grid %}#toc-pager-template)).
+ * Displays buttons for navigating to the next and to the last page ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
@@ -7569,7 +7287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 // eslint-disable no-access-missing-member
 /**
- * Displays information about the current page and the total number of records ([see example]({% slug paging_grid %}#toc-pager-templates)).
+ * Displays information about the current page and the total number of records ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerInfoComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext) {
@@ -7661,7 +7379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$4.DropDownListComponent }]; } });
 /**
- * Displays a drop-down list for the page size selection ([see example]({% slug paging_grid %}#toc-pager-templates)).
+ * Displays a drop-down list for the page size selection ([see example](slug:pager_template_grid#toc-using-built-in-pager-components)).
  */
 class PagerPageSizesComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext, navigationService) {
@@ -7671,97 +7389,8 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this._pageSizes = [];
     }
     /**
-     * The page sizes collection. Can be an Array of numbers and/or PageSizeItem objects.
-     *
-     * @example
-     * ```ts-preview
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [kendoGridBinding]="gridData" [height]="200"
-     *           [pageable]="true"
-     *            [pageSize]="pageSize">
-     *            <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
-     *                <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes>
-     *            </ng-template>
-     *        </kendo-grid>
-     *    `
-     * })
-     * class AppComponent {
-     *    public gridData: any[] = products;
-     *    public pageSize = 2;
-     *    public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
-     * }
-     *
-     * const products = [{
-     *   'ProductID' : 1,
-     *   'ProductName' : "Chai",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 1,
-     *   'QuantityPerUnit' : "10 boxes x 20 bags",
-     *   'UnitPrice' : 18.0000,
-     *   'UnitsInStock' : 39,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 10,
-     *   'Discontinued' : false
-     *
-     * }, {
-     *   'ProductID' : 2,
-     *   'ProductName' : "Chang",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 1,
-     *   'QuantityPerUnit' : "24 - 12 oz bottles",
-     *   'UnitPrice' : 19.0000,
-     *   'UnitsInStock' : 17,
-     *   'UnitsOnOrder' : 40,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 3,
-     *   'ProductName' : "Aniseed Syrup",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "12 - 550 ml bottles",
-     *   'UnitPrice' : 10.0000,
-     *   'UnitsInStock' : 13,
-     *   'UnitsOnOrder' : 70,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 4,
-     *   'ProductName' : "Chef Anton\'s Cajun Seasoning",
-     *   'SupplierID' : 2,
-     *  'CategoryID' : 2,
-     *   'QuantityPerUnit' : "48 - 6 oz jars",
-     *   'UnitPrice' : 22.0000,
-     *   'UnitsInStock' : 53,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 0,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 5,
-     *   'ProductName' : "Chef Anton\'s Gumbo Mix",
-     *   'SupplierID' : 2,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "36 boxes",
-     *   'UnitPrice' : 21.3500,
-     *   'UnitsInStock' : 0,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 0,
-     *   'Discontinued' : true
-     * }, {
-     *   'ProductID' : 6,
-     *   'ProductName' : "Grandma\'s Boysenberry Spread",
-     *   'SupplierID' : 3,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "12 - 8 oz jars",
-     *   'UnitPrice' : 25.0000,
-     *   'UnitsInStock' : 120,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }];
-     * ```
+     * The page sizes collection. Can be an Array of numbers and/or [`PageSizeItem`](slug:api_grid_pagesizeitem) objects
+     * ([see example]({% slug paging_grid %}#toc-pager-templates))
      */
     set pageSizes(pageSizes) {
         let normalizedItems = [];
@@ -9185,8 +8814,9 @@ class StringFilterComponent extends BaseFilterCellComponent {
         super(filterService);
         this.localization = localization;
         /**
-         * The default filter operator. Defaults to `contains`.
+         * The default filter operator.
          * @type {string}
+         * @default 'contains'
          */
         this.operator = "contains";
     }
@@ -9650,8 +9280,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a string-filter menu component.
- * ([see example]({% slug filter_menu %}#toc-built-in-filter-menu-components)).
+ * Represents a string-filter menu component
+ * ([see example](slug:filter_menu#toc-built-in-filter-menu-components)).
+ *
+ * ```html
+ * <kendo-grid-column field="ProductName">
+ *   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-grid-string-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-grid-string-filter-menu>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class StringFilterMenuComponent extends StringFilterComponent {
     constructor(localization) {
@@ -9664,6 +9306,7 @@ class StringFilterMenuComponent extends StringFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -9794,18 +9437,21 @@ class NumericFilterComponent extends BaseFilterCellComponent {
         super(filterService);
         this.localization = localization;
         /**
-         * The default filter operator. Defaults to `eq`.
+         * The default filter operator.
          * @type {string}
+         * @default 'eq'
          */
         this.operator = "eq";
         /**
          * Specifies the value that is used to increment or decrement the component value.
          * @type {numeric}
+         * @default 1
          */
         this.step = 1;
         /**
          * Specifies whether the **Up** and **Down** spin buttons will be rendered.
          * @type {boolean}
+         * @default true
          */
         this.spinners = true;
         this.defaultOperators = numericOperators(this.localization);
@@ -10018,21 +9664,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a numeric-filter menu component.
+ * Represents a numeric filter-menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-grid-column field="UnitPrice" title="Unit Price">
- *          <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *          <kendo-grid-numeric-filter-menu
- *              [column]="column"
- *              [filter]="filter"
- *              [filterService]="filterService"
- *              >
- *          </kendo-grid-numeric-filter-menu>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="UnitPrice">
+ *   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-grid-numeric-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-grid-numeric-filter-menu>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class NumericFilterMenuComponent extends NumericFilterComponent {
     constructor(localization) {
@@ -10045,6 +9690,7 @@ class NumericFilterMenuComponent extends NumericFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
         /**
@@ -10217,25 +9863,29 @@ class DateFilterComponent extends BaseFilterCellComponent {
         /**
          * The default filter operator. Defaults to `contains`.
          * @type {string}
+         * @default 'gte'
          */
         this.operator = "gte";
         /**
          * Defines the active view that the calendar initially renders.
          * By default, the active view is `month`.
-         *
-         * > You have to set `activeView` within the `topView`-`bottomView` range.
+         * You have to set `activeView` within the `topView`-`bottomView` range.
+         * @default 'month'
          */
         this.activeView = "month";
         /**
          * Defines the bottommost calendar view, to which the user can navigate.
+         * @default 'month'
          */
         this.bottomView = "month";
         /**
          * Defines the topmost calendar view, to which the user can navigate.
+         * @default 'century'
          */
         this.topView = "century";
         /**
          * Determines whether to display a week number column in the `month` view of the Calendar.
+         * @default false
          */
         this.weekNumber = false;
         this.defaultOperators = dateOperators(this.localization);
@@ -10470,21 +10120,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a date-filter menu component.
+ * Represents a date filter-menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-grid-column field="OrderDate" title="Order Date">
- *          <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-grid-date-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-grid-date-filter-menu>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="FirstOrderedOn">
+ *   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-grid-date-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-grid-date-filter-menu>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class DateFilterMenuComponent extends DateFilterComponent {
     constructor(localization) {
@@ -10497,6 +10146,7 @@ class DateFilterMenuComponent extends DateFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will be displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -10753,21 +10403,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a Boolean-filter menu component.
+ * Represents a Boolean-filter menu component. [See example](slug:filter_menu#toc-built-in-filter-menu-components)
  *
  * @example
- *  ```html-no-run
- *      <kendo-grid-column field="Discontinued" title="Discontinued">
- *          <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-grid-boolean-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-grid-boolean-filter-menu>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ *
+ * ```html
+ * <kendo-grid-column field="Discontinued" title="Discontinued">
+ *   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-grid-boolean-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-grid-boolean-filter-menu>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class BooleanFilterMenuComponent extends BooleanFilterComponent {
     constructor(localization) {
@@ -11295,27 +10945,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-x" (click)="service.close()"
- *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
- *              <kendo-grid-columnmenu-sort [service]="service">
- *              </kendo-grid-columnmenu-sort>
- *          </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">
+ *       <span class="k-icon k-i-x" (click)="service.close()" </span>
+ *       <kendo-grid-columnmenu-sort [service]="service">
+ *       </kendo-grid-columnmenu-sort>
+ *    </ng-template>
+ *    <kendo-grid-column field="Field1"></kendo-grid-column>
+ * </kendo-grid>
  *
  * ```
  */
@@ -11428,27 +11066,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [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>
  * ```
  */
 class ColumnMenuItemComponent {
@@ -11605,34 +11228,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuLockComponent extends ColumnMenuItemBase {
@@ -11712,33 +11321,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
 /**
- * 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>
  *
  * ```
  */
@@ -11819,33 +11416,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuPositionComponent extends ColumnMenuItemBase {
@@ -11863,6 +11447,7 @@ class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12194,33 +11779,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuChooserComponent extends ColumnMenuItemBase {
@@ -12240,6 +11811,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12348,33 +11920,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuFilterComponent extends ColumnMenuItemBase {
@@ -12392,6 +11951,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12611,34 +12171,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuSortComponent extends ColumnMenuItemBase {
@@ -12722,36 +12269,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: SortService }, { type: i0.Renderer2 }]; } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
@@ -12802,36 +12335,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * 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>
  * ```
  */
 class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
@@ -12879,7 +12397,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 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>
  */
 class ColumnMenuComponent {
     constructor(navigationService, popupService, localization, service, ctx) {
@@ -13230,6 +12756,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents a component which accommodates the filter operators.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   <kendo-grid-column field="ProductName">
+ *     <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+ *       <input />
+ *       <kendo-grid-filter-cell-operators
+ *         [operators]="[{text: 'Equals', value: 'eq'}]">
+ *       </kendo-grid-filter-cell-operators>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * <kendo-grid>
+ * ```
  */
 class FilterCellOperatorsComponent {
     constructor(localization, sizing) {
@@ -13248,6 +12788,7 @@ class FilterCellOperatorsComponent {
         /**
          * Determines if the list of operators will be displayed.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         /**
@@ -13453,36 +12994,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a string-filter cell component
+ * Represents a string filter-cell component
  * ([see example]({% slug filter_row %}#toc-hiding-filter-operators)).
  *
  * @example
- *
- *  ```html-no-run
- *      <kendo-grid-column field="ProductName" title="Product Name">
- *          <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
- *          <kendo-grid-string-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-grid-string-filter-cell>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="ProductName" title="Product Name">
+ *   <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+ *     <kendo-grid-string-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-grid-string-filter-cell>
+ *  </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class StringFilterCellComponent extends StringFilterComponent {
     constructor(filterService, localization, sizingService) {
         super(filterService, localization);
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
-         * A value of `0` indicates no delay. The default value is `500`.
+         * A value of `0` indicates no delay.
          * @type {boolean}
+         * @default 500
          */
         this.filterDelay = 500;
         /**
          * Determines if the drop-down filter operators will be displayed.
-         * The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         this.subs = sizingService.changes.subscribe((size) => this.size = size);
@@ -13548,19 +13088,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents a numeric filter cell.
+ * Represents a numeric filter-cell component.
+ * [See example](slug:filter_row#toc-built-in-filter-row-components).
  *
  * @example
- *  ```html-no-run
- *      <kendo-grid-column field="ProductName" title="Product Name">
- *          <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
- *          <kendo-grid-numeric-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-grid-numeric-filter-cell>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="UnitPrice">
+ *   <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+ *     <kendo-grid-numeric-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-grid-numeric-filter-cell>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class NumericFilterCellComponent extends NumericFilterComponent {
     constructor(filterService, localization, sizingService) {
@@ -13570,12 +13111,14 @@ class NumericFilterCellComponent extends NumericFilterComponent {
          * Determines the delay time (in milliseconds) before the filter value is submitted.
          * A value of `0` indicates no delay. The default value is `500`.
          * @type {boolean}
+         * @default 500
          */
         this.filterDelay = 500;
         /**
          * Determines if the drop-down filter operators will be displayed.
          * The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         this.subs = sizingService.changes.subscribe((size) => this.size = size);
@@ -13674,19 +13217,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents a Boolean filter-cell component.
+ * [See example](slug:filter_row#toc-built-in-filter-row-components).
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-grid-column field="ProductName" title="Product Name">
- *          <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
- *          <kendo-grid-boolean-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-grid-boolean-filter-cell>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="Discontinued">
+ *   <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+ *     <kendo-grid-boolean-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-grid-boolean-filter-cell>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class BooleanFilterCellComponent extends BooleanFilterComponent {
     constructor(filterService, localization, cd, sizingService) {
@@ -13765,29 +13309,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: FilterService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: SizingOptionsService }]; } });
 /**
- * Represents a date-filter cell component.
+ * Represents a [DatePicker](slug:overview_datepicker) filter-cell component.
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-grid-column field="OrderDate" title="Order Date">
- *          <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
- *          <kendo-grid-date-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-grid-date-filter-cell>
- *          </ng-template>
- *      </kendo-grid-column>
- *   ```
+ * ```html
+ * <kendo-grid-column field="FirstOrderedOn">
+ *   <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+ *     <kendo-grid-date-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-grid-date-filter-cell>
+ *   </ng-template>
+ * </kendo-grid-column>
+ * ```
  */
 class DateFilterCellComponent extends DateFilterComponent {
     constructor(filterService, localization, sizingService) {
         super(filterService, localization);
         this.localization = localization;
         /**
-         * Determines if the drop-down filter operators will be displayed. The default value is `true`.
+         *  Represents a [DatePicker](slug:overview_datepicker) filter-cell component.
+         * [See example](slug:filter_row#toc-built-in-filter-row-components).
+         * @example
+         *
+         * ```html
+         * <kendo-grid-column field="Discontinued">
+         *   <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+         *     <kendo-grid-date-filter-cell
+         *       [column]="column"
+         *       [filter]="filter">
+         *     </kendo-grid-date-filter-cell>
+         *   </ng-template>
+         * </kendo-grid-column>
+         * ```
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         this.subs = sizingService.changes.subscribe((size) => this.size = size);
@@ -15836,68 +15393,20 @@ const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';
 /**
  * Represents the command columns of the Grid. You have to define the content of the
- * column inside an `<ng-template>` tag. The template context is set to the current
- * data item. For more information and examples on using the passed fields
- * and the command directives, refer to the article on
- * [editing the Grid in Angular Reactive Forms]({% slug inline_editing_grid %}#toc-using-reactive-forms).
- *
- * The following additional fields are passed:
- * - `columnIndex`&mdash;The current column index.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex`is `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `column`&mdash;The current column instance.
- * - `isNew`&mdash;The state of the current item.
- *
- * Usually, the template contains CRUD command directives such as:
- * - [EditCommandDirective]({% slug api_grid_editcommanddirective %})
- * - [RemoveCommandDirective]({% slug api_grid_removecommanddirective %})
- * - [CancelCommandDirective]({% slug api_grid_cancelcommanddirective %})
- * - [SaveCommandDirective]({% slug api_grid_savecommanddirective %})
+ * column inside an `<ng-template>` tag.
+ * For more information and examples, refer to the [Command Column Directives](slug:editing_directives_grid#toc-command-column-directives) article.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
- *          </kendo-grid-column>
- *          <kendo-grid-command-column title="command" [width]="220">
- *               <ng-template kendoGridCellTemplate>
- *                   <button kendoGridEditCommand class="k-primary">Edit</button>
- *                   <button kendoGridRemoveCommand>Remove</button>
- *               </ng-template>
- *           </kendo-grid-command-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   <kendo-grid-command-column title="command" [width]="220">
+ *      <ng-template kendoGridCellTemplate>
+ *         <button kendoGridEditCommand class="k-primary">Edit</button>
+ *         <button kendoGridRemoveCommand>Remove</button>
+ *      </ng-template>
+ *   </kendo-grid-command-column>
+ * </kendo-grid>
  * ```
  */
 class CommandColumnComponent extends ColumnBase {
@@ -18941,33 +18450,11 @@ const handleExpandCollapseDetailsService = (service, expandEmitter, collapseEmit
 const isInEditedCell = (element, gridElement) => closest(element, matchesClasses('k-grid-edit-cell')) &&
     closest(element, matchesNodeName('kendo-grid')) === gridElement;
 /**
- * Represents the Kendo UI Grid component for Angular.
+ * Represents the Kendo UI for Angular Data Grid component.
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData">
- *        </kendo-grid>
- *    `
- * })
- * class AppComponent {
- *    public gridData: any[] = products;
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
+ * ```html
+ * <kendo-grid [data]="gridData"></kendo-grid>
  * ```
  */
 class GridComponent {
@@ -19003,64 +18490,25 @@ class GridComponent {
         /**
          * Defines the scroll mode used by the Grid.
          *
-         * The available options are:
-         *  - `none`&mdash;Renders no scrollbar.
-         *  - `scrollable`&mdash;The default scroll mode. It requires the setting of the `height` option.
-         *  - `virtual`&mdash;Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
+         * @default 'scrollable'
          */
         this.scrollable = 'scrollable';
         /**
-         * Enables the single-row [selection]({% slug selection_grid %}) of the Grid.
+         * Enables the [single-row selection](slug:grid_row_selection) of the Grid.
+         *
+         * @default false
          */
         this.selectable = false;
         /**
          * A function that defines how to track changes for the data rows.
-         *
          * By default, the Grid tracks changes by the index of the data item.
          * Edited rows are tracked by reference.
-         * In some cases, you might need to override the default behavior,
-         * for example, when you implement editing with immutable data items.
-         *
-         * The following example demonstrates how to track items only by index.
-         *
-         * @example
-         * ```ts
-         * import { Component } from '@angular/core';
-         * import { GridItem } from '@progress/kendo-angular-grid';
-         *
-         * _@Component({
-         *    selector: 'my-app',
-         *    template: `
-         *        <kendo-grid [data]="gridData" [trackBy]="trackBy">
-         *        </kendo-grid>
-         *    `
-         * })
-         * class AppComponent {
-         *    public gridData: any[] = products;
-         *
-         *    public trackBy(index: number, item: GridItem): any {
-         *        console.log(item);
-         *        return index;
-         *    }
-         * }
-         *
-         * const products = [{
-         *    "ProductID": 1,
-         *    "ProductName": "Chai",
-         *    "UnitPrice": 18.0000,
-         *    "Discontinued": true
-         *  }, {
-         *    "ProductID": 2,
-         *    "ProductName": "Chang",
-         *    "UnitPrice": 19.0000,
-         *    "Discontinued": false
-         *  }
-         * ];
-         * ```
+         * [See exmpale](slug:track_changes_grid)
          */
         this.trackBy = defaultTrackBy;
         /**
          * If set to `true`, the grid will render only the columns in the current viewport.
+         * @default false
          */
         this.virtualColumns = false;
         /**
@@ -19069,35 +18517,31 @@ class GridComponent {
         this.gridData = () => { return this.flatData; };
         /**
          * Enables the [filtering]({% slug filtering_grid %}) of the Grid columns that have their `field` option set.
+         * @default false
          */
         this.filterable = false;
         /**
          * Enables the [sorting]({% slug sorting_grid %}) of the Grid columns that have their `field` option set.
+         * @default false
          */
         this.sortable = false;
         /**
-         * Configures the pager of the Grid ([see example]({% slug paging_grid %})).
-         *
-         * The available options are:
-         * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed. Defaults to `10`.
-         * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records. Defaults to `true`.
-         * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. Defaults to `'numeric'`.
-         * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size. Defaults to `false`.
-         * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons. Defaults to `true`.
-         * - `responsive: Boolean`&mdash;Toggles the built-in responsive behavior of the Pager. Defaults to `true`.
+         * Configures the pager of the Grid ([see example](slug:paging_grid_settings)).
+         * @default false
          */
         this.pageable = false;
         /**
-         * If set to `true`, the user can group the Grid by dragging the column header cells.
-         * By default, grouping is disabled ([see example]({% slug grouping_grid %})).
+         * If set to `true`, the user can group the Grid by dragging the column header cells ([see example]({% slug grouping_grid %})).
+         * @default false
          */
         this.groupable = false;
         /**
          * Indicates whether the Grid columns will be resized during initialization so that
-         * they fit their headers and row content. Defaults to `false`.
+         * they fit their headers and row content.
          * Columns with `autoSize` set to `false` are excluded.
          * To dynamically update the column width to match the new content,
          * refer to [this example]({% slug resizing_columns_grid %}).
+         * @default false
          */
         this.autoSize = false;
         /**
@@ -19122,8 +18566,8 @@ class GridComponent {
         this.columnMenu = false;
         /**
          * Specifies if the header of the grid will be hidden. The header is visible by default.
-         *
-         * > The header includes column headers and the [filter row]({% slug filtering_grid %}#toc-filter-row).
+         * The header includes column headers and the [filter row](slug:filter_row).
+         * @default false
          */
         this.hideHeader = false;
         /**
@@ -19435,7 +18879,7 @@ class GridComponent {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
     /**
-     * Enables the [row reordering]({% slug ToDo %}) of the Grid.
+     * Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
      * @default false
      */
     set rowReorderable(value) {
@@ -19484,49 +18928,8 @@ class GridComponent {
         return this.navigable;
     }
     /**
-     * Defines a function that is executed for every data row in the component.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     * import { RowClassArgs } from '@progress/kendo-angular-grid';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        .k-grid tr.even { background-color: #f45c42; }
-     *        .k-grid tr.odd { background-color: #41f4df; }
-     *    `],
-     *    template: `
-     *        <kendo-grid [data]="gridData" [rowClass]="rowCallback">
-     *        </kendo-grid>
-     *    `
-     * })
-     * class AppComponent {
-     *    public gridData: any[] = products;
-     *
-     *    public rowCallback(context: RowClassArgs) {
-     *        const isEven = context.index % 2 === 0;
-     *        return {
-     *            even: isEven,
-     *            odd: !isEven
-     *        };
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
+     * Defines a function that is executed for every data row in the component
+     * ([see example](slug:styling_grid_rows)).
      * ```
      */
     set rowClass(fn) {
@@ -19828,9 +19231,9 @@ class GridComponent {
      * This method is provided only for backwards-compatibility with legacy versions.
      * These versions tracked the expanded group state internally using the hierarchical group index.
      *
-     * > * When you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive,
-     * > the `expandGroup` method is not supported.
-     * > * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
+     * The `expandGroup` method is not supported when you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive.
+     *
+     * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
      *
      * @param {string} index - The underscore separated hierarchical index of the group.
      */
@@ -19844,9 +19247,9 @@ class GridComponent {
      * This method is provided only for backwards-compatibility with legacy versions.
      * These versions tracked the expanded group state internally using the hierarchical group index.
      *
-     * > * When you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive,
-     * > the `collapseGroup` method is not supported.
-     * > * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
+     * The `collapseGroup` method is not supported when you use the [kendoGridGroupBinding]({% slug api_grid_groupbindingdirective %}) directive.
+     *
+     * When a Grid is pageable, the indexes of the groups are offset by the current Grid [skip]({% slug api_grid_gridcomponent %}#toc-skip).
      *
      * @param {string} index - The underscore separated hierarchical index of the group.
      */
@@ -20104,7 +19507,7 @@ class GridComponent {
         this.focusEditElement('.k-grid-add-row');
     }
     /**
-     * Puts the cell that is specified by the table row and column in edit mode.
+     * Puts the cell that is specified by the table row and column in edit mode ([see example](slug:editing_incell_grid)).
      *
      * @param {number} rowIndex - The data row index that will be switched in the edit mode.
      * @param {number|string|any} column - The leaf column index, or the field name or the column instance that should be edited.
@@ -20159,7 +19562,7 @@ class GridComponent {
      * Exports the Grid element to a Drawing [Group]({% slug api_kendo-drawing_group %}) by using the `kendo-grid-pdf` component options.
      * ([see example]({% slug pdfexport_grid %}#toc-exporting-multiple-grids-to-the-same-pdf)).
      *
-     * @return {Promise} - A promise that will be resolved with the Drawing `Group`.
+     * @return {Promise} A promise that will be resolved with the Drawing `Group`.
      */
     drawPDF() {
         const promise = createPromise();
@@ -20175,138 +19578,19 @@ class GridComponent {
     /**
      * Applies the minimum possible width for the specified column,
      * so that the whole text fits without wrapping. This method expects the Grid
-     * to be resizable (set `resizable` to `true`).
-     * Makes sense to execute this method only
+     * to be [resizable](slug:resizing_columns_grid). The method must be executed
      * after the Grid is already populated with data.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid
-     *            #grid
-     *            [data]="gridData"
-     *            [resizable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoGridToolbarTemplate>
-     *                 <button kendoButton (click)="grid.autoFitColumn(groupColumn)">
-     *                     Auto-fit the group column
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-grid-column-group #groupColumn title="Product Info">
-     *                <kendo-grid-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    [minResizableWidth]="30"
-     *                    title="ID">
-     *                </kendo-grid-column>
-     *
-     *                <kendo-grid-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-grid-column>
-     *            </kendo-grid-column-group>
-     *
-     *            <kendo-grid-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                filter="numeric"
-     *                format="{0:c}">
-     *            </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     * class AppComponent {
-     *    public gridData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
+     * [See example](slug:resizing_columns_grid#toc-auto-fitting-the-content)
      */
     autoFitColumn(column) {
         this.columnResizingService.autoFit(column);
     }
     /**
      * Adjusts the width of the specified columns to fit the entire content, including headers, without wrapping.
-     * If no columns are specified, `autoFitColumns` is applied to all columns.
-     *
-     * This method requires the Grid to be resizable (set `resizable` to `true`).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *      <kendo-grid
-     *          #grid
-     *          [data]="gridData"
-     *          [resizable]="true"
-     *          style="height: 300px">
-     *          <ng-template kendoGridToolbarTemplate>
-     *              <button kendoButton (click)="grid.autoFitColumns([firstColumn, lastColumn])">
-     *                  Auto-fit the first and last column
-     *              </button>
-     *              <button kendoButton (click)="grid.autoFitColumns()">
-     *                  Auto-fit all columns
-     *              </button>
-     *          </ng-template>
-     *          <kendo-grid-column-group title="Product Info">
-     *              <kendo-grid-column
-     *                  #firstColumn
-     *                  field="ProductID"
-     *                  [width]="50"
-     *                  [minResizableWidth]="30"
-     *                  title="ID">
-     *              </kendo-grid-column>
-     *
-     *              <kendo-grid-column
-     *                  field="ProductName"
-     *                  title="Product Name"
-     *                  >
-     *              </kendo-grid-column>
-     *          </kendo-grid-column-group>
-     *
-     *          <kendo-grid-column
-     *              #lastColumn
-     *              field="UnitPrice"
-     *              title="Unit Price"
-     *              [width]="180"
-     *              filter="numeric"
-     *              format="{0:c}">
-     *          </kendo-grid-column>
-     *      </kendo-grid>
-     *    `
-     * })
-     * class AppComponent {
-     *    public gridData: any[] = products;
-     * }
+     * If no columns are specified, `autoFitColumns` is applied to all columns.The method must be executed
+     * after the Grid is already populated with data.
+     * [See example](slug:resizing_columns_grid#toc-auto-fitting-the-content)
      *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     autoFitColumns(columns = this.columns) {
         let cols;
@@ -20367,10 +19651,10 @@ class GridComponent {
     /**
      * Focuses the cell with the specified row and column index.
      *
-     * The row index is based on the logical structure of the Grid and does not correspond to the data item index:
-     * * Header rows are included, starting at index 0.
-     * * Group headers and footers are included.
-     * * The row indexing is absolute and does not change with paging.
+     * The row index is based on the logical structure of the Grid and does not correspond to the data item index.
+     * Header rows are included, starting at index 0.
+     * Group headers and footers are included.
+     * The row indexing is absolute and does not change with paging.
      *
      * If the Grid is configured for scrolling, including virtual scrolling, the scroll position will be updated.
      * If the row is not present on the current page, the method will have no effect.
@@ -20421,67 +19705,6 @@ class GridComponent {
      * @param {number} destIndex - The new position of the column.
      * @param {ColumnReorderConfig} options - Additional options.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid
-     *            #grid
-     *            [data]="gridData"
-     *            [reorderable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoGridToolbarTemplate>
-     *                 <button kendoButton
-     *                     (click)="grid.reorderColumn(groupColumn, 2, { before: true })">
-     *                     Move the group column before the last one.
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-grid-column-group #groupColumn title="Product Info">
-     *                <kendo-grid-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    title="ID">
-     *                </kendo-grid-column>
-     *
-     *                <kendo-grid-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-grid-column>
-     *            </kendo-grid-column-group>
-     *
-     *            <kendo-grid-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                format="{0:c}">
-     *            </kendo-grid-column>
-     *
-     *            <kendo-grid-column
-     *                field="Discontinued"
-     *                title="Discontinued"
-     *                [width]="100">
-     *            </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     * class AppComponent {
-     *    public gridData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     reorderColumn(source, destIndex, options = { before: false }) {
         const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
@@ -22871,7 +22094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Custom component messages override default component messages
- * ([see example]({% slug globalization_grid %}#toc-localization)).
+ * ([see example](slug:globalization_grid#toc-custom-messages)).
  */
 class CustomMessagesComponent extends GridMessages {
     constructor(service) {
@@ -23069,11 +22292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 /**
- * Represents the `Contains` (**Contains**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * Represents the `Contains` (**Contains**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class ContainsFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("contains", localization); }
@@ -23100,11 +22320,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `DoesNotContain` (**Does not contain**) filter operator.
+ * Represents the `DoesNotContain` (**Does not contain**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class DoesNotContainFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("doesnotcontain", localization); }
@@ -23131,11 +22349,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `EndsWith` (**Ends with**) string filter operator.
+ * Represents the `EndsWith` (**Ends with**) string filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class EndsWithFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("endswith", localization); }
@@ -23162,11 +22378,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `Equal` (**Is equal to**) filter operator.
+ * Represents the `Equal` (**Is equal to**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class EqualFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("eq", localization); }
@@ -23193,11 +22407,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `IsEmpty` (**Is empty**) filter operator.
+ * Represents the `IsEmpty` (**Is empty**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsEmptyFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isempty", localization); }
@@ -23224,11 +22436,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `IsNotEmpty` (**Is not empty**) filter operator.
+ * Represents the `IsNotEmpty` (**Is not empty**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNotEmptyFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnotempty", localization); }
@@ -23255,11 +22465,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `IsNotNull` (**Is not null**) filter operator.
+ * Represents the `IsNotNull` (**Is not null**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNotNullFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnotnull", localization); }
@@ -23286,11 +22494,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `IsNull` (**Is null**) filter operator.
+ * Represents the `IsNull` (**Is null**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class IsNullFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnull", localization); }
@@ -23317,11 +22523,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `NotEqual` (**Is not equal to**) filter operator.
+ * Represents the `NotEqual` (**Is not equal to**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class NotEqualFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("neq", localization); }
@@ -23348,11 +22552,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `StartsWith` (**Starts with**) filter operator.
+ * Represents the `StartsWith` (**Starts with**) filter operator. [See exmaple](slug:filtering_grid#toc-using-the-built-in-directive).
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * For more information and examples, refer to the article on setting [default filter operators](slug:filter_row#toc-default-filter-operator).
  */
 class StartsWithFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("startswith", localization); }
@@ -23378,12 +22580,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `Greater` (**Is greater than**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+/**
+ * Represents the `Greater` (**Is greater than**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class GreaterFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("gt", localization); }
@@ -23410,11 +22609,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 /**
- * Represents the `GreaterOrEqualTo` (**Is greater than or equal to**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * Represents the `GreaterOrEqualTo` (**Is greater than or equal to**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class GreaterOrEqualToFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("gte", localization); }
@@ -23440,12 +22636,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `Less` (**Is less than**) numeric filter operator.
+/**
+ * Represents the `Less` (**Is less than**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class LessFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("lt", localization); }
@@ -23471,12 +22665,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `LessOrEqualTo` (**Is less than or equal to**) numeric filter operator.
+/**
+ * Represents the `LessOrEqualTo` (**Is less than or equal to**) [numeric filter](slug:filtering_grid#toc-numeric-filter) operator.
  *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class LessOrEqualToFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("lte", localization); }
@@ -23502,12 +22694,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `Greater` (**Is after**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+/**
+ * Represents the `Greater` (**Is after**) [date filter](slug:filtering_grid#toc-date-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class AfterFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after", localization); }
@@ -23542,12 +22731,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `GreaterOrEqualTo` (**Is after or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+/**
+ * Represents the `GreaterOrEqualTo` (**Is after or equal to**) [date filter](slug:filtering_grid#toc-date-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class AfterEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after-eq", localization); }
@@ -23582,12 +22768,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `LessOrEqualTo` (**Is before or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+/**
+ * Represents the `LessOrEqualTo` (**Is before or equal to**) [date filter](slug:filtering_grid#toc-date-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class BeforeEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before-eq", localization); }
@@ -23622,12 +22805,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-/*
- * Represents the `Less then` (**Is before**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug filter_menu %}#toc-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug filter_menu %}#toc-order-of-filter-operators)
+/**
+ * Represents the `Less than` (**Is before**) [date filter](slug:filtering_grid#toc-date-filter) operator.
+ * [See example](slug:filter_row#toc-default-filter-operator).
  */
 class BeforeFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before", localization); }
@@ -24067,27 +23247,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 /**
- * 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>
  * ```
  */
 class ColumnChooserComponent {
@@ -24104,10 +23275,14 @@ 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;
     }
@@ -24366,65 +23541,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 /**
- * Represents the checkbox for selecting columns in the Grid. If the column is
- * defined as empty, it renders a default checkbox for row selection.
- * You can also define the content of the column inside an `<ng-template>` tag.
- * The input requires you to include the `SelectionCheckbox` option.
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `columnIndex`&mdash;The current column index.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, it will be `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `column`&mdash;The current column instance.
- * - `isNew`&mdash;The state of the current item.
- *
- * For more examples, refer to:
- * - [Selecting or deselecting all items on a page]({% slug selection_grid %}#toc-select-all-feature)
- * - [Persisting the selection]({% slug selection_grid %}#toc-in-combination-with-the-select-all-feature)
+ * Represents the checkbox column for selecting rows in the Grid. [See example](slug:grid_row_selection#toc-select-all-checkbox).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </kendo-grid-column>
- *          <kendo-grid-checkbox-column title="Default checkbox">
- *          </kendo-grid-checkbox-column>
- *          <kendo-grid-checkbox-column title="Custom checkbox">
- *            <ng-template kendoGridCellTemplate let-idx="rowIndex">
- *              Select row <input [kendoGridSelectionCheckbox]="idx" />
- *            </ng-template>
- *          </kendo-grid-checkbox-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```hmtl
+ * <kendo-grid [selectable]="{enabled: true, checkboxOnly: true}">
+ *   <kendo-grid-checkbox-column title="Default checkbox"></kendo-grid-checkbox-column>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class CheckboxColumnComponent extends ColumnBase {
@@ -24931,7 +24055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 /**
- * Represents the drag handle for reordering rows in the Grid.
+ * Represents the drag handle for reordering rows in the Grid ([see example](slug:reordering_rows_grid))
  */
 class RowReorderColumnComponent extends ColumnBase {
     constructor(parent, idService) {
@@ -25845,29 +24969,19 @@ const declarations$2 = [
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid module
- * import { GridModule } from '@progress/kendo-angular-grid';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { GridModule } from '@progress/kendo-angular-grid';
+ * import { BrowserModule } from "@angular/platform-browser";
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule], // import Grid module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class GridModule {
@@ -25950,6 +25064,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
+/**
+ * Represents the Kendo UI PDFMargin component for Angular.
+ * The supported units are:
+ * `"mm"`
+ * `"cm"`
+ * `"in"`
+ * `"pt"` (default).
+ * Numbers are considered to be points (`"pt"`).
+ */
 class PDFMarginComponent extends PDFExportMarginComponent {
 }
 PDFMarginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFMarginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -26485,28 +25608,19 @@ const declarations$1 = [
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid and PDF modules
- * import { GridModule, PDFModule } from '@progress/kendo-angular-grid';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { GridModule, PDFModule } from '@progress/kendo-angular-grid';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule, PDFModule], // import Grid and PDF modules
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule, PDFModule],
  *     bootstrap:    [AppComponent]
  * })
- * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
+ * export class AppModule {}
  *
  * ```
  */
@@ -26766,29 +25880,19 @@ const declarations = [ExcelComponent, ExcelCommandDirective];
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid and Excel modules
- * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
  * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule, ExcelModule], // import Grid and Excel modules
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule, ExcelModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class ExcelModule {