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

package/columns/checkbox-column.component.d.ts

@@ -8,65 +8,14 @@ import { CellTemplateDirective } from '../rendering/cell-template.directive';
 import { IdService } from '../common/id.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the checkbox for selecting columns in the Grid. If the column is
- * defined as empty, it renders a default checkbox for row selection.
- * You can also define the content of the column inside an `<ng-template>` tag.
- * The input requires you to include the `SelectionCheckbox` option.
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `columnIndex`&mdash;The current column index.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, it will be `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `column`&mdash;The current column instance.
- * - `isNew`&mdash;The state of the current item.
- *
- * For more examples, refer to:
- * - [Selecting or deselecting all items on a page]({% slug selection_grid %}#toc-select-all-feature)
- * - [Persisting the selection]({% slug selection_grid %}#toc-in-combination-with-the-select-all-feature)
+ * Represents the checkbox column for selecting rows in the Grid. [See example](slug:grid_row_selection#toc-select-all-checkbox).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </kendo-grid-column>
- *          <kendo-grid-checkbox-column title="Default checkbox">
- *          </kendo-grid-checkbox-column>
- *          <kendo-grid-checkbox-column title="Custom checkbox">
- *            <ng-template kendoGridCellTemplate let-idx="rowIndex">
- *              Select row <input [kendoGridSelectionCheckbox]="idx" />
- *            </ng-template>
- *          </kendo-grid-checkbox-column>
- *        </kendo-grid>
- *    `
- * })
- *
- * class AppComponent {
- *    public gridData: any[];
- *
- *    constructor() {
- *        this.gridData = products;
- *    }
- * }
- *
- * const products = [{
- *    "ProductID": 1,
- *    "ProductName": "Chai",
- *    "UnitPrice": 18.0000,
- *    "Discontinued": true
- *  }, {
- *    "ProductID": 2,
- *    "ProductName": "Chang",
- *    "UnitPrice": 19.0000,
- *    "Discontinued": false
- *  }
- * ];
- *
+ * ```hmtl
+ * <kendo-grid [selectable]="{enabled: true, checkboxOnly: true}">
+ *   <kendo-grid-checkbox-column title="Default checkbox"></kendo-grid-checkbox-column>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class CheckboxColumnComponent extends ColumnBase {

package/columns/column-base.d.ts

@@ -30,9 +30,9 @@ export declare class ColumnBase {
      */
     matchesMedia: boolean;
     /**
-     * The column index after reordering.
+     * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
      *
-     * > `orderIndex` is a read-only property. Setting this field does not affect column order.
+     * @default 0
      */
     orderIndex: number;
     /**
@@ -64,12 +64,14 @@ export declare class ColumnBase {
     reorderable: boolean;
     /**
      * 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
      */
     minResizableWidth: number;
     /**
      * The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
      * By default, the maximum width is not restricted.
+     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
      */
     maxResizableWidth: number;
     /**
@@ -90,44 +92,6 @@ export declare class ColumnBase {
      *
      * @default false
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120" [locked]="true">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = products;
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     *
-     * ```
      */
     set locked(value: boolean);
     get locked(): boolean;
