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

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-position.mjs

@@ -2,4 +2,21 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/**
+ * Defines the settings for `position` property of the  the Grid Toolbar Template. [See example](slug:toolbartemplate_grid#toc-setting-the-toolbar-position)
+ *
+ * The possible values are:
+ * * `top`—Displays the Toolbar a the top of the Grid.
+ * * `bottom`—Displays the Toolbar at the bottom of the Grid.
+ * * `both`—Displays the Toolbar at the top and bottom of the Grid.
+ *
+ * @example
+ * ```html
+ * <kendo-grid >
+ *   <ng-template kendoGridToolbarTemplate position="bottom" let-position="position">
+ *     <button (click)="onClick()">Custom action</button>
+ *   </ng-template>
+ * </kendo-grid>
+ * ```
+ */
 export {};

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;

package/esm2020/row-reordering/row-reorder.service.mjs

@@ -0,0 +1,232 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, Injectable, Output, Renderer2 } from '@angular/core';
+import { isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
+import { getOffset, isNextSibling, isPreviousSibling, dropPosition, hintIcons, hintSVGIcons, hintClasses, hintStyles, dropIndicatorClasses, dropIndicatorStyles, isDifferentParent, defaultSelectors } from './utils';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.hintElement = null;
+        this.defaultSelectors = defaultSelectors;
+        this.hintText = '';
+        this.lastDropPosition = dropPosition.forbidden;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.rowReorder = new EventEmitter();
+    }
+    press(ev) {
+        this.dragTarget = ev.dragTarget;
+    }
+    dragStart() {
+        this.createDropIndicator();
+    }
+    drag(ev) {
+        if (isPresent(ev.hintElement) && !isPresent(this.hintElement)) {
+            this.hintElement = ev.hintElement;
+            this.decorateHint();
+        }
+        const position = {
+            x: ev.dragEvent.clientX,
+            y: ev.dragEvent.clientY
+        };
+        if (isPresent(this.hintElement)) {
+            this.renderer.setStyle(this.hintElement, 'left', `${position.x}px`);
+            this.renderer.setStyle(this.hintElement, 'top', `${position.y}px`);
+        }
+        this.positionDropIndicator(ev);
+    }
+    dragEnter(ev) {
+        this.dropTarget = ev.dropTarget;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop(ev) {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, ev.dragData);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    reorderRows(ev, collection) {
+        if (this.lastDropPosition === dropPosition.forbidden) {
+            return;
+        }
+        ;
+        const { draggedRows, dropTargetRow } = ev;
+        const draggedDataItem = draggedRows[0].dataItem;
+        const dropTargetDataItem = dropTargetRow.dataItem;
+        const draggedItemIndex = collection.indexOf(draggedDataItem);
+        const dropTargetIndex = collection.indexOf(dropTargetDataItem);
+        const idxToAdd = this.calculateIndexToAdd(draggedItemIndex, dropTargetIndex);
+        collection.splice(draggedItemIndex, 1);
+        collection.splice(idxToAdd, 0, draggedDataItem);
+    }
+    get hintIcon() {
+        return hintIcons[this.lastDropPosition];
+    }
+    get hintSVGIcon() {
+        return hintSVGIcons[this.lastDropPosition];
+    }
+    getDefaultHintText(columns, data) {
+        let hintText = '';
+        const columnFieldsArray = columns
+            .toArray()
+            .filter(column => !column.hidden && isPresent(column.field))
+            .map(column => column.field);
+        const draggedDragRow = this.getDragRowPerElement(this.dragTarget, data);
+        const draggedDataItem = draggedDragRow?.dataItem;
+        isPresent(draggedDataItem) && columnFieldsArray.forEach(column => {
+            const columnValue = draggedDataItem[column];
+            isPresent(columnValue) ? hintText += `${columnValue} ` : null;
+        });
+        return hintText.trim();
+    }
+    rowReorderArgs(dragRow, dropRow, data) {
+        const dragRowData = this.getDragRowPerElement(dragRow, data);
+        const dropRowData = this.getDragRowPerElement(dropRow, data);
+        return {
+            draggedRows: [dragRowData],
+            dropTargetRow: dropRowData,
+            dropPosition: this.lastDropPosition
+        };
+    }
+    getDragRowPerElement(row, data) {
+        let rowIndex = row?.getAttribute('data-kendo-grid-item-index');
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const skip = this.skip || 0;
+        const dataItem = rowIndex === -1 ? null : data[rowIndex - skip];
+        return {
+            dataItem,
+            rowIndex,
+            element: row
+        };
+    }
+    createDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.dropIndicator = document.createElement('div');
+        this.decorateDropIndicator();
+        this.dropIndicator.innerHTML = `
+            <div class="k-drop-hint-start"></div>
+            <div class="k-drop-hint-line"></div>
+        `;
+        document.body.appendChild(this.dropIndicator);
+        this.hide();
+    }
+    destroyDropIndicator() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        ;
+        if (this.dropIndicator && this.dropIndicator.parentElement) {
+            document.body.removeChild(this.dropIndicator);
+            this.dropIndicator = null;
+        }
+    }
+    decorateHint() {
+        hintClasses.forEach(className => this.renderer.addClass(this.hintElement, className));
+        Object.keys(hintStyles)
+            .forEach(style => this.renderer.setStyle(this.hintElement, style, hintStyles[style]));
+    }
+    positionDropIndicator(ev) {
+        this.lastDropPosition = this.getDropPosition(ev.dragEvent);
+        this.updateDropIndicatorPosition();
+    }
+    calculateIndexToAdd(dragIndex, dropIndex) {
+        if (dragIndex > dropIndex && this.lastDropPosition === dropPosition.after) {
+            return dropIndex + 1;
+        }
+        else if (dragIndex > dropIndex && this.lastDropPosition === dropPosition.before) {
+            return dropIndex;
+        }
+        else if (dragIndex < dropIndex && this.lastDropPosition === dropPosition.after) {
+            return dropIndex;
+        }
+        else if (dragIndex < dropIndex && this.lastDropPosition === dropPosition.before) {
+            return dropIndex - 1;
+        }
+    }
+    decorateDropIndicator() {
+        dropIndicatorClasses.forEach(className => this.renderer.addClass(this.dropIndicator, className));
+        Object.keys(dropIndicatorStyles)
+            .forEach(style => this.renderer.setStyle(this.dropIndicator, style, dropIndicatorStyles[style]));
+    }
+    ;
+    getDropPosition(e) {
+        if (this.dropTarget === this.dragTarget || !isPresent(this.dropTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        if (isDifferentParent(this.dropTarget, this.dragTarget)) {
+            return dropPosition.forbidden;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 2;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const pointerPosition = e.clientY;
+        const itemTop = itemViewPortCoords.top;
+        let currentDropPosition = null;
+        if (pointerPosition < itemTop + itemDivisionHeight) {
+            currentDropPosition = dropPosition.before;
+        }
+        else if (pointerPosition >= itemTop + itemViewPortCoords.height - itemDivisionHeight) {
+            currentDropPosition = dropPosition.after;
+        }
+        if (currentDropPosition === dropPosition.before && isNextSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        else if (currentDropPosition === dropPosition.after && isPreviousSibling(this.dropTarget, this.dragTarget)) {
+            currentDropPosition = dropPosition.forbidden;
+        }
+        return currentDropPosition;
+    }
+    updateDropIndicatorPosition() {
+        if (this.shouldHideDropIndicator() || !this.dropTarget) {
+            this.hide();
+            return;
+        }
+        this.show();
+        const destinationItemOffset = getOffset(this.dropTarget);
+        let indicatorOffsetTop = destinationItemOffset.top;
+        const indicatorOffsetLeft = destinationItemOffset.left + this.dropIndicator.offsetWidth / 2;
+        if (this.lastDropPosition === dropPosition.after) {
+            indicatorOffsetTop += this.dropTarget.offsetHeight;
+        }
+        this.renderer.setStyle(this.dropIndicator, 'left', `${indicatorOffsetLeft}px`);
+        this.renderer.setStyle(this.dropIndicator, 'top', `${indicatorOffsetTop}px`);
+    }
+    shouldHideDropIndicator() {
+        return this.lastDropPosition === dropPosition.forbidden;
+    }
+    hide() {
+        if (isPresent(this.dropIndicator)) {
+            this.dropIndicator.style.display = 'none';
+        }
+    }
+    show() {
+        if (isPresent(this.dropIndicator)) {
+            this.dropIndicator.style.display = '';
+        }
+    }
+}
+RowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+RowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { rowReorder: [{
+                type: Output
+            }] } });

package/esm2020/row-reordering/types.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/row-reordering/utils.mjs

@@ -0,0 +1,87 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { cancelIcon, insertMiddleIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+export const isNextSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.nextElementSibling;
+/**
+ * @hidden
+ */
+export const isPreviousSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.previousElementSibling;
+/**
+ * @hidden
+ */
+export const isDifferentParent = (dropTarget, dragTarget) => dropTarget?.parentElement !== dragTarget?.parentElement;
+/**
+ * @hidden
+ */
+export function getOffset(element) {
+    const { clientTop, clientLeft } = getDocument(element);
+    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { top, left } = element.getBoundingClientRect();
+    return {
+        top: top + pageYOffset - clientTop,
+        left: left + pageXOffset - clientLeft
+    };
+}
+;
+/**
+ * @hidden
+ */
+export const hintIcons = {
+    forbidden: 'cancel',
+    before: 'insert-middle',
+    after: 'insert-middle'
+};
+/**
+ * @hidden
+ */
+export const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon
+};
+/**
+ * @hidden
+ */
+export const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after'
+};
+/**
+ * @hidden
+ */
+export const hintStyles = {
+    zIndex: '20000',
+    display: 'flex',
+    position: 'fixed'
+};
+/**
+ * @hidden
+ */
+export const hintClasses = ['k-drag-clue', 'k-reorder-clue'];
+/**
+ * @hidden
+ */
+export const dropIndicatorStyles = {
+    zIndex: '19000',
+    position: 'absolute'
+};
+/**
+ * @hidden
+ */
+export const dropIndicatorClasses = ['k-drop-hint', 'k-drop-hint-h'];
+/**
+ * @hidden
+ */
+export const defaultSelectors = {
+    handle: '.k-table-td.k-drag-cell',
+    dragTarget: '.k-master-row',
+    dropTarget: '.k-master-row'
+};
+const getDocument = element => element?.ownerDocument.documentElement;
+const getWindow = element => element?.ownerDocument.defaultView;

