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

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -5,7 +5,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, HostBinding, Input, EventEmitter, Injectable, Optional, Inject, Directive, SkipSelf, QueryList, isDevMode, ContentChildren, ContentChild, forwardRef, Host, Output, SecurityContext, HostListener, ChangeDetectionStrategy, ViewChild, ViewChildren, Self, TemplateRef, Pipe, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, closest as closest$1, isFocusable as isFocusable$1, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, isPresent as isPresent$1, closest as closest$1, isFocusable as isFocusable$1, anyChanged, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip$1, BehaviorSubject, Observable } from 'rxjs';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -19,7 +19,9 @@ import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progre
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
-import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, unlockIcon, lockIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineBlockIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, minusIcon, plusIcon } from '@progress/kendo-svg-icons';
+import * as i40 from '@progress/kendo-angular-utils';
+import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
+import { cancelIcon, insertMiddleIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, unlockIcon, lockIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineBlockIcon, moreVerticalIcon, filterClearIcon, reorderIcon, caretAltDownIcon, minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
@@ -30,7 +32,7 @@ import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import * as i3$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i5$1 from '@progress/kendo-angular-dateinputs';
+import * as i4$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
@@ -492,47 +494,16 @@ const EMPTY_CELL_CONTEXT = {};
  * [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>
  * ```
  */
 class FocusableDirective {
@@ -1064,7 +1035,7 @@ class PreventableEvent {
         this.prevented = true;
     }
     /**
-     * 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.
@@ -2855,15 +2826,15 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1681814065,
-    version: '12.0.0-develop.8',
+    publishDate: 1682434440,
+    version: '12.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
- * 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.
@@ -2872,38 +2843,14 @@ const packageMetadata = {
  * - `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>
  * ```
  */
 class CellTemplateDirective {
@@ -2925,7 +2872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the group-header cell template of the Grid which helps to customize the content of the group header item.
  * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderTemplate`
- * directive inside `<kendo-grid-column>`.
+ * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-template)).
  *
  * The template context is set to the current data item and the following additional fields are passed:
  * - `group`&mdash;The current group item.
@@ -2934,44 +2881,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `aggregates`&mdash;All aggregate values for the current group.
  * - `index`&mdash;The index of the current group.
  * - `expanded`&mdash;A boolean value indicating if the group is currently expanded.
- * ([see example]({% slug groupable_grid_with_aggregates %})).
  *
  * @example
