@progress/kendo-angular-grid 12.0.0-develop.10 → 12.0.0-develop.12

package/column-menu/column-menu.service.d.ts

@@ -10,27 +10,15 @@ import * as i0 from "@angular/core";
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-x" (click)="service.close()"
- *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
- *              <kendo-grid-columnmenu-sort [service]="service">
- *              </kendo-grid-columnmenu-sort>
- *          </ng-template>
- *          <kendo-grid-column field="Field1"></kendo-grid-column>
- *          <kendo-grid-column field="Field2"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true">
+ *    <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *       <span class="k-icon k-i-x" (click)="service.close()" </span>
+ *       <kendo-grid-columnmenu-sort [service]="service">
+ *       </kendo-grid-columnmenu-sort>
+ *    </ng-template>
+ *    <kendo-grid-column field="Field1"></kendo-grid-column>
+ * </kendo-grid>
  *
  * ```
  */

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;
     /**
@@ -90,44 +90,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 +110,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 +146,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 +155,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 +164,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 +183,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 +192,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 +201,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/sort-settings.d.ts

@@ -29,7 +29,15 @@ export interface SingleSortSettings extends ColumnSortSettings {
     mode?: 'single';
 }
 /**
- * Specifies a modifier key.
+ * Specifies a modifier key when multiple sort. [See example](slug:multi_sort_grid#toc-sort-key-modifier).
+ *
+ * @example
+ * ```html
+ * <kendo-grid [sortable]="{ mode: 'multiple', multiSortKey: 'shift' }">
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   ...
+ * </kendo-grid>
+ * ```
  */
 export declare type ModifierKey = 'none' | 'ctrl' | 'shift' | 'alt';
 /**
@@ -60,9 +68,17 @@ export interface MultipleSortSettings extends ColumnSortSettings {
     multiSortKey?: ModifierKey;
 }
 /**
- * Defines the settings for sorting the Grid.
- * Can be of type `boolean`, [SingleSortSettings]({% slug api_grid_singlesortsettings %}),
- * or [MultipleSortSettings]({% slug api_grid_multiplesortsettings %}).
+ * Defines the settings for sorting the Grid. [See example](slug:multi_sort_grid).
+ *
+ * The available options are:
+ * * `boolean`
+ * * [SingleSortSettings]({% slug api_grid_singlesortsettings %})
+ * * [MultipleSortSettings]({% slug api_grid_multiplesortsettings %})
+ *
+ * @example
+ * ```html
+ * <kendo-grid [sorting]="true"></kendo-grid>
+ * ```
  */
 export declare type SortSettings = boolean | SingleSortSettings | MultipleSortSettings;
 /**

package/common/fetch-data-callback.d.ts

@@ -7,6 +7,6 @@ import { Observable } from "rxjs";
 import { GridComponent } from "../grid.component";
 /**
  * The function that is used to get the exported data options. By default, uses the current data and group of the Grid.
- * To export data that is different from the current Grid data, provide a custom function.
+ * To export data that is different from the current Grid data, provide a custom function. [See example](slug:excelexport_grid#toc-exporting-specific-data)
  */
 export declare type FetchDataCallback = (component: GridComponent) => ExcelExportData | Promise<ExcelExportData> | Observable<ExcelExportData>;

package/common/preventable-event.d.ts

@@ -14,7 +14,7 @@ export declare abstract class PreventableEvent {
      */
     preventDefault(): void;
     /**
-     * Returns `true` if the event was prevented
+     * Returns a respective boolean if the event was prevented
      * by any of its subscribers.
      *
      * @returns `true` if the default action was prevented.

package/common/single-popup.service.d.ts

@@ -21,7 +21,7 @@ export declare class PopupCloseEvent extends PreventableEvent {
 }
 /**
  * The service that is used for the popups of the filter and column menus
- * ([see example]({% slug filter_menu %}#toc-custom-filter-row-components)#toc-filter-menu-with-popup).
+ * ([see example]({% slug filter_menu %}#toc-filter-menu-with-popup)).
  */
 export declare class SinglePopupService implements OnDestroy {
     private popupService;

package/common/size-options.d.ts

@@ -3,7 +3,6 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Represents the possible size options of the Grid.
- * @default `medium`
+ * Represents the possible size options of the Grid. [See example](slug:sizing_grid).
  */
 export declare type GridSize = 'small' | 'medium' | 'none';

package/data/grid-item.interface.d.ts

@@ -6,8 +6,11 @@ import { DataItem } from './data-item.interface';
 import { GroupItem } from './group-item.interface';
 import { GroupFooterItem } from './group-footer-item.interface';
 /**
- * Represents an item that will be rendered by the Grid.
- * Can be a [DataItem]({% slug api_grid_dataitem %}), a [GroupItem]({% slug api_grid_groupitem %}),
- * or a [GroupFooterItem]({% slug api_grid_groupfooteritem %}). ([See example]({% slug api_grid_gridcomponent %}#toc-trackby))
+ * Represents the item by which the Grid tracks changes. [See example](slug:track_changes_grid).
+ *
+ * The possible values are:
+ * * [`DataItem`]({% slug api_grid_dataitem %}).
+ * * [`GroupItem`]({% slug api_grid_groupitem %}).
+ * * [`GroupFooterItem`]({% slug api_grid_groupfooteritem %}).
  */
 export declare type GridItem = DataItem | GroupItem | GroupFooterItem;

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

@@ -11,27 +11,15 @@ import * as i1 from "./../filtering/menu/menu-tabbing.service";
  * [ColumnMenuTemplate]({% slug api_grid_columnmenutemplatedirective %}) directive.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <span class="k-icon k-i-x" (click)="service.close()"
- *                  style="position: absolute; right: 5px; top: 5px;cursor: pointer;"></span>
- *              <kendo-grid-columnmenu-sort [service]="service">
- *              </kendo-grid-columnmenu-sort>
- *          </ng-template>
- *          <kendo-grid-column field="Field1"></kendo-grid-column>
- *          <kendo-grid-column field="Field2"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
- * }
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true">
+ *    <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *       <span class="k-icon k-i-x" (click)="service.close()" </span>
+ *       <kendo-grid-columnmenu-sort [service]="service">
+ *       </kendo-grid-columnmenu-sort>
+ *    </ng-template>
+ *    <kendo-grid-column field="Field1"></kendo-grid-column>
+ * </kendo-grid>
  *
  * ```
  */