package/esm2020/selection/selectall-checkbox.directive.mjs

@@ -10,7 +10,18 @@ import { hasObservers } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 /**
- * Represents the select-all checkbox feature of the Grid ([see example]({% slug selection_grid %}#toc-select-all-feature)).
+ * Represents the select-all checkbox feature of the Grid ([see example](slug:grid_selection_persistence#toc-selecting-all-items)).
+ *
+ * @example
+ * ```html
+ * <input
+ *   type="checkbox"
+ *   kendoCheckBox
+ *   kendoGridSelectAllCheckbox
+ *   [state]="selectAllState"
+ *   (selectAllChange)="onSelectAllChange($event)"
+ * />
+ * ```
  */
 export class SelectAllCheckboxDirective {
     constructor(selectionService, el, renderer, ngZone) {

package/esm2020/selection/selection-checkbox.directive.mjs

@@ -9,53 +9,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 /**
  * Represents the row-selection checkbox of the Grid. The directive expects the
- * index of the current row as an input parameter. Inside the
- * [CheckboxColumnComponent]({% slug api_grid_checkboxcolumncomponent %}), apply the
- * directive to an `input` element. When the user clicks the checkbox that is associated
- * with the directive, a [selectionChange]({% slug api_grid_gridcomponent %}#toc-selectionChange)
+ * index of the current row as an input parameter. Inside the [`CellTemplateDirective`](slug:api_grid_celltemplatedirective), apply the
+ * `kendoGridSelectionCheckbox` to an `<input type="checkbox"/>` element. When the user clicks the checkbox that is associated
+ * with the directive, a [selectionChange](slug:api_grid_gridcomponent#toc-selectionChange)
  * event is triggered.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
- *          <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-column field="ProductID" title="Product ID" [width]="120">
- *          </kendo-grid-column>
- *          <kendo-grid-column field="ProductName" title="Product Name">
- *          </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 ... >
+ *   <kendo-grid-column>
+ *     <ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
+ *       <input ... [kendoGridSelectionCheckbox]="rowIndex"/>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 export class SelectionCheckboxDirective {

package/esm2020/selection/selection-default.mjs

@@ -17,6 +17,7 @@ export class Selection {
         this.cd = cd;
         /**
          * Defines the collection that will store the selected item keys.
+         * @default []
          */
         this.selectedKeys = [];
         /**

package/esm2020/selection/selection.directive.mjs

@@ -9,7 +9,7 @@ import * as i0 from "@angular/core";
 import * as i1 from "../common/provider.service";
 /**
  * A directive which stores the row selection state of the Grid in memory
- * ([see example]({% slug selection_grid %}#toc-during-data-operations)).
+ * ([see example]({% slug selection_grid %}#toc-toggling-the-selection-functionality)).
  */
 export class SelectionDirective extends Selection {
     constructor(ctx, cd) {

package/excel/excel-command.directive.d.ts

@@ -10,13 +10,13 @@ import * as i0 from "@angular/core";
 /**
  * Represents the `export-to-Excel` command of the Grid. You can apply this
  * directive to any `button` element inside a
- * [ToolbarTemplate]({% slug api_grid_commandcolumncomponent %}).
+ * [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}).
  * When the user clicks a button associated with the directive, the
  * [excelExport]({% slug api_grid_gridcomponent %}#toc-excelexport) event
  * fires ([see example]({% slug excelexport_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *      <ng-template kendoGridToolbarTemplate>
  *          <button kendoGridExcelCommand>Export to PDF</button>

package/excel/excel.module.d.ts

@@ -13,29 +13,19 @@ import * as i4 from "@progress/kendo-angular-excel-export";
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid and Excel modules
- * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
+ * ```ts
  * import { NgModule } from '@angular/core';
- *
- * // Import the app component
+ * import { BrowserModule } from "@angular/platform-browser";
+ * import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
  * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule, ExcelModule], // import Grid and Excel modules
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule, ExcelModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 export declare class ExcelModule {