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

package/esm2020/rendering/body.module.mjs

@@ -25,6 +25,7 @@ import { NumericTextBoxModule } from "@progress/kendo-angular-inputs";
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { CellLoadingTemplateDirective } from './cell-loading.template.directive';
 import { LoadingTemplateDirective } from './loading-template.directive';
+import { RowReorderColumnComponent } from '../columns/reorder-column.component';
 import * as i0 from "@angular/core";
 const exported = [
     CommandColumnComponent,
@@ -41,7 +42,8 @@ const exported = [
     RemoveCommandDirective,
     AddCommandDirective,
     CellLoadingTemplateDirective,
-    LoadingTemplateDirective
+    LoadingTemplateDirective,
+    RowReorderColumnComponent
 ];
 const importedModules = [
     CommonModule,
@@ -71,7 +73,8 @@ export class BodyModule {
             RemoveCommandDirective,
             AddCommandDirective,
             CellLoadingTemplateDirective,
-            LoadingTemplateDirective
+            LoadingTemplateDirective,
+            RowReorderColumnComponent
         ];
     }
 }
@@ -90,7 +93,8 @@ BodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         RemoveCommandDirective,
         AddCommandDirective,
         CellLoadingTemplateDirective,
-        LoadingTemplateDirective], imports: [CommonModule,
+        LoadingTemplateDirective,
+        RowReorderColumnComponent], imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
         SharedModule,
@@ -111,7 +115,8 @@ BodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         RemoveCommandDirective,
         AddCommandDirective,
         CellLoadingTemplateDirective,
