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

package/esm2020/editing/edit-template.directive.mjs

@@ -5,13 +5,12 @@
 import { Directive, TemplateRef, Optional } 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/esm2020/editing/remove-command.directive.mjs

@@ -14,15 +14,15 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * 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/esm2020/editing/save-command.directive.mjs

@@ -14,23 +14,11 @@ import * as i3 from "@progress/kendo-angular-icons";
 import * as i4 from "@angular/common";
 /**
  * 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/esm2020/editing-directives/in-cell-editing.directive.mjs

@@ -13,7 +13,7 @@ import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
  * 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 class InCellEditingDirective extends EditingDirectiveBase {
     constructor(grid, localDataChangesService, cdr) {

package/esm2020/editing-directives/template-editing.directive.mjs

@@ -11,7 +11,7 @@ import * as i1 from "../grid.component";
 import * as i2 from "../editing/local-data-changes.service";
 /**
  * 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 class TemplateEditingDirective extends RowEditingDirectiveBase {
     constructor(grid, localDataChangesService) {

package/esm2020/excel/excel-command.directive.mjs

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

package/esm2020/grid.component.mjs

@@ -73,6 +73,8 @@ import { ContextService } from './common/provider.service';
 import { LoadingTemplateDirective } from './rendering/loading-template.directive';
 import { SizingOptionsService } from './layout/sizing-options.service';
 import { guid } from '@progress/kendo-angular-common';
+import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
+import { RowReorderService } from './row-reordering/row-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -97,22 +99,25 @@ import * as i20 from "./scrolling/scroll-request.service";
 import * as i21 from "@progress/kendo-angular-l10n";
 import * as i22 from "./common/provider.service";
 import * as i23 from "./layout/sizing-options.service";
-import * as i24 from "./rendering/toolbar/toolbar.component";
-import * as i25 from "./pager/pager.component";
-import * as i26 from "./grouping/group-panel.component";
-import * as i27 from "./rendering/common/col-group.component";
-import * as i28 from "./rendering/header/header.component";
-import * as i29 from "./rendering/list.component";
-import * as i30 from "./rendering/footer/footer.component";
-import * as i31 from "./rendering/table-body.component";
-import * as i32 from "./rendering/common/loading.component";
-import * as i33 from "./localization/localized-messages.directive";
-import * as i34 from "@angular/common";
-import * as i35 from "./column-resizing/table.directive";
-import * as i36 from "./rendering/grid-table.directive";
-import * as i37 from "./layout/resizable.directive";
-import * as i38 from "@progress/kendo-angular-common";
-import * as i39 from "./selection/marquee.directive";
+import * as i24 from "./row-reordering/row-reorder.service";
+import * as i25 from "./rendering/toolbar/toolbar.component";
+import * as i26 from "./pager/pager.component";
+import * as i27 from "./grouping/group-panel.component";
+import * as i28 from "./rendering/common/col-group.component";
+import * as i29 from "./rendering/header/header.component";
+import * as i30 from "./rendering/list.component";
+import * as i31 from "./rendering/footer/footer.component";
+import * as i32 from "./rendering/table-body.component";
+import * as i33 from "./rendering/common/loading.component";
+import * as i34 from "@progress/kendo-angular-icons";
+import * as i35 from "./localization/localized-messages.directive";
+import * as i36 from "@angular/common";
+import * as i37 from "./column-resizing/table.directive";
+import * as i38 from "./rendering/grid-table.directive";
+import * as i39 from "./layout/resizable.directive";
+import * as i40 from "@progress/kendo-angular-utils";
+import * as i41 from "@progress/kendo-angular-common";
+import * as i42 from "./selection/marquee.directive";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -162,7 +167,7 @@ const isInEditedCell = (element, gridElement) => closest(element, matchesClasses
  * ```
  */
 export 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;
@@ -190,11 +195,7 @@ export 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.
          *
@@ -258,6 +259,10 @@ export 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.
          */
@@ -305,12 +310,6 @@ export 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 %})).
          *
@@ -348,6 +347,11 @@ export 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.
          */