- * ```ts
- * import { process } from '@progress/kendo-data-query';
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData" [group]="groups">
- *             <kendo-grid-column field="ProductName">
- *                 <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
- *                    <strong>{{field}}</strong>: {{value}}
- *                 </ng-template>
- *             </kendo-grid-column>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public groups = [{ field: "ProductName" }];
- *
- *     public gridData = process([{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ], {
- *      group: this.groups
- *     });
- * }
- *
+ * ```html
+ * <kendo-grid [data]="gridData" [group]="groups">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
+ *          <strong>{{field}}</strong>: {{value}}
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class GroupHeaderTemplateDirective {
@@ -2993,7 +2912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents the group-header column template of the Grid which helps to customize the content of the group headers.
  * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderColumnTemplate`
- * directive inside `<kendo-grid-column>`. ([See example]({% slug groupable_grid_with_aggregates %})).
+ * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-column-template)).
  *
  * The template context is set to the current data item and the following additional fields are passed:
  * - `group`&mdash;The current group item.
@@ -3002,7 +2921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `aggregates`&mdash;All aggregate values for the current group.
  *
  * @example
- * ```ts
+ * ```html
  * <kendo-grid-column field="ProductName" title="Product Name">
  *     <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
  *         <span title="Group Header Column Template for ProductName">
@@ -3029,13 +2948,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; } });
 
 /**
- * Represents the column edit-cell template of the Grid ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms)).
+ * Represents the column edit-cell template of the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
  * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
  * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
  *
  * The template context is set to the current form group and the following additional fields are passed:
- * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']).
- * Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
+ * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-formGroup`.
  * If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
  * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.
@@ -3063,47 +2981,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * To define the group footer template, nest an `<ng-template>` tag with the `kendoGridGroupFooterTemplate` directive
  * inside `<kendo-grid-column>`.
  *
- * The template context is set to the current aggregates and the following additional fields are passed:
+ * The template context is set to the current data item and the following additional fields are passed:
  * - `column`&mdash;Defines an instance of the `ColumnComponent` option.
  * - `field`&mdash;The current column field name.
  * - `group`&mdash;The current group data item.
  * - `aggregates`&mdash;All aggregate values for the current group.
  *
  * @example
- * ```ts-preview
- * import { process } from '@progress/kendo-data-query';
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-grid [data]="gridData" [group]="groups">
- *             <kendo-grid-column field="ProductName">
- *                 <ng-template kendoGridGroupFooterTemplate let-aggregates let-field="field">
- *                    Count: {{aggregates[field].count}}
- *                 </ng-template>
- *             </kendo-grid-column>
- *         </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *     public groups = [{ field: "ProductName", aggregates: [{ field: "ProductName", aggregate: "count" }] }];
- *
- *     public gridData = process([{
- *         "ProductID": 1,
- *         "ProductName": "Chai",
- *         "UnitPrice": 18.0000,
- *         "Discontinued": false
- *       }, {
- *         "ProductID": 2,
- *         "ProductName": "Chang",
- *         "UnitPrice": 19.0000,
- *         "Discontinued": true
- *       }
- *     ], {
- *      group: this.groups
- *     });
- * }
+ * ```html
+ * <kendo-grid [data]="gridData" [group]="groups">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridGroupFooterTemplate let-aggregates let-field="field">
+ *          Count: {{aggregates[field].count}}
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class GroupFooterTemplateDirective {
@@ -3127,48 +3019,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ([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>
  * ```
  */
 class HeaderTemplateDirective {
@@ -3202,41 +3067,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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>
  * ```
  */
 class FooterTemplateDirective {
@@ -3259,40 +3097,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the template for the column menu in the Grid. Provides an option for
  * customizing the content of the column menu for all or for specific columns.
  * To define the content template, nest an `<ng-template>` tag with the
- * `kendoGridColumnMenuTemplate` directive inside the `kendo-grid` or the `<kendo-grid-column>` component.
+ * `kendoGridColumnMenuTemplate` directive inside the `<kendo-grid>` or the `<kendo-grid-column>` component.
  *
  * The template context is passes through the following fields:
  * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}).
  * - `column`&mdash;Represents the Grid column.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate let-service="service">
- *              <kendo-grid-columnmenu-sort [service]="service">
- *              </kendo-grid-columnmenu-sort>
- *          </ng-template>
- *          <kendo-grid-column field="Field1" [width]="100">
- *              <ng-template kendoGridColumnMenuTemplate let-service="service">
- *                  <kendo-grid-columnmenu-lock [service]="service">
- *                  </kendo-grid-columnmenu-lock>
- *                  <kendo-grid-columnmenu-sort [service]="service">
- *                  </kendo-grid-columnmenu-sort>
- *              </ng-template>
- *          </kendo-grid-column>
- *          <kendo-grid-column field="Field2" [width]="100"></kendo-grid-column>
- *       </kendo-grid>
- *     `
- * })
- *
- * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }, { Field1: 'Foo1', Field2: 'Bar1' }];
- * }
- *
+ * ```html
+ * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
+ *   </ng-template>
+ *   <kendo-grid-column field="Field1">
+ *     <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *       <kendo-grid-columnmenu-lock [service]="service"></kendo-grid-columnmenu-lock>
+ *       <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ *   <kendo-grid-column field="Field2"></kendo-grid-column>
+ * </kendo-grid>
  * ```
  */
 class ColumnMenuTemplateDirective {
@@ -3347,6 +3171,10 @@ const isSpanColumn = column => column.isSpanColumn;
  * @hidden
  */
 const isCheckboxColumn = column => column.isCheckboxColumn;
+/**
+ * @hidden
+ */
+const isRowReorderColumn = column => column.isRowReorderColumn;
 const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
 /**
  * The base class for the column components of the Grid.
@@ -3362,9 +3190,9 @@ class ColumnBase {
          */
         this.matchesMedia = true;
         /**
-         * 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
          */
         this.orderIndex = 0;
         /**
@@ -3399,18 +3227,22 @@ class ColumnBase {
         this.sticky = false;
         /**
          * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+         * @default true
          */
         this.lockable = true;
         /**
          * Specifies if the column can be stuck or unstuck from the column menu.
+         * @default true
          */
         this.stickable = true;
         /**
          * Specifies if the column menu will be shown for the column.
+         * @default true
          */
         this.columnMenu = true;
         /**
          * Specifies if the column will be included in the column-chooser list.
+         * @default true
          */
         this.includeInChooser = true;
         /**
@@ -3458,44 +3290,6 @@ 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) {
         this._locked = value;
@@ -4355,64 +4149,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * 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>
  * ```
  *
  */
@@ -4972,6 +4718,7 @@ class Selection {
         this.cd = cd;
         /**
          * Defines the collection that will store the selected item keys.
+         * @default []
          */
         this.selectedKeys = [];
         /**
@@ -5359,66 +5106,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * 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>
  * ```
  */
 class NoRecordsTemplateDirective {
@@ -5529,7 +5229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * 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.
@@ -5537,53 +5238,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * * `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>
  * ```
  */
 class PagerTemplateDirective {
@@ -5727,56 +5394,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `position`&mdash;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>
  * ```
  */
 class ToolbarTemplateDirective {
@@ -5785,13 +5410,9 @@ 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;
@@ -6075,7 +5696,7 @@ class PopupCloseEvent extends PreventableEvent {
 const DEFAULT_POPUP_CLASS = 'k-grid-filter-popup';
 /**
  * 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)).
  */
 class SinglePopupService {
     constructor(popupService, renderer, ngZone, scrollSyncService, localization) {
@@ -6192,17 +5813,17 @@ const append = (element) => {
 /**
  * @hidden
  */
-const getDocument = element => element.ownerDocument.documentElement;
+const getDocument$1 = element => element.ownerDocument.documentElement;
 /**
  * @hidden
  */
-const getWindow = element => element.ownerDocument.defaultView;
+const getWindow$1 = element => element.ownerDocument.defaultView;
 /**
  * @hidden
  */
 const offset = element => {
-    const { clientTop, clientLeft } = getDocument(element);
-    const { pageYOffset, pageXOffset } = getWindow(element);
+    const { clientTop, clientLeft } = getDocument$1(element);
+    const { pageYOffset, pageXOffset } = getWindow$1(element);
     const { top, left } = element.getBoundingClientRect();
     return {
         top: top + pageYOffset - clientTop,
@@ -6617,17 +6238,20 @@ class ColumnStickyChangeEvent {
 /**
  * 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>
  * ```
  */
 class CellLoadingTemplateDirective {
@@ -6649,7 +6273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * 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)).
  */
 class LoadingTemplateDirective {
     constructor(templateRef) {
@@ -6665,6 +6289,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
+/**
+ * @hidden
+*/
 class SizingOptionsService {
     constructor() {
         this.changes = new Subject();
@@ -6676,6 +6303,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }] });
 
+/**
+ * @hidden
+ */
+const isNextSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.nextElementSibling;
+/**
+ * @hidden
+ */
+const isPreviousSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.previousElementSibling;
+/**
+ * @hidden
+ */
+const isDifferentParent = (dropTarget, dragTarget) => dropTarget?.parentElement !== dragTarget?.parentElement;
+/**
+ * @hidden
+ */
+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
+ */
+const hintIcons = {
+    forbidden: 'cancel',
+    before: 'insert-middle',
+    after: 'insert-middle'
+};
+/**
+ * @hidden
+ */
+const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon
+};
+/**
+ * @hidden
+ */
+const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after'
+};
+/**
+ * @hidden
+ */
+const hintStyles = {
+    zIndex: '20000',
+    display: 'flex',
+    position: 'fixed'
+};
+/**
+ * @hidden
+ */
+const hintClasses = ['k-drag-clue', 'k-reorder-clue'];
+/**
+ * @hidden
+ */
+const dropIndicatorStyles = {
+    zIndex: '19000',
+    position: 'absolute'
+};
+/**
+ * @hidden
+ */
+const dropIndicatorClasses = ['k-drop-hint', 'k-drop-hint-h'];
+/**
+ * @hidden
+ */
+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;
+
+/**
+ * @hidden
+ */
+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;
+        this.offsetY = ev.dragEvent.offsetY;
+    }
+    dragStart() {
+        this.createDropIndicator();
+    }
+    drag(ev) {
+        if (isPresent$1(ev.hintElement) && !isPresent$1(this.hintElement)) {
+            this.hintElement = ev.hintElement;
+            this.decorateHint();
+        }
+        const position = {
+            x: ev.dragEvent.clientX,
+            y: ev.dragEvent.clientY - this.offsetY
+        };
+        if (isPresent$1(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$1(column.field))
+            .map(column => column.field);
+        const draggedDragRow = this.getDragRowPerElement(this.dragTarget, data);
+        const draggedDataItem = draggedDragRow?.dataItem;
+        isPresent$1(draggedDataItem) && columnFieldsArray.forEach(column => {
+            const columnValue = draggedDataItem[column];
+            isPresent$1(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$1(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$1(this.dropIndicator)) {
+            this.dropIndicator.style.display = 'none';
+        }
+    }
+    show() {
+        if (isPresent$1(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
+            }] } });
+
 /**
  * @hidden
  */
@@ -10425,7 +10361,7 @@ DateFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i5$1.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"] }, { type: i5$1.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { type: i4$3.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"] }, { type: i4$3.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -11329,27 +11265,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * [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>
  *
  * ```
  */
@@ -11417,39 +11341,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-columnmenu-item-wrapper']
-            }] } });
-
-/**
- * Represents the content template of the
- * [kendo-grid-columnmenu-item]({% slug api_grid_columnmenuitemcomponent %}) component.
- * Provides an option for specifying the content of a column item.
- * To define the content template, nest an `<ng-template>` tag with the
- * `kendoGridColumnMenuItemContentTemplate` directive inside a `<kendo-grid-columnmenu-item>`.
- *
- * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-grid [data]="data" [columnMenu]="true">
- *          <ng-template kendoGridColumnMenuTemplate>
- *              <kendo-grid-columnmenu-item text="Item Text" [expanded]="true">
- *                  <ng-template kendoGridColumnMenuItemContentTemplate>
- *                      Item Content
- *                  </ng-template>
- *              </kendo-grid-columnmenu-item>
- *          </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' }];
- * }
+            }] } });
+
+/**
+ * Represents the content template of the
+ * [`ColumnMenuItemComponent`]({% slug api_grid_columnmenuitemcomponent %}) component.
+ * Provides an option for specifying the content of a column item.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoGridColumnMenuItemContentTemplate` directive inside a `<kendo-grid-columnmenu-item>`.
  *
+ * @example
+ * ```html
+ * <kendo-grid [data]="data" [columnMenu]="true" ...>
+ *   <ng-template kendoGridColumnMenuTemplate>
+ *     <kendo-grid-columnmenu-item text="Item Text" [expanded]="true">
+ *       <ng-template kendoGridColumnMenuItemContentTemplate>
+ *         Item Content
+ *       </ng-template>
+ *     </kendo-grid-columnmenu-item>
+ *   </ng-template>
+ *   <kendo-grid-column field="Field1"></kendo-grid-column>
+ *   ...
+ * </kendo-grid>
  * ```
  */
 class ColumnMenuItemContentTemplateDirective {
@@ -13887,7 +13800,7 @@ DateFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </kendo-datepicker-messages>
             </kendo-datepicker>
         </kendo-grid-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i5$1.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"] }, { type: i5$1.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$3.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"] }, { type: i4$3.DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -14436,7 +14349,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * 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)"
+ * />
+ * ```
  */
 class SelectAllCheckboxDirective {
     constructor(selectionService, el, renderer, ngZone) {
@@ -15977,53 +15901,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * 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>
  * ```
  */
 class SelectionCheckboxDirective {
@@ -16135,12 +16026,19 @@ 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();
@@ -16197,6 +16095,9 @@ 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;
@@ -16243,7 +16144,7 @@ class CellComponent {
     }
 }
 CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: IdService }, { token: i1.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">
@@ -16264,6 +16165,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
@@ -16313,7 +16220,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.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$1.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.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": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i3.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: i4$3.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: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$2.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": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -16339,6 +16246,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
@@ -16398,6 +16311,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: [{
@@ -18768,7 +18690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class GridMessages extends ComponentMessages {
 }
 GridMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel" }, usesInheritance: true, ngImport: i0 });
+GridMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMessages, selector: "kendo-grid-messages-base", inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItems: "pagerItems", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", selectPage: "selectPage", filter: "filter", filterInputLabel: "filterInputLabel", filterMenuTitle: "filterMenuTitle", filterMenuOperatorsDropDownLabel: "filterMenuOperatorsDropDownLabel", filterMenuLogicDropDownLabel: "filterMenuLogicDropDownLabel", filterEqOperator: "filterEqOperator", filterNotEqOperator: "filterNotEqOperator", filterIsNullOperator: "filterIsNullOperator", filterIsNotNullOperator: "filterIsNotNullOperator", filterIsEmptyOperator: "filterIsEmptyOperator", filterIsNotEmptyOperator: "filterIsNotEmptyOperator", filterStartsWithOperator: "filterStartsWithOperator", filterContainsOperator: "filterContainsOperator", filterNotContainsOperator: "filterNotContainsOperator", filterEndsWithOperator: "filterEndsWithOperator", filterGteOperator: "filterGteOperator", filterGtOperator: "filterGtOperator", filterLteOperator: "filterLteOperator", filterLtOperator: "filterLtOperator", filterIsTrue: "filterIsTrue", filterIsFalse: "filterIsFalse", filterBooleanAll: "filterBooleanAll", filterAfterOrEqualOperator: "filterAfterOrEqualOperator", filterAfterOperator: "filterAfterOperator", filterBeforeOperator: "filterBeforeOperator", filterBeforeOrEqualOperator: "filterBeforeOrEqualOperator", filterFilterButton: "filterFilterButton", filterClearButton: "filterClearButton", filterAndLogic: "filterAndLogic", filterOrLogic: "filterOrLogic", loading: "loading", gridLabel: "gridLabel", columnMenu: "columnMenu", setColumnPosition: "setColumnPosition", columns: "columns", lock: "lock", unlock: "unlock", stick: "stick", unstick: "unstick", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", autosizeThisColumn: "autosizeThisColumn", autosizeAllColumns: "autosizeAllColumns", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", detailExpand: "detailExpand", detailCollapse: "detailCollapse", filterDateToday: "filterDateToday", filterDateToggle: "filterDateToggle", filterNumericDecrement: "filterNumericDecrement", filterNumericIncrement: "filterNumericIncrement", selectionCheckboxLabel: "selectionCheckboxLabel", selectAllCheckboxLabel: "selectAllCheckboxLabel", groupCollapse: "groupCollapse", groupExpand: "groupExpand", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", groupPanelLabel: "groupPanelLabel", dragRowHandleLabel: "dragRowHandleLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMessages, decorators: [{
             type: Directive,
             args: [{
@@ -18925,6 +18847,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], groupPanelLabel: [{
                 type: Input
+            }], dragRowHandleLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -19005,7 +18929,7 @@ const isInEditedCell = (element, gridElement) => closest(element, matchesClasses
  * ```
  */
 class GridComponent {
-    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService) {
+    constructor(supportService, selectionService, cellSelectionService, wrapper, groupInfoService, groupsService, changeNotification, detailsService, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, localization, ctx, sizingService, rowReorderService) {
         this.supportService = supportService;
         this.selectionService = selectionService;
         this.cellSelectionService = cellSelectionService;
@@ -19033,11 +18957,7 @@ class GridComponent {
         this.localization = localization;
         this.ctx = ctx;
         this.sizingService = sizingService;
-        /**
-         * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
-         * ([more information and example]({% slug binding_grid %})).
-         */
-        this.data = [];
+        this.rowReorderService = rowReorderService;
         /**
          * Defines the scroll mode used by the Grid.
          *
@@ -19101,6 +19021,10 @@ class GridComponent {
          * If set to `true`, the grid will render only the columns in the current viewport.
          */
         this.virtualColumns = false;
+        /**
+         * @hidden
+         */
+        this.gridData = () => { return this.flatData; };
         /**
          * Enables the [filtering]({% slug filtering_grid %}) of the Grid columns that have their `field` option set.
          */
@@ -19148,12 +19072,6 @@ class GridComponent {
          * @default false
          */
         this.reorderable = false;
-        /**
-         * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
-         *
-         * @default false
-         */
-        this.loading = false;
         /**
          * Specifies if the column menu of the columns will be displayed ([see example]({% slug columnmenu_grid %})).
          *
@@ -19191,6 +19109,11 @@ class GridComponent {
          * Emits the [SelectionEvent]({% slug api_grid_selectionevent %}#toc-selectionchange).
          */
         this.selectionChange = new EventEmitter();
+        /**
+         * Fires when the user drops the dragged row and reordering is performed.
+         * Emits the [RowReorderEvent]({% slug api_grid_selectionevent %}#toc-selectionchange).
+         */
+        this.rowReorder = new EventEmitter();
         /**
          * Fires when the data state of the Grid is changed.
          */
@@ -19302,11 +19225,14 @@ class GridComponent {
         this._sort = new Array();
         this._group = new Array();
         this._skip = 0;
+        this._data = [];
         this.cachedWindowWidth = 0;
         this._rowSelected = null;
         this._cellSelected = null;
+        this._rowReorderable = false;
         this._navigable = [];
         this._size = 'medium';
+        this._loading = false;
         this.rtl = false;
         this._rowClass = () => null;
         validatePackage(packageMetadata);
@@ -19346,6 +19272,19 @@ class GridComponent {
             .changes.subscribe(this.reorder.bind(this));
         this.columnRangeChangeSubscription = this.columnInfoService.columnRangeChange.subscribe(this.onColumnRangeChange.bind(this));
     }
+    /**
+     * Sets the data of the Grid. If an array is provided, the Grid automatically gets the total count
+     * ([more information and example]({% slug binding_grid %})).
+     */
+    set data(value) {
+        this._data = value;
+    }
+    get data() {
+        return this._data;
+    }
+    get hintText() {
+        return this.rowReorderService.getDefaultHintText(this.columnList, this.flatData);
+    }
     /**
      * Defines the number of records to be skipped by the pager.
      * Required by the [paging]({% slug paging_grid %}) functionality.
@@ -19355,7 +19294,7 @@ class GridComponent {
     }
     set skip(value) {
         if (typeof value === 'number' && value >= 0) {
-            this._skip = value;
+            this._skip = this.rowReorderService.skip = value;
         }
     }
     /**
@@ -19453,6 +19392,26 @@ class GridComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
+    /**
+     * Enables the [row reordering]({% slug reordering_rows_grid %}) of the Grid.
+     * @default false
+     */
+    set rowReorderable(value) {
+        this._rowReorderable = value;
+        if (value) {
+            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
+                this.ngZone.run(() => {
+                    this.rowReorder.emit(args);
+                });
+            });
+        }
+        else {
+            this.rowReorderSubscription?.unsubscribe();
+        }
+    }
+    get rowReorderable() {
+        return this._rowReorderable;
+    }
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
      * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
@@ -19595,6 +19554,18 @@ class GridComponent {
     get activeRow() {
         return this.navigationService.activeRow;
     }
+    /**
+     * Specifies if the loading indicator of the Grid will be displayed ([see example]({% slug binding_grid %})).
+     *
+     * @default false
+     */
+    set loading(value) {
+        this._loading = value;
+        this.rowReorderable && this.notifyReorderContainers();
+    }
+    get loading() {
+        return this._loading;
+    }
     get dir() {
         return this.direction;
     }
@@ -19766,6 +19737,18 @@ class GridComponent {
         }
         return this.pageSize;
     }
+    /**
+     * @hidden
+     */
+    getDefaultSelectors(type) {
+        return this.rowReorderService.defaultSelectors[type];
+    }
+    /**
+     * @hidden
+     */
+    getHintSettings(type) {
+        return this.rowReorderService[type];
+    }
     /**
      * Expands the specified master row ([see example]({% slug hierarchy_grid %})).
      *
@@ -19997,6 +19980,9 @@ class GridComponent {
         if (this.focusElementSubscription) {
             this.focusElementSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
         this.columnRangeChangeSubscription.unsubscribe();
     }
     /**
@@ -20495,6 +20481,12 @@ class GridComponent {
     get isGroupExpanded() {
         return this.groupsService.userCallback;
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
     /**
      * @hidden
      */
@@ -20721,6 +20713,11 @@ class GridComponent {
                 this.closeCell();
                 this.cancelCell();
                 this.dataStateChange.emit(x);
+                if (this.rowReorderable) {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                        this.notifyReorderContainers();
+                    });
+                }
             });
     }
     attachEditHandlers() {
@@ -21003,9 +21000,16 @@ class GridComponent {
         }
         return previousValue.cell !== currentValue.cell;
     }
+    notifyReorderContainers() {
+        this.dragTargetContainer?.notify();
+        this.dropTargetContainer?.notify();
+    }
+    get flatData() {
+        return isArray(this.data) ? this.data : this.data.data;
+    }
 }
-GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }], target: i0.ɵɵFactoryTarget.Component });
-GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GridComponent, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, deps: [{ token: BrowserSupportService }, { token: SelectionService }, { token: CellSelectionService }, { token: i0.ElementRef }, { token: GroupInfoService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: DetailsService }, { token: EditService }, { token: FilterService }, { token: PDFService }, { token: ResponsiveService }, { token: i0.Renderer2 }, { token: ExcelService }, { token: i0.NgZone }, { token: ScrollSyncService }, { token: DomEventsService }, { token: ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: ColumnReorderService }, { token: ColumnInfoService }, { token: NavigationService }, { token: SortService }, { token: ScrollRequestService }, { token: i1.LocalizationService }, { token: ContextService }, { token: SizingOptionsService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GridComponent, selector: "kendo-grid", inputs: { data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", detailRowHeight: "detailRowHeight", skip: "skip", scrollable: "scrollable", selectable: "selectable", sort: "sort", size: "size", trackBy: "trackBy", filter: "filter", group: "group", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", groupable: "groupable", rowReorderable: "rowReorderable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", rowSticky: "rowSticky", rowSelected: "rowSelected", cellSelected: "cellSelected", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", isDetailExpanded: "isDetailExpanded", isGroupExpanded: "isGroupExpanded" }, outputs: { filterChange: "filterChange", pageChange: "pageChange", groupChange: "groupChange", sortChange: "sortChange", selectionChange: "selectionChange", rowReorder: "rowReorder", dataStateChange: "dataStateChange", groupExpand: "groupExpand", groupCollapse: "groupCollapse", detailExpand: "detailExpand", detailCollapse: "detailCollapse", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add", cellClose: "cellClose", cellClick: "cellClick", pdfExport: "pdfExport", excelExport: "excelExport", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", columnStickyChange: "columnStickyChange", scrollBottom: "scrollBottom", contentScroll: "contentScroll" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClass", "class.k-grid-sm": "this.sizeSmallClass", "class.k-grid-md": "this.sizeMediumClass", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -21046,8 +21050,9 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         ScrollRequestService,
         SortService,
         ContextService,
-        SizingOptionsService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+        SizingOptionsService,
+        RowReorderService
+    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -21273,6 +21278,9 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
+
+            i18n-dragRowHandleLabel="kendo.grid.dragRowHandleLabel|The label for the Grid drag row handle"
+            dragRowHandleLabel="Drag row"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -21400,6 +21408,23 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </div>
             </div>
             <kendo-grid-list
+                kendoDragTargetContainer
+                kendoDropTargetContainer
+                mode="manual"
+                [dragDisabled]="!rowReorderable"
+                [dropDisabled]="!rowReorderable"
+                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                [dragHandle]="getDefaultSelectors('handle')"
+                [hint]="{hintTemplate: defaultHint}"
+                (press)="handleReorderEvents($event, 'press')"
+                (dragStart)="handleReorderEvents($event, 'dragStart')"
+                (drag)="handleReorderEvents($event, 'drag')"
+                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
+                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
+                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
+                (drop)="handleReorderEvents($event, 'drop')"
+                [dragData]="gridData"
                 [data]="$any(view)"
                 [rowHeight]="rowHeight"
                 [detailRowHeight]="detailRowHeight"
@@ -21565,8 +21590,18 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId"
-            position="bottom"></kendo-grid-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+            position="bottom">
+        </kendo-grid-toolbar>
+
+        <ng-template #defaultHint>
+            <kendo-icon-wrapper
+                [name]="getHintSettings('hintIcon')"
+                [svgIcon]="getHintSettings('hintSVGIcon')"
+                innerCssClass="k-drag-status">
+            </kendo-icon-wrapper>
+            {{hintText}}
+        </ng-template>
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["dragReady", "press", "dragStart", "drag", "release", "dragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["dragEnter", "dragOver", "dragLeave", "drop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21613,7 +21648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         ScrollRequestService,
                         SortService,
                         ContextService,
-                        SizingOptionsService
+                        SizingOptionsService,
+                        RowReorderService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -21842,6 +21878,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-groupPanelLabel="kendo.grid.groupPanelLabel|The label for the Grid group panel toolbar"
             groupPanelLabel="Group panel"
+
+            i18n-dragRowHandleLabel="kendo.grid.dragRowHandleLabel|The label for the Grid drag row handle"
+            dragRowHandleLabel="Drag row"
         >
         </ng-container>
         <kendo-grid-toolbar
@@ -21969,6 +22008,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </div>
             </div>
             <kendo-grid-list
+                kendoDragTargetContainer
+                kendoDropTargetContainer
+                mode="manual"
+                [dragDisabled]="!rowReorderable"
+                [dropDisabled]="!rowReorderable"
+                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                [dragHandle]="getDefaultSelectors('handle')"
+                [hint]="{hintTemplate: defaultHint}"
+                (press)="handleReorderEvents($event, 'press')"
+                (dragStart)="handleReorderEvents($event, 'dragStart')"
+                (drag)="handleReorderEvents($event, 'drag')"
+                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
+                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
+                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
+                (drop)="handleReorderEvents($event, 'drop')"
+                [dragData]="gridData"
                 [data]="$any(view)"
                 [rowHeight]="rowHeight"
                 [detailRowHeight]="detailRowHeight"
@@ -22134,10 +22190,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId"
-            position="bottom"></kendo-grid-toolbar>
+            position="bottom">
+        </kendo-grid-toolbar>
+
+        <ng-template #defaultHint>
+            <kendo-icon-wrapper
+                [name]="getHintSettings('hintIcon')"
+                [svgIcon]="getHintSettings('hintSVGIcon')"
+                innerCssClass="k-drag-status">
+            </kendo-icon-wrapper>
+            {{hintText}}
+        </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: SelectionService }, { type: CellSelectionService }, { type: i0.ElementRef }, { type: GroupInfoService }, { type: GroupsService }, { type: ChangeNotificationService }, { type: DetailsService }, { type: EditService }, { type: FilterService }, { type: PDFService }, { type: ResponsiveService }, { type: i0.Renderer2 }, { type: ExcelService }, { type: i0.NgZone }, { type: ScrollSyncService }, { type: DomEventsService }, { type: ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: ColumnReorderService }, { type: ColumnInfoService }, { type: NavigationService }, { type: SortService }, { type: ScrollRequestService }, { type: i1.LocalizationService }, { type: ContextService }, { type: SizingOptionsService }, { type: RowReorderService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -22173,6 +22239,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], groupable: [{
                 type: Input
+            }], rowReorderable: [{
+                type: Input
             }], navigable: [{
                 type: Input
             }], navigatable: [{
@@ -22207,6 +22275,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], selectionChange: [{
                 type: Output
+            }], rowReorder: [{
+                type: Output
             }], dataStateChange: [{
                 type: Output
             }], groupExpand: [{
@@ -22306,6 +22376,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaRoot: [{
                 type: ViewChild,
                 args: ['ariaRoot', { static: true }]
+            }], dragTargetContainer: [{
+                type: ViewChild,
+                args: [DragTargetContainerDirective]
+            }], dropTargetContainer: [{
+                type: ViewChild,
+                args: [DropTargetContainerDirective]
             }], isDetailExpanded: [{
                 type: Input
             }], isGroupExpanded: [{
@@ -22316,12 +22392,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * A directive which encapsulates the in-memory handling of data operations such as [paging]({% slug paging_grid %}),
  * [sorting]({% slug sorting_grid %}), and [grouping]({% slug grouping_grid %})
  * ([more information and examples]({% slug local_data_grid %}#toc-using-the-data-binding-directive)).
+ *
+  * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="gridData" ...></kendo-grid>
+ * ```
  */
 class DataBindingDirective {
-    constructor(grid, changeDetector, localDataChangesService) {
+    constructor(grid, changeDetector, localDataChangesService, rowReorderService) {
         this.grid = grid;
         this.changeDetector = changeDetector;
         this.localDataChangesService = localDataChangesService;
+        this.rowReorderService = rowReorderService;
         this.state = {
             skip: 0
         };
@@ -22332,12 +22414,16 @@ class DataBindingDirective {
     }
     /**
      * Defines the number of records that will be skipped by the pager.
+     * @default 0
      */
     set skip(value) {
         if (!isPresent(value)) {
             value = 0;
         }
         this.grid.skip = this.state.skip = value;
+        if (this.rowReorderService) {
+            this.rowReorderService.skip = value;
+        }
     }
     /**
      * Defines the descriptors by which the data will be sorted.
@@ -22381,6 +22467,11 @@ class DataBindingDirective {
         this.stateChangeSubscription = this.grid
             .dataStateChange
             .subscribe(this.onStateChange.bind(this));
+        if (this.rowReorderService) {
+            this.rowReorderSubscription = this.grid
+                .rowReorder
+                .subscribe(this.onRowReorder.bind(this));
+        }
     }
     /**
      * @hidden
@@ -22392,6 +22483,9 @@ class DataBindingDirective {
         if (this.dataChangedSubscription) {
             this.dataChangedSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -22413,6 +22507,13 @@ class DataBindingDirective {
         this.applyState(state);
         this.rebind();
     }
+    /**
+     * @hidden
+     */
+    onRowReorder(ev) {
+        this.rowReorderService.reorderRows(ev, this.originalData);
+        this.rebind();
+    }
     /**
      * @hidden
      */
@@ -22445,14 +22546,14 @@ class DataBindingDirective {
         this.dataChanged = false;
     }
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: GridComponent }, { token: i0.ChangeDetectorRef }, { token: LocalDataChangesService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Directive });
 DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DataBindingDirective, selector: "[kendoGridBinding]", inputs: { skip: "skip", sort: "sort", filter: "filter", pageSize: "pageSize", group: "group", data: ["kendoGridBinding", "data"] }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridBinding]'
                 }]
-        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }]; }, propDecorators: { skip: [{
+        }], ctorParameters: function () { return [{ type: GridComponent }, { type: i0.ChangeDetectorRef }, { type: LocalDataChangesService }, { type: RowReorderService }]; }, propDecorators: { skip: [{
                 type: Input
             }], sort: [{
                 type: Input
@@ -22469,7 +22570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * 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)).
  */
 class SelectionDirective extends Selection {
     constructor(ctx, cd) {
@@ -22502,7 +22603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }]; } });
 
 /**
- * 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))
  */
 class ExpandDetailsDirective {
     constructor(grid) {
@@ -24428,28 +24529,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `cancel` command of the Grid. You can apply this directive to any `button`
- * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
  * [cancel]({% slug api_grid_gridcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug basics_editing_grid %})).
- *
- * > When the row is not in the edit mode, the button with the `kendoGridCancelCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *   <kendo-grid-command-column title="command">
- *     <ng-template kendoGridCellTemplate>
- *       <button kendoGridCancelCommand>Cancel changes</button>
- *     </ng-template>
- *   </kendo-grid-command-column>
- * </kendo-grid>
- * ```
+ * is triggered. When the row is not in the edit mode, the button with the `kendoGridCancelCommand` is automatically hidden.
  *
  * You can control the content of the button based on the state of the row.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate let-isNew="isNew">
@@ -24537,23 +24626,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `save` command of the Grid. You can apply this directive to any `button`
- * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * element inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
  * [save]({% slug api_grid_gridcomponent %}#toc-save) event
- * is triggered ([see example]({% slug basics_editing_grid %})).
- *
- * > When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
- *
- * @example
- * ```html-no-run
- * <kendo-grid>
- *   <kendo-grid-command-column title="command">
- *     <ng-template kendoGridCellTemplate>
- *       <button kendoGridSaveCommand>Save changes</button>
- *     </ng-template>
- *   </kendo-grid-command-column>
- * </kendo-grid>
- * ```
+ * is triggered. When the row is not in the edit mode, the button with `kendoGridSaveCommand` is automatically hidden.
  *
  * You can control the content of the button based on the state of the row.
  *
@@ -24646,15 +24723,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `remove` command of the Grid. You can apply this directive to any `button` element
- * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %}).
+ * inside a [CommandColumnComponent]({% slug api_grid_commandcolumncomponent %})
+ * ([see example](slug:editing_directives_grid#toc-command-column-directives)).
  * When an associated button with the directive is clicked, the
- * [remove event]({% slug api_grid_gridcomponent %}#toc-remove)
- * is triggered ([see example]({% slug inline_editing_grid %}#toc-using-reactive-forms))).
- *
- * > When the row is in the edit mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
+ * [remove]({% slug api_grid_gridcomponent %}#toc-remove) event
+ * is triggered.
+ * When the row is in the edit mode, the button with the `kendoGridRemoveCommand` is automatically hidden.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *   <kendo-grid-command-column title="command">
  *     <ng-template kendoGridCellTemplate>
@@ -24746,7 +24823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ([see example]({% slug basics_editing_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *    <ng-template kendoGridToolbarTemplate>
  *       <button kendoGridAddCommand>Add new</button>
@@ -24811,6 +24888,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.k-grid-add-command']
             }] } });
 
+/**
+ * Represents the drag handle for reordering rows in the Grid.
+ */
+class RowReorderColumnComponent extends ColumnBase {
+    constructor(parent, idService) {
+        super(parent, idService);
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.isRowReorderColumn = true;
+    }
+}
+RowReorderColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+RowReorderColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RowReorderColumnComponent, selector: "kendo-grid-rowreorder-column", inputs: { dragHandleIcon: "dragHandleIcon", dragHandleSVGIcon: "dragHandleSVGIcon" }, providers: [
+        {
+            provide: ColumnBase,
+            useExisting: forwardRef(() => RowReorderColumnComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RowReorderColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => RowReorderColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-rowreorder-column',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { dragHandleIcon: [{
+                type: Input
+            }], dragHandleSVGIcon: [{
+                type: Input
+            }] } });
+
 const exported = [
     CommandColumnComponent,
     CheckboxColumnComponent,
@@ -24826,7 +24949,8 @@ const exported = [
     RemoveCommandDirective,
     AddCommandDirective,
     CellLoadingTemplateDirective,
-    LoadingTemplateDirective
+    LoadingTemplateDirective,
+    RowReorderColumnComponent
 ];
 const importedModules$1 = [
     CommonModule,
@@ -24856,7 +24980,8 @@ class BodyModule {
             RemoveCommandDirective,
             AddCommandDirective,
             CellLoadingTemplateDirective,
-            LoadingTemplateDirective
+            LoadingTemplateDirective,
+            RowReorderColumnComponent
         ];
     }
 }
@@ -24875,7 +25000,8 @@ BodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         RemoveCommandDirective,
         AddCommandDirective,
         CellLoadingTemplateDirective,
-        LoadingTemplateDirective], imports: [CommonModule,
+        LoadingTemplateDirective,
+        RowReorderColumnComponent], imports: [CommonModule,
         ReactiveFormsModule,
         FormsModule,
         SharedModule,
@@ -24896,7 +25022,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$1]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BodyModule, decorators: [{
             type: NgModule,
@@ -25146,7 +25273,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * A directive which encapsulates the editing operations of the Grid when using
- * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-the-template-directive)).
+ * the Template-Driven Angular Forms ([see example]({% slug editing_directives_grid %}#toc-template-editing-directive)).
  */
 class TemplateEditingDirective extends RowEditingDirectiveBase {
     constructor(grid, localDataChangesService) {
@@ -25244,7 +25371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * A directive which encapsulates the editing operations of the Grid when using the in-cell
- * editing with Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-the-incell-directive)).
+ * editing with Reactive Forms ([see example]({% slug editing_directives_grid %}#toc-in-cell-editing)).
  */
 class InCellEditingDirective extends EditingDirectiveBase {
     constructor(grid, localDataChangesService, cdr) {
@@ -25676,29 +25803,19 @@ const declarations$2 = [
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid module
- * import { GridModule } 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 { GridModule } from '@progress/kendo-angular-grid';
+ * import { BrowserModule } from "@angular/platform-browser";
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule], // import Grid module
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule],
  *     bootstrap:    [AppComponent]
  * })
  * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
  * ```
  */
 class GridModule {
@@ -25730,7 +25847,8 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         RowFilterModule,
         FilterMenuModule,
         ResizeSensorModule,
-        ColumnMenuModule], exports: [GridComponent,
+        ColumnMenuModule,
+        DragAndDropModule$1], exports: [GridComponent,
         ToolbarTemplateDirective,
         ToolbarComponent,
         GridSpacerComponent,
@@ -25743,7 +25861,7 @@ GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         InCellEditingDirective,
         ExpandDetailsDirective,
         ExpandGroupDirective,
-        GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
+        GridToolbarFocusableDirective, GroupHeaderTemplateDirective, GroupHeaderColumnTemplateDirective, GroupFooterTemplateDirective, ColumnComponent, SpanColumnComponent, ColumnGroupComponent, FooterTemplateDirective, DetailTemplateDirective, FocusableDirective, GridTableDirective, CommandColumnComponent, CheckboxColumnComponent, SelectionCheckboxDirective, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, CellLoadingTemplateDirective, LoadingTemplateDirective, RowReorderColumnComponent, HeaderTemplateDirective, SelectAllCheckboxDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, PagerDropDownListDirective, PagerInputDirective, FilterRowComponent, FilterCellComponent, FilterCellTemplateDirective, FilterCellOperatorsComponent, StringFilterCellComponent, NumericFilterCellComponent, AutoCompleteFilterCellComponent, BooleanFilterCellComponent, DateFilterCellComponent, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, StringFilterMenuComponent, FilterMenuTemplateDirective, NumericFilterMenuComponent, DateFilterMenuComponent, BooleanFilterMenuComponent, FilterMenuDropDownListDirective, BooleanFilterRadioButtonDirective, FilterCellOperatorsComponent, ContainsFilterOperatorComponent, DoesNotContainFilterOperatorComponent, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, NotEqualFilterOperatorComponent, StartsWithFilterOperatorComponent, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, AfterFilterOperatorComponent, AfterEqFilterOperatorComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, ColumnChooserComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuSortComponent, ColumnMenuLockComponent, ColumnMenuStickComponent, ColumnMenuPositionComponent, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuContainerComponent, ColumnMenuItemDirective, ColumnMenuComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuAutoSizeAllColumnsComponent] });
 GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridModule, imports: [[
             CommonModule,
             GroupModule,
@@ -25755,7 +25873,8 @@ GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13
             RowFilterModule,
             FilterMenuModule,
             ResizeSensorModule,
-            ColumnMenuModule
+            ColumnMenuModule,
+            DragAndDropModule$1
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridModule, decorators: [{
             type: NgModule,
@@ -25773,7 +25892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         RowFilterModule,
                         FilterMenuModule,
                         ResizeSensorModule,
-                        ColumnMenuModule
+                        ColumnMenuModule,
+                        DragAndDropModule$1
                     ]
                 }]
         }] });
@@ -25792,50 +25912,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * 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>
  * ```
  */
 class PDFTemplateDirective extends PDFExportTemplateDirective {
@@ -26341,28 +26433,19 @@ const declarations$1 = [
  *
  * @example
  *
- * ```ts-no-run
- * // Import the Grid and PDF modules
- * import { GridModule, PDFModule } 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, PDFModule } from '@progress/kendo-angular-grid';
  * import { AppComponent } from './app.component';
  *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, GridModule, PDFModule], // import Grid and PDF modules
+ * @NgModule({
+ *     declarations: [AppComponent],
+ *     imports:      [BrowserModule, GridModule, PDFModule],
  *     bootstrap:    [AppComponent]
  * })
- * export class AppModule {}
  *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
+ * export class AppModule {}
  *
  * ```
  */
@@ -26541,13 +26624,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * 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>
@@ -26622,29 +26705,19 @@ const declarations = [ExcelComponent, ExcelCommandDirective];
  *
  * @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);
- *
  * ```
  */
 class ExcelModule {
@@ -26665,5 +26738,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, BooleanFilterRadioButtonDirective, BrowserSupportService, CELL_CONTEXT, CancelCommandDirective, CellCloseEvent, CellComponent, CellLoadingTemplateDirective, CellSelectionService, CellTemplateDirective, ChangeNotificationService, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnListComponent, ColumnLockedChangeEvent, ColumnMenuAutoSizeAllColumnsComponent, ColumnMenuAutoSizeColumnComponent, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuContainerComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuItemDirective, ColumnMenuLockComponent, ColumnMenuPositionComponent, ColumnMenuService, ColumnMenuSortComponent, ColumnMenuStickComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnReorderService, ColumnResizingService, ColumnStickyChangeEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, ContextService, CustomMessagesComponent, DEFAULT_SCROLLER_FACTORY, DataBindingDirective, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DetailCollapseEvent, DetailExpandEvent, DetailTemplateDirective, DetailsService, DoesNotContainFilterOperatorComponent, DomEventsService, DragAndDropService, DragHintService, DropCueService, EditCommandDirective, EditService, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandDetailsDirective, ExpandGroupDirective, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuDropDownListDirective, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FocusRoot, FocusableDirective, FooterComponent, FooterModule, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, GridComponent, GridModule, GridSpacerComponent, GridTableDirective, GridToolbarFocusableDirective, GridToolbarNavigationService, GroupBindingDirective, GroupFooterTemplateDirective, GroupHeaderColumnTemplateDirective, GroupHeaderComponent, GroupHeaderTemplateDirective, GroupInfoService, GroupModule, GroupPanelComponent, GroupsService, HeaderComponent, HeaderModule, HeaderTemplateDirective, IdService, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, ListComponent, LoadingComponent, LoadingTemplateDirective, LocalDataChangesService, LogicalCellDirective, LogicalRowDirective, MenuTabbingService, NavigationService, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerContextService, PagerDropDownListDirective, PagerInfoComponent, PagerInputComponent, PagerInputDirective, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, ResizeService, ResponsiveService, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, SaveCommandDirective, ScrollRequestService, ScrollSyncService, SelectAllCheckboxDirective, SelectionCheckboxDirective, SelectionDirective, SelectionService, SharedFilterModule, SharedModule, SinglePopupService, SizingOptionsService, Skip, SortService, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, count, defaultTrackBy, hasFilterMenu, hasFilterRow, isFilterable, slice };