-        LoadingTemplateDirective] });
+        LoadingTemplateDirective,
+        RowReorderColumnComponent] });
 BodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BodyModule, imports: [[...importedModules]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BodyModule, decorators: [{
             type: NgModule,

package/esm2020/rendering/cell-loading.template.directive.mjs

@@ -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 class CellLoadingTemplateDirective {

package/esm2020/rendering/cell-template.directive.mjs

@@ -5,9 +5,9 @@
 import { Directive, TemplateRef, Optional } 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 class CellTemplateDirective {

package/esm2020/rendering/cell.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, HostBinding, Input, Inject, Optional, TemplateRef } from '@angular/core';
 import { EditService } from '../editing/edit.service';
-import { isSpanColumn, isCheckboxColumn } from '../columns/column-base';
+import { isSpanColumn, isCheckboxColumn, isRowReorderColumn } from '../columns/column-base';
 import { CommandColumnComponent } from '../columns/command-column.component';
 import { isColumnComponent } from '../columns/column.component';
 import { columnsToRender } from "../columns/column-common";
@@ -12,17 +12,19 @@ import { isPresent, isNullOrEmptyString, extractFormat } from '../utils';
 import { CELL_CONTEXT } from './common/cell-context';
 import { IdService } from '../common/id.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { reorderIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
 import * as i2 from "../common/id.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-dateinputs";
-import * as i6 from "@angular/common";
-import * as i7 from "../navigation/focusable.directive";
-import * as i8 from "../selection/selection-checkbox.directive";
-import * as i9 from "@angular/forms";
-import * as i10 from "./common/field-accessor.pipe";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@progress/kendo-angular-dateinputs";
+import * as i7 from "@angular/common";
+import * as i8 from "../navigation/focusable.directive";
+import * as i9 from "../selection/selection-checkbox.directive";
+import * as i10 from "@angular/forms";
+import * as i11 from "./common/field-accessor.pipe";
 /**
  * @hidden
  */
@@ -35,12 +37,19 @@ export class CellComponent {
         this.isNew = false;
         this.isLoading = false;
         this.isVirtual = false;
+        this.reorderIcon = reorderIcon;
         this._templateContext = {};
         this._editTemplateContext = {};
     }
     get commandCellClass() {
         return this.isCommand(this.column);
     }
+    get dragHandleCellClass() {
+        return isRowReorderColumn(this.column);
+    }
+    get dragRowHandleLabel() {
+        return isRowReorderColumn(this.column) ? this.localizationService.get('dragRowHandleLabel') : undefined;
+    }
     set rowIndex(index) {
         this._rowIndex = index;
         this.updateCellContext();
@@ -97,6 +106,9 @@ export class CellComponent {
     get childColumns() {
         return columnsToRender([this.column]);
     }
+    get isRowReorderColumn() {
+        return isRowReorderColumn(this.column) && !this.column.templateRef;
+    }
     get isColumnEditable() {
         if (!this.column || this.isCommand(this.column)) {
             return false;
@@ -143,7 +155,7 @@ export class CellComponent {
     }
 }
 CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoGridCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass" } }, usesOnChanges: true, ngImport: i0, template: `
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoGridCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, usesOnChanges: true, ngImport: i0, template: `
         <ng-container [ngSwitch]="isEdited">
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="!showLoading; else loading">
@@ -164,6 +176,12 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                             [attr.id]="selectionCheckboxId"
                             [attr.aria-label]="selectionCheckboxLabel" />
                     </ng-container>
+                    <ng-container *ngIf="isRowReorderColumn && !isNew">
+                        <kendo-icon-wrapper
+                            name="reorder"
+                            [svgIcon]="reorderIcon">
+                        </kendo-icon-wrapper>
+                    </ng-container>
                 </ng-container>
                 <ng-template #loading>
                     <ng-template
@@ -213,7 +231,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i4.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i8.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": i10.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i5.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i6.DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i9.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i10.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": i11.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -239,6 +257,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             [attr.id]="selectionCheckboxId"
                             [attr.aria-label]="selectionCheckboxLabel" />
                     </ng-container>
+                    <ng-container *ngIf="isRowReorderColumn && !isNew">
+                        <kendo-icon-wrapper
+                            name="reorder"
+                            [svgIcon]="reorderIcon">
+                        </kendo-icon-wrapper>
+                    </ng-container>
                 </ng-container>
                 <ng-template #loading>
                     <ng-template
@@ -298,6 +322,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,
                 args: ['class.k-command-cell']
+            }], dragHandleCellClass: [{
+                type: HostBinding,
+                args: ['class.k-drag-cell']
+            }, {
+                type: HostBinding,
+                args: ['class.k-touch-action-none']
+            }], dragRowHandleLabel: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
             }], column: [{
                 type: Input
             }], columnIndex: [{

package/esm2020/rendering/details/detail-template.directive.mjs

@@ -9,64 +9,16 @@ import * as i0 from "@angular/core";
  * 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/esm2020/rendering/details-expand.directive.mjs

@@ -11,7 +11,7 @@ import { isPresent, isString } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../grid.component";
 /**
- * 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 class ExpandDetailsDirective {
     constructor(grid) {

package/esm2020/rendering/footer/footer-template.directive.mjs

@@ -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 class FooterTemplateDirective {

package/esm2020/rendering/header/header-template.directive.mjs

@@ -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 class HeaderTemplateDirective {

package/esm2020/rendering/loading-template.directive.mjs

@@ -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 class LoadingTemplateDirective {
     constructor(templateRef) {

package/esm2020/rendering/no-records-template.directive.mjs

@@ -6,66 +6,19 @@ import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the no-records template of the Grid. Provides an option to customize the
- * appearance of the item that is displayed when no data is present. To define the no-records template,
- * nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate` directive inside `<kendo-grid>`.
- *
- * > When the locked columns of the Grid are in use, the template is displayed in the non-locked part of the content.
+ * appearance of the item that is displayed when no data is present.
+ * To define the no-records template, nest an `<ng-template>` tag with the `kendoGridNoRecordsTemplate`
+ * directive inside `<kendo-grid>` [see example](slug:norecordtemplate_grid).
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *   selector: 'my-app',
- *   template: `
- *       <kendo-grid [data]="data">
- *         <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 kendoGridNoRecordsTemplate>
- *            There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
- *         </ng-template>
- *       </kendo-grid>
- *   `
- * })
- *
- * class AppComponent {
- *     public data = [];
- *     public refresh() {
- *       this.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">
+ *   <ng-template kendoGridNoRecordsTemplate>
+ *     There are not products. <a href="#" (click)="refresh()">Click here to refresh</a>.
+ *   </ng-template>
+ *   <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export class NoRecordsTemplateDirective {

package/esm2020/rendering/toolbar/toolbar-template.directive.mjs

@@ -11,56 +11,14 @@ import * as i0 from "@angular/core";
  * - `position`—The position at which the toolbar template is rendered. The possible values are "top" and "bottom".
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <div class="example-config">
- *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
- *         <label class="k-radio-label" for="both">Both</label><br/>
- *       </div>
- *       <kendo-grid [data]="gridData" style="height: 200px">
- *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()">Custom action</button>
- *            </ng-template>
- *            <kendo-grid-column field="ProductName">
- *            </kendo-grid-column>
- *            <kendo-grid-column field="UnitPrice">
- *            </kendo-grid-column>
- *        </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public position: 'top' | 'bottom' | 'both' = 'top';
- *
- *     public gridData = [{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ];
- *
- *     public onClick(): void {
- *         console.log("button was clicked");
- *     }
- *
- *     public positionChange({ target }): void {
- *        this.position = target.value;
- *     }
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData" style="height: 200px">
+ *    <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
+ *       <button (click)="onClick()">Custom action</button>
+ *    </ng-template>
+ *    <kendo-grid-column field="ProductName">
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export class ToolbarTemplateDirective {
@@ -69,13 +27,9 @@ export class ToolbarTemplateDirective {
         this._position = 'top';
     }
     /**
-     * The position of the toolbar ([see example]({% slug toolbartemplate_grid %})).
+     * The position of the toolbar ([see example]({% slug toolbartemplate_grid %}#toc-setting-the-toolbar-position)).
      *
-     * The possible values are:
-     * - `top`&mdash;Positions the toolbar above the group panel or header.
-     * - `bottom`&mdash;Positions the toolbar below the pager.
-     * - `both`&mdash;Displays two toolbar instances. Positions the first one above
-     * the group panel or header and the second one below the pager.
+     * @default 'top'
      */
     set position(position) {
         this._position = position;