@@ -148,85 +112,35 @@ export declare class ColumnBase {
      * Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
      * If you set the `hidden` property, the behavior of `media` is overridden.
      *
-     * @example
-     * ```html
-     * <kendo-grid>
-     *    <kendo-grid-column field="UnitPrice" media="(min-width: 320px)">
-     *    </kendo-grid-column>
-     * </kendo-grid>
-     * ```
-     *
      * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
      * ([see example]({% slug styling_responsive_grid %}#toc-bootstrap-4-compatibility)):
-     * * `"xs"`&mdash;Equivalent to `"(max-width: 576px)"`.
-     * * `"sm"`&mdash;Equivalent to `"(min-width: 576px)"`.
-     * * `"md"`&mdash;Equivalent to `"(min-width: 768px)"`.
-     * * `"lg"`&mdash;Equivalent to `"(min-width: 992px)"`.
-     * * `"xl"`&mdash;Equivalent to `"(min-width: 1200px)"`.
-     *
-     * @example
-     * ```html
-     * <kendo-grid>
-     *    <kendo-grid-column field="UnitPrice" media="md">
-     *    </kendo-grid-column>
-     * </kendo-grid>
-     * ```
      */
     media: string;
     /**
      * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+     * @default true
      */
     lockable: boolean;
     /**
      * Specifies if the column can be stuck or unstuck from the column menu.
+     * @default true
      */
     stickable: boolean;
     /**
      * Specifies if the column menu will be shown for the column.
+     * @default true
      */
     columnMenu: boolean;
     /**
      * Specifies if the column will be included in the column-chooser list.
+     * @default true
      */
     includeInChooser: boolean;
     /**
      * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
      * to apply the property, the `style` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [style]="{'text-align': 'right'}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     style: {
         [key: string]: string;
@@ -234,41 +148,8 @@ export declare class ColumnBase {
     /**
      * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
      * the `headerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [headerStyle]="{'text-align': 'right'}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
      *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     headerStyle: {
         [key: string]: string;
@@ -276,41 +157,8 @@ export declare class ColumnBase {
     /**
      * Sets the custom styles for the filter row cell. Under the hood, to apply the property,
      * the `filterStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 180px" [filterable]="true">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [filterStyle]="{'padding': '25px'}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="200">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * export class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
      *
-     * ```
      */
     filterStyle: {
         [key: string]: string;
@@ -318,95 +166,18 @@ export declare class ColumnBase {
     /**
      * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
      * the `footerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive.
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [footerStyle]="{'text-align': 'right'}">
-     *              <ng-template kendoGridFooterTemplate>
-     *                  footer text
-     *              </ng-template>
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     footerStyle: {
         [key: string]: string;
     };
     /**
      * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
      * To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
      * and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
      *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [class]="{'myClass': true}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     cssClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -414,49 +185,8 @@ export declare class ColumnBase {
     /**
      * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
      * the `headerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [headerClass]="{'myClass': true}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
      *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
-     *
-     * ```
      */
     headerClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -464,47 +194,8 @@ export declare class ColumnBase {
     /**
      * Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
      * the `filterClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        .k-grid-header .myClass { background-color: #ffff00; }
-     *    `],
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 155px" [filterable]="true">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [filterClass]="{'myClass': true}">
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="200">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * export class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
      *
-     * ```
      */
     filterClass: string | string[] | Set<string> | {
         [key: string]: any;
@@ -512,52 +203,8 @@ export declare class ColumnBase {
     /**
      * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
      * the `footerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive.
-     *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        tr .myClass {
-     *            text-align: right
-     *       }
-     *    `],
-     *    template: `
-     *        <kendo-grid [data]="gridData" style="height: 200px">
-     *          <kendo-grid-column field="ProductName" title="Product Name" [width]="200" [footerClass]="{'myClass': true}">
-     *              <ng-template kendoGridFooterTemplate>
-     *                  footer text
-     *              </ng-template>
-     *          </kendo-grid-column>
-     *          <kendo-grid-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-grid-column>
-     *        </kendo-grid>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public gridData: any[];
-     *
-     *    constructor() {
-     *        this.gridData = [{
-     *            "ProductID": 1,
-     *            "ProductName": "Chai",
-     *            "UnitPrice": 18.0000,
-     *            "Discontinued": true
-     *          }, {
-     *            "ProductID": 2,
-     *            "ProductName": "Chang",
-     *            "UnitPrice": 19.0000,
-     *            "Discontinued": false
-     *          }];
-     *    }
-     * }
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
      *
-     * ```
      */
     footerClass: string | string[] | Set<string> | {
         [key: string]: any;

package/columns/column-group.component.d.ts

@@ -12,56 +12,17 @@ import * as i0 from "@angular/core";
 export declare function isColumnGroupComponent(column: any): column is ColumnGroupComponent;
 /**
  * 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 declare class ColumnGroupComponent extends ColumnBase {