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

package/column-menu/column-menu-item-content-template.directive.d.ts

@@ -6,35 +6,24 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the content template of the
- * [kendo-grid-columnmenu-item]({% slug api_grid_columnmenuitemcomponent %}) component.
+ * [`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
- * ```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' }];
- * }
- *
+ * ```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>
  * ```
  */
 export declare class ColumnMenuItemContentTemplateDirective {

package/column-menu/column-menu-template.directive.d.ts

@@ -8,40 +8,26 @@ import * as i0 from "@angular/core";
  * 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>
  * ```
  */
 export declare class ColumnMenuTemplateDirective {

package/columns/column-base.d.ts

@@ -16,6 +16,10 @@ export declare const isSpanColumn: (column: any) => any;
  * @hidden
  */
 export declare const isCheckboxColumn: (column: any) => any;
+/**
+ * @hidden
+ */
+export declare const isRowReorderColumn: (column: any) => any;
 /**
  * The base class for the column components of the Grid.
  */

package/columns/reorder-column.component.d.ts

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ColumnBase } from './column-base';
+import { IdService } from '../common/id.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import * as i0 from "@angular/core";
+/**
+ * Represents the drag handle for reordering rows in the Grid.
+ */
+export declare class RowReorderColumnComponent extends ColumnBase {
+    parent?: ColumnBase;
+    /**
+     * Defines the name for an existing font icon in the Kendo UI theme.
+     * @hidden
+     */
+    dragHandleIcon: string;
+    /**
+     * Defines an SVGIcon to be rendered as a drag handle.
+     * @hidden
+     */
+    dragHandleSVGIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    readonly isRowReorderColumn: boolean;
+    constructor(parent?: ColumnBase, idService?: IdService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RowReorderColumnComponent, [{ optional: true; host: true; skipSelf: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RowReorderColumnComponent, "kendo-grid-rowreorder-column", never, { "dragHandleIcon": "dragHandleIcon"; "dragHandleSVGIcon": "dragHandleSVGIcon"; }, {}, never, never>;
+}

package/databinding.directive.d.ts

@@ -8,18 +8,27 @@ import { GridComponent } from './grid.component';
 import { DataStateChangeEvent } from './data/change-event-args.interface';
 import { GridDataResult } from './data/data.collection';
 import { LocalDataChangesService } from './editing/local-data-changes.service';
+import { RowReorderEvent } from './row-reordering/types';
+import { RowReorderService } from './row-reordering/row-reorder.service';
 import * as i0 from "@angular/core";
 /**
  * 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>
+ * ```
  */
 export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck, OnChanges {
     protected grid: GridComponent;
     protected changeDetector?: ChangeDetectorRef;
     protected localDataChangesService?: LocalDataChangesService;
+    private rowReorderService?;
     /**
      * Defines the number of records that will be skipped by the pager.
+     * @default 0
      */
     set skip(value: number);
     /**
@@ -47,7 +56,8 @@ export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck,
     protected dataChanged: boolean;
     private stateChangeSubscription;
     private dataChangedSubscription;
-    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService);
+    private rowReorderSubscription;
+    constructor(grid: GridComponent, changeDetector?: ChangeDetectorRef, localDataChangesService?: LocalDataChangesService, rowReorderService?: RowReorderService);
     /**
      * @hidden
      */
@@ -67,6 +77,10 @@ export declare class DataBindingDirective implements OnInit, OnDestroy, DoCheck,
      * @hidden
      */
     onStateChange(state: DataStateChangeEvent): void;
+    /**
+     * @hidden
+     */
+    onRowReorder(ev: RowReorderEvent): void;
     /**
      * @hidden
      */

package/editing/add-command.directive.d.ts

@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
  * ([see example]({% slug basics_editing_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *    <ng-template kendoGridToolbarTemplate>
  *       <button kendoGridAddCommand>Add new</button>

package/editing/cancel-command.directive.d.ts

@@ -10,28 +10,16 @@ import { CellContext } from '../rendering/common/cell-context';
 import * as i0 from "@angular/core";
 /**
  * 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">

package/editing/edit-template.directive.d.ts

@@ -5,13 +5,12 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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.

package/editing/remove-command.directive.d.ts

@@ -10,15 +10,15 @@ import { CellContext } from '../rendering/common/cell-context';
 import * as i0 from "@angular/core";
 /**
  * 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>

package/editing/save-command.directive.d.ts

@@ -10,23 +10,11 @@ import { CellContext } from '../rendering/common/cell-context';
 import * as i0 from "@angular/core";
 /**
  * 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.
  *

package/editing-directives/in-cell-editing.directive.d.ts

@@ -10,7 +10,7 @@ import { CreateFormGroup } from '../common/create-form-group';
 import * as i0 from "@angular/core";
 /**
  * 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)).
  */
 export declare class InCellEditingDirective extends EditingDirectiveBase {
     protected grid: GridComponent;

package/editing-directives/template-editing.directive.d.ts

@@ -8,7 +8,7 @@ import { LocalDataChangesService } from '../editing/local-data-changes.service';
 import * as i0 from "@angular/core";
 /**
  * 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)).
  */
 export declare class TemplateEditingDirective extends RowEditingDirectiveBase {
     protected grid: GridComponent;

package/esm2020/column-menu/column-menu-item-content-template.directive.mjs

@@ -6,35 +6,24 @@ import { Directive, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the content template of the
- * [kendo-grid-columnmenu-item]({% slug api_grid_columnmenuitemcomponent %}) component.
+ * [`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
- * ```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' }];
- * }
- *
+ * ```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>
  * ```
  */
 export class ColumnMenuItemContentTemplateDirective {

package/esm2020/column-menu/column-menu-template.directive.mjs

@@ -8,40 +8,26 @@ import * as i0 from "@angular/core";
  * 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>
  * ```
  */
 export class ColumnMenuTemplateDirective {

package/esm2020/columns/column-base.mjs

@@ -17,6 +17,10 @@ export const isSpanColumn = column => column.isSpanColumn;
  * @hidden
  */
 export const isCheckboxColumn = column => column.isCheckboxColumn;
+/**
+ * @hidden
+ */
+export const isRowReorderColumn = column => column.isRowReorderColumn;
 const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
 /**
  * The base class for the column components of the Grid.

package/esm2020/columns/reorder-column.component.mjs

@@ -0,0 +1,55 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, SkipSelf, Host, Optional, Input } from '@angular/core';
+import { ColumnBase } from './column-base';
+import { IdService } from '../common/id.service';
+import * as i0 from "@angular/core";
+import * as i1 from "./column-base";
+import * as i2 from "../common/id.service";
+/**
+ * Represents the drag handle for reordering rows in the Grid.
+ */
+export 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: i1.ColumnBase, host: true, optional: true, skipSelf: true }, { token: i2.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: i1.ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
+                    type: Optional
+                }] }, { type: i2.IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { dragHandleIcon: [{
+                type: Input
+            }], dragHandleSVGIcon: [{
+                type: Input
+            }] } });

package/esm2020/databinding.directive.mjs

@@ -7,19 +7,27 @@ import { process } from '@progress/kendo-data-query';
 import { GridComponent } from './grid.component';
 import { anyChanged, isPresent } from './utils';
 import { LocalDataChangesService } from './editing/local-data-changes.service';
+import { RowReorderService } from './row-reordering/row-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./grid.component";
 import * as i2 from "./editing/local-data-changes.service";
+import * as i3 from "./row-reordering/row-reorder.service";
 /**
  * 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>
+ * ```
  */
 export 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
         };
@@ -30,12 +38,16 @@ export 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.
@@ -79,6 +91,11 @@ export 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
@@ -90,6 +107,9 @@ export class DataBindingDirective {
         if (this.dataChangedSubscription) {
             this.dataChangedSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
     }
     /**
      * @hidden
@@ -111,6 +131,13 @@ export class DataBindingDirective {
         this.applyState(state);
         this.rebind();
     }
+    /**
+     * @hidden
+     */
+    onRowReorder(ev) {
+        this.rowReorderService.reorderRows(ev, this.originalData);
+        this.rebind();
+    }
     /**
      * @hidden
      */
@@ -143,14 +170,14 @@ export class DataBindingDirective {
         this.dataChanged = false;
     }
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.GridComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalDataChangesService }, { token: i3.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: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }]; }, propDecorators: { skip: [{
+        }], ctorParameters: function () { return [{ type: i1.GridComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalDataChangesService }, { type: i3.RowReorderService }]; }, propDecorators: { skip: [{
                 type: Input
             }], sort: [{
                 type: Input

package/esm2020/editing/add-command.directive.mjs

@@ -19,7 +19,7 @@ import * as i4 from "@angular/common";
  * ([see example]({% slug basics_editing_grid %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-grid>
  *    <ng-template kendoGridToolbarTemplate>
  *       <button kendoGridAddCommand>Add new</button>

package/esm2020/editing/cancel-command.directive.mjs

@@ -14,28 +14,16 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * 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">