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

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

@@ -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() {
@@ -2826,8 +2827,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1682434440,
-    version: '12.0.0',
+    publishDate: 1683098077,
+    version: '12.0.1-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2953,8 +2954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
  *
  * The template context is set to the current form group and the following additional fields are passed:
- * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
- * If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax, for example, `let-formGroup`. If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
  * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.
  * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
@@ -3215,6 +3215,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;
@@ -3469,113 +3470,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;
     }
@@ -3684,62 +3628,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 {
@@ -3765,24 +3662,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;
@@ -3826,57 +3708,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;
@@ -4008,56 +3841,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 {
@@ -6909,7 +6703,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) {
@@ -7011,7 +6805,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) {
@@ -7267,54 +7061,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) {
@@ -7438,7 +7185,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) {
@@ -7539,7 +7286,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) {
@@ -7631,7 +7378,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) {
@@ -7641,97 +7388,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 = [];
@@ -9155,8 +8813,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";
     }
@@ -9620,8 +9279,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) {
@@ -9634,6 +9305,7 @@ class StringFilterMenuComponent extends StringFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -9764,18 +9436,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);
@@ -9988,21 +9663,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) {
@@ -10015,6 +9689,7 @@ class NumericFilterMenuComponent extends NumericFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
         /**
@@ -10187,25 +9862,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);
@@ -10440,21 +10119,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) {
@@ -10467,6 +10145,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;
     }
@@ -10723,21 +10402,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) {
@@ -11386,27 +11065,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 {
@@ -11563,34 +11227,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 {
@@ -11670,33 +11320,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>
  *
  * ```
  */
@@ -11777,33 +11415,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 {
@@ -11821,6 +11446,7 @@ class ColumnMenuPositionComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12152,33 +11778,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 {
@@ -12198,6 +11810,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12306,33 +11919,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 {
@@ -12350,6 +11950,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -12569,34 +12170,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 {
@@ -12680,36 +12268,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 {
@@ -12725,6 +12299,9 @@ class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
             console.warn(ColunnMenuErrorMessages.autoSizeColumn);
         }
     }
+    /**
+     * Resizes a specified column to the minimum possible width so that it fits the widest header or cell content without wrapping.
+     */
     autoSizeColumn() {
         autoSizeColumn(this.ctx.grid, this.service, this.column);
     }
@@ -12760,36 +12337,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 {
@@ -12805,6 +12367,9 @@ class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
             console.warn(ColunnMenuErrorMessages.autoSizeAllColumns);
         }
     }
+    /**
+     * Resizes all columns to the minimum possible width so that they fit the widest header or cell content without wrapping.
+     */
     autoSizeAllColumns() {
         autoSizeColumn(this.ctx.grid, this.service);
     }
@@ -12837,7 +12402,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) {
@@ -13188,6 +12761,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) {
@@ -13206,6 +12793,7 @@ class FilterCellOperatorsComponent {
         /**
          * Determines if the list of operators will be displayed.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         /**
@@ -13411,36 +12999,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);
@@ -13506,19 +13093,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) {
@@ -13528,12 +13116,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);
@@ -13632,19 +13222,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) {
@@ -13723,29 +13314,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);
@@ -15794,68 +15398,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 {
@@ -18899,33 +18455,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 {
@@ -18961,64 +18495,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;
         /**
@@ -19027,35 +18522,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;
         /**
@@ -19080,8 +18571,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;
         /**
@@ -19442,50 +18933,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) {
         if (isDevMode() && typeof fn !== 'function') {
@@ -19786,9 +19235,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.
      */
@@ -19802,9 +19251,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.
      */
@@ -20062,7 +19511,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.
@@ -20117,7 +19566,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();
@@ -20133,138 +19582,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;
@@ -20325,10 +19655,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.
@@ -20379,67 +19709,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));
@@ -22829,7 +22098,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) {
@@ -23027,11 +22296,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); }
@@ -23058,11 +22324,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); }
@@ -23089,11 +22353,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); }
@@ -23120,11 +22382,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); }
@@ -23151,11 +22411,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); }
@@ -23182,11 +22440,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); }
@@ -23213,11 +22469,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); }
@@ -23244,11 +22498,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); }
@@ -23275,11 +22527,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); }
@@ -23306,11 +22556,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); }
@@ -23336,12 +22584,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); }
@@ -23368,11 +22613,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); }
@@ -23398,12 +22640,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); }
@@ -23429,12 +22669,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); }
@@ -23460,12 +22698,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); }
@@ -23500,12 +22735,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); }
@@ -23540,12 +22772,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); }
@@ -23580,12 +22809,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); }
@@ -24025,27 +23251,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 {
@@ -24062,10 +23279,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;
     }
@@ -24324,65 +23545,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
- *  }
- * ];
- *
+ * ```html
+ * <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 {
@@ -24439,10 +23609,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [edit]({% slug api_grid_gridcomponent %}#toc-edit) event
  * is triggered ([see example]({% slug basics_editing_grid %})).
  *
- * > When the row is in the edit mode, the button with `kendoGridEditCommand` is automatically hidden.
+ * When the row is in the `edit` mode, the button with `kendoGridEditCommand` is automatically hidden.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate>
@@ -24889,7 +24059,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) {
@@ -25898,6 +25068,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 });