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

package/esm2020/columns/checkbox-column.component.mjs

@@ -10,65 +10,14 @@ import * as i0 from "@angular/core";
 import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
 /**
- * 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>
  * ```
  */
 export class CheckboxColumnComponent extends ColumnBase {

package/esm2020/columns/column-base.mjs

@@ -61,6 +61,7 @@ export 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;

package/esm2020/columns/column-group.component.mjs

@@ -17,56 +17,17 @@ export 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>
  * ```
  */
 export class ColumnGroupComponent extends ColumnBase {

package/esm2020/columns/column.component.mjs

@@ -23,113 +23,56 @@ export 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>
  * ```
  */
 export 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;
     }

package/esm2020/columns/command-column.component.mjs

@@ -11,68 +11,20 @@ import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
 /**
  * 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>
  * ```
  */
 export class CommandColumnComponent extends ColumnBase {

package/esm2020/columns/reorder-column.component.mjs

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "./column-base";
 import * as i2 from "../common/id.service";
 /**
- * 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))
  */
 export class RowReorderColumnComponent extends ColumnBase {
     constructor(parent, idService) {

package/esm2020/columns/span-column.component.mjs

@@ -26,62 +26,15 @@ export 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>
  * ```
  */
 export class SpanColumnComponent extends ColumnBase {
@@ -107,24 +60,9 @@ export 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;
@@ -168,57 +106,8 @@ export 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;

package/esm2020/editing/edit-command.directive.mjs

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

package/esm2020/editing/edit-template.directive.mjs

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

package/esm2020/filtering/cell/boolean-filter-cell.component.mjs

@@ -18,19 +18,20 @@ import * as i6 from "../filter-input.directive";
 import * as i7 from "../../navigation/focusable.directive";
 /**
  * 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>
+ * ```
  */
 export class BooleanFilterCellComponent extends BooleanFilterComponent {
     constructor(filterService, localization, cd, sizingService) {

package/esm2020/filtering/cell/date-filter-cell.component.mjs

@@ -17,29 +17,42 @@ import * as i5 from "@progress/kendo-angular-dateinputs";
 import * as i6 from "../filter-input.directive";
 import * as i7 from "../../navigation/focusable.directive";
 /**
- * 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>
+ * ```
  */
 export 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);