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

package/navigation/focusable.directive.d.ts

@@ -11,47 +11,16 @@ import * as i0 from "@angular/core";
  * [focus in a navigable Grid]({% slug keyboard_navigation_grid %}).
  *
  * @example
- * ```ts-preview
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
- *      <kendo-grid [data]="data" [navigable]="true">
- *          <kendo-grid-column field="ProductID" title="Product ID" [width]="100">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name" [width]="150">
- *          </kendo-grid-column>
- *          <kendo-grid-column>
- *              <ng-template kendoGridCellTemplate let-dataItem>
- *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button kendoGridFocusable>Update</button>
- *              </ng-template>
- *          </kendo-grid-column>
- *          <kendo-grid-column [width]="100">
- *              <ng-template kendoGridCellTemplate>
- *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button kendoGridFocusable>Delete</button>
- *              </ng-template>
- *          </kendo-grid-column>
- *      </kendo-grid>
- *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
- *    `
- * })
- *
- * class AppComponent {
- *     public readonly data: any = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": true
- *     }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": false
- *     }];
- * }
+ * ```html
+ * <kendo-grid [data]="data" [navigable]="true">
+ *    <kendo-grid-column>
+ *       <ng-template kendoGridCellTemplate let-dataItem>
+ *          <!-- The first focusable element will be focused when pressing Enter on the cell -->
+ *          <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *          <button kendoGridFocusable>Update</button>
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class FocusableDirective implements FocusableElement, AfterViewInit, OnDestroy {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-grid",
-  "version": "12.0.0-develop.8",
+  "version": "12.0.0-develop.9",
   "description": "Kendo UI Grid for Angular - high performance data grid with paging, filtering, virtualization, CRUD, and more.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -32,23 +32,24 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.17.2",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "12.0.0-develop.8",
-    "@progress/kendo-angular-common": "12.0.0-develop.8",
-    "@progress/kendo-angular-dateinputs": "12.0.0-develop.8",
-    "@progress/kendo-angular-dropdowns": "12.0.0-develop.8",
-    "@progress/kendo-angular-excel-export": "12.0.0-develop.8",
-    "@progress/kendo-angular-icons": "12.0.0-develop.8",
-    "@progress/kendo-angular-inputs": "12.0.0-develop.8",
-    "@progress/kendo-angular-intl": "12.0.0-develop.8",
-    "@progress/kendo-angular-l10n": "12.0.0-develop.8",
-    "@progress/kendo-angular-label": "12.0.0-develop.8",
-    "@progress/kendo-angular-pdf-export": "12.0.0-develop.8",
-    "@progress/kendo-angular-popup": "12.0.0-develop.8",
+    "@progress/kendo-angular-buttons": "12.0.0-develop.9",
+    "@progress/kendo-angular-common": "12.0.0-develop.9",
+    "@progress/kendo-angular-dateinputs": "12.0.0-develop.9",
+    "@progress/kendo-angular-dropdowns": "12.0.0-develop.9",
+    "@progress/kendo-angular-excel-export": "12.0.0-develop.9",
+    "@progress/kendo-angular-icons": "12.0.0-develop.9",
+    "@progress/kendo-angular-inputs": "12.0.0-develop.9",
+    "@progress/kendo-angular-intl": "12.0.0-develop.9",
+    "@progress/kendo-angular-l10n": "12.0.0-develop.9",
+    "@progress/kendo-angular-label": "12.0.0-develop.9",
+    "@progress/kendo-angular-pdf-export": "12.0.0-develop.9",
+    "@progress/kendo-angular-popup": "12.0.0-develop.9",
+    "@progress/kendo-angular-utils": "12.0.0-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "12.0.0-develop.8",
+    "@progress/kendo-angular-schematics": "12.0.0-develop.9",
     "@progress/kendo-common": "^0.2.0",
     "@progress/kendo-file-saver": "^1.0.0"
   },

package/pager/pager-template.directive.d.ts

@@ -6,7 +6,8 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the pager template which helps to customize the pager appearance in the Grid. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-grid>`.
+ * template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-grid>` tag
+ * [see example](slug:pager_template_grid).
  *
  * The template context provides the following fields:
  * * `currentPage`&mdash;The index of the displayed page.
@@ -14,53 +15,19 @@ import * as i0 from "@angular/core";
  * * `skip`&mdash;The current skip value.
  * * `total`&mdash;The total number of records.
  * * `totalPages`&mdash;The total number of available pages.
- * *  Needs to be provided as an input to inner pager components used within the template when the Grid is navigable.
  *
  * @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-info></kendo-pager-info>
- *          Current page: {{currentPage}}
- *       </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
- *       }
- *     ];
- * }
- *
+ * ```html
+ * <kendo-grid ... [pageable]="true">
+ *   <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
+ *     <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
+ *     <kendo-pager-next-buttons></kendo-pager-next-buttons>
+ *     <kendo-pager-info></kendo-pager-info>
+ *       Current page: {{currentPage}}
+ *   </ng-template>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class PagerTemplateDirective {

package/pdf/pdf-template.directive.d.ts

@@ -7,50 +7,22 @@ import { PDFExportTemplateDirective } from '@progress/kendo-angular-pdf-export';
 import * as i0 from "@angular/core";
 /**
  * Represents the PDF page template of the Grid that helps to customize the PDF pages. To define a page template,
- * nest an `<ng-template>` tag with the `kendoGridPDFTemplate` directive inside `<kendo-grid-pdf>`.
+ * nest an `<ng-template>` tag with the `kendoGridPDFTemplate` directive inside `<kendo-grid-pdf>` tag.
  *
  * The template context provides the following fields:
  * - `pageNumber`&mdash;Defines PDF page number.
  * - `totalPages`&mdash;Defines the total number of PDF pages.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData">
- *             <ng-template kendoGridToolbarTemplate>
- *                 <button kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
- *             </ng-template>
- *             <kendo-grid-column field="ProductName">
- *             </kendo-grid-column>
- *              <kendo-grid-column field="UnitPrice">
- *             </kendo-grid-column>
- *             <kendo-grid-pdf fileName="Products.pdf" paperSize="A4" [margin]="{ top: '1cm', left: '1cm', right: '1cm', bottom: '1cm' }">
- *                 <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
- *                     <div style="position: absolute;top: 5px; left: 5px;">
- *                         Page {{ pageNum }} of {{ totalPages }}
- *                     </div>
- *                 </ng-template>
- *             </kendo-grid-pdf>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000
- *       }
- *     ];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   ...
+ *   <kendo-grid-pdf fileName="Products.pdf" paperSize="A4">
+ *     <ng-template kendoGridPDFTemplate let-pageNumber="pageNumber" let-totalPages="totalPages">
+ *         Page {{ pageNumber }} of {{ totalPages }}
+ *     </ng-template>
+ *   </kendo-grid-pdf>
+ * </kendo-grid>
  * ```
  */
 export declare class PDFTemplateDirective extends PDFExportTemplateDirective {

package/rendering/body.module.d.ts

@@ -18,19 +18,20 @@ import * as i12 from "../editing/remove-command.directive";
 import * as i13 from "../editing/add-command.directive";
 import * as i14 from "./cell-loading.template.directive";
 import * as i15 from "./loading-template.directive";
-import * as i16 from "@angular/common";
-import * as i17 from "@angular/forms";
-import * as i18 from "../shared.module";
-import * as i19 from "../grouping/group.module";
-import * as i20 from "@progress/kendo-angular-inputs";
-import * as i21 from "@progress/kendo-angular-dateinputs";
-import * as i22 from "@progress/kendo-angular-common";
+import * as i16 from "../columns/reorder-column.component";
+import * as i17 from "@angular/common";
+import * as i18 from "@angular/forms";
+import * as i19 from "../shared.module";
+import * as i20 from "../grouping/group.module";
+import * as i21 from "@progress/kendo-angular-inputs";
+import * as i22 from "@progress/kendo-angular-dateinputs";
+import * as i23 from "@progress/kendo-angular-common";
 /**
  * @hidden
  */
 export declare class BodyModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<BodyModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BodyModule, [typeof i1.CommandColumnComponent, typeof i2.CheckboxColumnComponent, typeof i3.SelectionCheckboxDirective, typeof i4.CellTemplateDirective, typeof i5.EditTemplateDirective, typeof i6.TableBodyComponent, typeof i7.NoRecordsTemplateDirective, typeof i8.CellComponent, typeof i9.EditCommandDirective, typeof i10.CancelCommandDirective, typeof i11.SaveCommandDirective, typeof i12.RemoveCommandDirective, typeof i13.AddCommandDirective, typeof i14.CellLoadingTemplateDirective, typeof i15.LoadingTemplateDirective], [typeof i16.CommonModule, typeof i17.ReactiveFormsModule, typeof i17.FormsModule, typeof i18.SharedModule, typeof i19.GroupModule, typeof i20.NumericTextBoxModule, typeof i21.DatePickerModule, typeof i22.ResizeSensorModule], [typeof i1.CommandColumnComponent, typeof i2.CheckboxColumnComponent, typeof i3.SelectionCheckboxDirective, typeof i4.CellTemplateDirective, typeof i5.EditTemplateDirective, typeof i6.TableBodyComponent, typeof i7.NoRecordsTemplateDirective, typeof i8.CellComponent, typeof i9.EditCommandDirective, typeof i10.CancelCommandDirective, typeof i11.SaveCommandDirective, typeof i12.RemoveCommandDirective, typeof i13.AddCommandDirective, typeof i14.CellLoadingTemplateDirective, typeof i15.LoadingTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BodyModule, [typeof i1.CommandColumnComponent, typeof i2.CheckboxColumnComponent, typeof i3.SelectionCheckboxDirective, typeof i4.CellTemplateDirective, typeof i5.EditTemplateDirective, typeof i6.TableBodyComponent, typeof i7.NoRecordsTemplateDirective, typeof i8.CellComponent, typeof i9.EditCommandDirective, typeof i10.CancelCommandDirective, typeof i11.SaveCommandDirective, typeof i12.RemoveCommandDirective, typeof i13.AddCommandDirective, typeof i14.CellLoadingTemplateDirective, typeof i15.LoadingTemplateDirective, typeof i16.RowReorderColumnComponent], [typeof i17.CommonModule, typeof i18.ReactiveFormsModule, typeof i18.FormsModule, typeof i19.SharedModule, typeof i20.GroupModule, typeof i21.NumericTextBoxModule, typeof i22.DatePickerModule, typeof i23.ResizeSensorModule], [typeof i1.CommandColumnComponent, typeof i2.CheckboxColumnComponent, typeof i3.SelectionCheckboxDirective, typeof i4.CellTemplateDirective, typeof i5.EditTemplateDirective, typeof i6.TableBodyComponent, typeof i7.NoRecordsTemplateDirective, typeof i8.CellComponent, typeof i9.EditCommandDirective, typeof i10.CancelCommandDirective, typeof i11.SaveCommandDirective, typeof i12.RemoveCommandDirective, typeof i13.AddCommandDirective, typeof i14.CellLoadingTemplateDirective, typeof i15.LoadingTemplateDirective, typeof i16.RowReorderColumnComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BodyModule>;
 }

package/rendering/cell-loading.template.directive.d.ts

@@ -7,17 +7,20 @@ import * as i0 from "@angular/core";
 /**
  * Represents the virtual scrolling cell template of the Grid while loading new data. Provides an option to customize the
  * appearance of the indicator that is displayed while new data is loading. To define the loading cell template,
- * nest an `<ng-template>` tag with the `kendoGridCellLoadingTemplate` directive inside `<kendo-grid>` ([see example]({% slug virtualscrolling_grid %}#toc-custom-loading-skeleton)).
+ * nest an `<ng-template>` tag with the `kendoGridCellLoadingTemplate` directive inside `<kendo-grid>` tag [see example]({% slug virtualscrolling_grid %}#toc-custom-loading-skeleton).
  *
- * The template context is set to the current column, and utilizes the `let-x` syntax&mdash;for example, `let-column`.
+ *
+ * The template context is set to the current column and the following additional field is passed:
+ *
+ * - `column`&mdash;The current column instance. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax (for example `let-column`).
  *
  * @example
- * ```ts-no-run
- *       <kendo-grid [data]="data" scrollable="virtual" [rowHeight]="36">
- *         <ng-template kendoGridCellLoadingTemplate let-column>
- *             ...
- *         </ng-template>
- *       </kendo-grid>
+ * ```html
+ * <kendo-grid ... scrollable="virtual" [rowHeight]="36" [height]="450">
+ *   <ng-template kendoGridCellLoadingTemplate let-column>
+ *    ...
+ *   </ng-template>
+ * </kendo-grid>
  * ```
  */
 export declare class CellLoadingTemplateDirective {

package/rendering/cell-template.directive.d.ts

@@ -5,9 +5,9 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the column cell template of the Grid ([more information and example]({% slug templates_columns_grid %}#toc-cell-template)).
- * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
- * with the `kendoGridCellTemplate` directive inside a `<kendo-grid-column>` tag.
+ * Represents the column cell template of the Grid.
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag with the
+ * `kendoGridCellTemplate` directive inside a `<kendo-grid-column>` tag [see example](slug:templates_columns_grid#toc-cell-template).
  *
  * The template context is set to the current data item and the following additional fields are passed:
  * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
@@ -16,38 +16,14 @@ import * as i0 from "@angular/core";
  * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData">
- *             <kendo-grid-column field="ProductName">
- *                 <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
- *                     Data Row #: {{rowIndex}} /
- *                     <strong>{{dataItem.ProductName}}</strong>
- *                     ({{dataItem.Discontinued ? "discontinued" : "active"}})
- *                 </ng-template>
- *             </kendo-grid-column>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData" ...>
+ *   <kendo-grid-column field="ProductName">
+ *     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
+ *       Data Row: {{rowIndex}}
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class CellTemplateDirective {

package/rendering/cell.component.d.ts

@@ -9,6 +9,7 @@ import { FormGroup } from '@angular/forms';
 import { CellContext } from './common/cell-context';
 import { IdService } from '../common/id.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -19,6 +20,8 @@ export declare class CellComponent implements DoCheck {
     private localizationService;
     private cellContext;
     get commandCellClass(): boolean;
+    get dragHandleCellClass(): boolean;
+    get dragRowHandleLabel(): string;
     column: any;
     columnIndex: number;
     isNew: boolean;
@@ -28,6 +31,7 @@ export declare class CellComponent implements DoCheck {
     set rowIndex(index: number);
     get rowIndex(): number;
     dataItem: any;
+    reorderIcon: SVGIcon;
     get isEdited(): boolean;
     get showLoading(): boolean;
     get formGroup(): FormGroup;
@@ -40,6 +44,7 @@ export declare class CellComponent implements DoCheck {
     get selectionCheckboxLabel(): string;
     get isSpanColumn(): boolean;
     get childColumns(): ColumnComponent[];
+    get isRowReorderColumn(): boolean;
     private _rowIndex;
     private get isColumnEditable();
     private _templateContext;

package/rendering/details/detail-template.directive.d.ts

@@ -19,64 +19,16 @@ export declare type DetailTemplateShowIfFn = (dataItem: any, index: number) => b
  * To define the detail template, nest an `<ng-template>` tag with the `kendoGridDetailTemplate` directive inside a `<kendo-grid>` tag.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *       <kendo-grid
- *         [data]="data"
- *         selectable="true"
- *         style="height: 160px"
- *         >
- *         <kendo-grid-column field="ProductID"></kendo-grid-column>
- *         <kendo-grid-column field="ProductName"></kendo-grid-column>
- *         <kendo-grid-column field="UnitPrice"></kendo-grid-column>
- *         <ng-template kendoGridDetailTemplate let-dataItem>
- *           <div *ngIf="dataItem.Category">
- *             <header>{{dataItem.Category?.CategoryName}}</header>
- *             <span>{{dataItem.Category?.Description}}</span>
- *           </div>
- *         </ng-template>
- *       </kendo-grid>
- *   `
- * })
- *
- * class AppComponent {
- *     public data = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false,
- *         "Category": {
- *             "CategoryID": 1,
- *             "CategoryName": "Beverages",
- *             "Description": "Soft drinks, coffees, teas, beers, and ales"
- *         }
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": false,
- *         "Category": {
- *             "CategoryID": 1,
- *             "CategoryName": "Beverages",
- *             "Description": "Soft drinks, coffees, teas, beers, and ales"
- *         }
- *       }, {
- *         "ProductID": 3,
- *         "ProductName": "Aniseed Syrup",
- *         "UnitPrice": 10.0000,
- *         "Discontinued": false,
- *         "Category": {
- *             "CategoryID": 2,
- *             "CategoryName": "Condiments",
- *             "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
- *         }
- *     }];
- *
- * }
- *
+ * ```html
+ * <kendo-grid [data]="data" selectable="true" style="height: 160px">
+ *    <kendo-grid-column field="ProductName"></kendo-grid-column>
+ *    <ng-template kendoGridDetailTemplate let-dataItem>
+ *       <div *ngIf="dataItem.Category">
+ *          <header>{{dataItem.Category?.CategoryName}}</header>
+ *          span>{{dataItem.Category?.Description}}</span>
+ *       </div>
+ *    </ng-template>
+ * </kendo-grid>
  * ```
  *
  */

package/rendering/details-expand.directive.d.ts

@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
 import { RowArgs } from './common/row-args';
 import * as i0 from "@angular/core";
 /**
- * A directive which controls the expanded state of the master detail rows.
+ * A directive which controls the expanded state of the master detail rows. ([see example](slug:master_detail_expanded_state_grid#toc-built-in-directive))
  */
 export declare class ExpandDetailsDirective implements OnChanges, OnDestroy {
     protected grid: GridComponent;

package/rendering/footer/footer-template.directive.d.ts

@@ -19,41 +19,14 @@ import * as i0 from "@angular/core";
  * refer to the article on [aggregates]({% slug groupable_grid_with_aggregates %}).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData" scrollable="none">
- *             <kendo-grid-column field="ProductName">
- *                 <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
- *                   {{column.field}}({{columnIndex}})
- *                 </ng-template>
- *             </kendo-grid-column>
- *              <kendo-grid-column field="UnitPrice">
- *                 <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
- *                   {{column.field}}({{columnIndex}})
- *                 </ng-template>
- *             </kendo-grid-column>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData" scrollable="none">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
+ *          {{column.field}}({{columnIndex}})
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class FooterTemplateDirective {

package/rendering/header/header-template.directive.d.ts

@@ -9,48 +9,21 @@ import * as i0 from "@angular/core";
  * ([more information and example]({% slug templates_columns_grid %}#toc-header-template)).
  * Helps to customize the table header cell for the column.
  * To define a header template, nest an `<ng-template>` tag with the
- * [kendoGridHeaderTemplate]({% slug api_grid_headertemplatedirective %}) directive inside the `<kendo-grid-column>` tag.
+ * `kendoGridHeaderTemplate` directive inside the `<kendo-grid-column>` tag.
  *
  *  The template context is set to the current column and then the following additional fields are passed:
  * * `column`&mdash;Defines an instance of the [ColumnComponent]({% slug api_grid_columncomponent %}) option.
  * * `columnIndex`&mdash;Defines the current column index.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData">
- *             <kendo-grid-column field="ProductName">
- *                 <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
- *                   {{column.field}}({{columnIndex}})
- *                 </ng-template>
- *             </kendo-grid-column>
- *              <kendo-grid-column field="UnitPrice">
- *                 <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
- *                   {{column.field}}({{columnIndex}})
- *                 </ng-template>
- *             </kendo-grid-column>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
+ *          {{column.field}}({{columnIndex}})
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export declare class HeaderTemplateDirective {

package/rendering/loading-template.directive.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
 /**
  * Creates a loading template that overrides the default loading indicator of the Grid Component.
  * To define a loading template, nest an `<ng-template>` tag with the `kendoGridLoadingTemplate` directive inside the `<kendo-grid>` tag
- * [see example]({% slug binding_grid %}#toc-loading-template).
+ * ([see example](slug:loadingtemplate_grid)).
  */
 export declare class LoadingTemplateDirective {
     templateRef: TemplateRef<any>;