@@ -459,11 +463,14 @@ export 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);
@@ -503,6 +510,19 @@ export 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.
@@ -512,7 +532,7 @@ export class GridComponent {
     }
     set skip(value) {
         if (typeof value === 'number' && value >= 0) {
-            this._skip = value;
+            this._skip = this.rowReorderService.skip = value;
         }
     }
     /**
@@ -610,6 +630,26 @@ export class GridComponent {
     get marqueeSelection() {
         return this.selectionService.enableMarquee || this.cellSelectionService.enableMarquee;
     }
+    /**
+     * Enables the [row reordering]({% slug ToDo %}) 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.
@@ -752,6 +792,18 @@ export 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;
     }
@@ -923,6 +975,18 @@ export 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 %})).
      *
@@ -1154,6 +1218,9 @@ export class GridComponent {
         if (this.focusElementSubscription) {
             this.focusElementSubscription.unsubscribe();
         }
+        if (this.rowReorderSubscription) {
+            this.rowReorderSubscription.unsubscribe();
+        }
         this.columnRangeChangeSubscription.unsubscribe();
     }
     /**
@@ -1652,6 +1719,12 @@ export class GridComponent {
     get isGroupExpanded() {
         return this.groupsService.userCallback;
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
     /**
      * @hidden
      */
@@ -1878,6 +1951,11 @@ export class GridComponent {
                 this.closeCell();
                 this.cancelCell();
                 this.dataStateChange.emit(x);
+                if (this.rowReorderable) {
+                    this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                        this.notifyReorderContainers();
+                    });
+                }
             });
     }
     attachEditHandlers() {
@@ -2160,9 +2238,16 @@ export 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: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.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: i1.BrowserSupportService }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i0.ElementRef }, { token: i4.GroupInfoService }, { token: i5.GroupsService }, { token: i6.ChangeNotificationService }, { token: i7.DetailsService }, { token: i8.EditService }, { token: i9.FilterService }, { token: i10.PDFService }, { token: i11.ResponsiveService }, { token: i0.Renderer2 }, { token: i12.ExcelService }, { token: i0.NgZone }, { token: i13.ScrollSyncService }, { token: i14.DomEventsService }, { token: i15.ColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i16.ColumnReorderService }, { token: i17.ColumnInfoService }, { token: i18.NavigationService }, { token: i19.SortService }, { token: i20.ScrollRequestService }, { token: i21.LocalizationService }, { token: i22.ContextService }, { token: i23.SizingOptionsService }, { token: i24.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,
@@ -2203,8 +2288,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"
@@ -2430,6 +2516,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
@@ -2557,6 +2646,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"
@@ -2722,8 +2828,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: i24.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i25.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i26.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i27.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i28.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i29.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: i30.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i31.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: i32.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }], directives: [{ type: i33.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i34.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i35.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i36.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i37.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i38.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i39.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: i25.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i26.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i27.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i28.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i29.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i30.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: i31.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i32.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: i33.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i34.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i35.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i37.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i38.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i39.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: i41.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i42.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: [{
@@ -2770,7 +2886,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         ScrollRequestService,
                         SortService,
                         ContextService,
-                        SizingOptionsService
+                        SizingOptionsService,
+                        RowReorderService
                     ],
                     selector: 'kendo-grid',
                     template: `
@@ -2999,6 +3116,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
@@ -3126,6 +3246,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"
@@ -3291,10 +3428,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: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }, { type: i23.SizingOptionsService }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1.BrowserSupportService }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i0.ElementRef }, { type: i4.GroupInfoService }, { type: i5.GroupsService }, { type: i6.ChangeNotificationService }, { type: i7.DetailsService }, { type: i8.EditService }, { type: i9.FilterService }, { type: i10.PDFService }, { type: i11.ResponsiveService }, { type: i0.Renderer2 }, { type: i12.ExcelService }, { type: i0.NgZone }, { type: i13.ScrollSyncService }, { type: i14.DomEventsService }, { type: i15.ColumnResizingService }, { type: i0.ChangeDetectorRef }, { type: i16.ColumnReorderService }, { type: i17.ColumnInfoService }, { type: i18.NavigationService }, { type: i19.SortService }, { type: i20.ScrollRequestService }, { type: i21.LocalizationService }, { type: i22.ContextService }, { type: i23.SizingOptionsService }, { type: i24.RowReorderService }]; }, propDecorators: { data: [{
                 type: Input
             }], pageSize: [{
                 type: Input
@@ -3330,6 +3477,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], groupable: [{
                 type: Input
+            }], rowReorderable: [{
+                type: Input
             }], navigable: [{
                 type: Input
             }], navigatable: [{
@@ -3364,6 +3513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], selectionChange: [{
                 type: Output
+            }], rowReorder: [{
+                type: Output
             }], dataStateChange: [{
                 type: Output
             }], groupExpand: [{
@@ -3463,6 +3614,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: [{