@progress/kendo-angular-treelist 12.2.0-develop.7 → 13.0.0-develop.10

package/fesm2015/progress-kendo-angular-treelist.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, HostBinding, Output, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Injectable, QueryList, Input, ContentChildren, ContentChild, InjectionToken, forwardRef, Component, SkipSelf, Host, isDevMode, SecurityContext, Inject, Output, HostBinding, Self, ViewChild, HostListener, ViewChildren, Pipe, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$2 from '@angular/forms';
@@ -12,28 +12,30 @@ import { merge, of, fromEvent, isObservable, BehaviorSubject, Subscription, Subj
 import { auditTime, take, switchMap, map, distinctUntilChanged, filter, tap, throttleTime, takeUntil, switchMapTo, debounceTime, delay, bufferCount } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$3 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, anyChanged, isChanged as isChanged$1, guid, ResizeSensorComponent, hasObservers, DraggableModule, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, isChanged as isChanged$1, guid, ResizeSensorComponent, hasObservers, DraggableModule, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
 import { orderBy, isCompositeFilterDescriptor, process, aggregateBy } from '@progress/kendo-data-query';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import * as i1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import { plusIcon, cancelIcon, lockIcon, unlockIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon, columnsIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
+import { plusIcon, cancelIcon, lockIcon, unlockIcon, insertMiddleIcon, filterIcon, sortAscSmallIcon, sortDescSmallIcon, columnsIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon, reorderIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import * as i1$2 from '@angular/platform-browser';
 import * as i3 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { getter, setter } from '@progress/kendo-common';
+import * as i32 from '@progress/kendo-angular-utils';
+import { DragTargetContainerDirective, DropTargetContainerDirective, DragAndDropModule as DragAndDropModule$1 } from '@progress/kendo-angular-utils';
 import * as i3$1 from '@progress/kendo-angular-dropdowns';
 import { DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
-import * as i4$1 from '@progress/kendo-angular-inputs';
+import * as i2 from '@progress/kendo-angular-inputs';
 import { NumericTextBoxComponent, InputsModule, NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i3$3 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i4$2 from '@progress/kendo-angular-buttons';
+import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, Button } from '@progress/kendo-angular-buttons';
 import * as i1$4 from '@progress/kendo-angular-intl';
-import * as i4$3 from '@progress/kendo-angular-label';
+import * as i4$2 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
@@ -46,8 +48,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-treelist',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1684780301,
-    version: '12.2.0-develop.7',
+    publishDate: 1685119813,
+    version: '13.0.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -67,7 +69,7 @@ const packageMetadata = {
  * - `loading`—Specifies if the item children are currently loading.
  * - `rowIndex`—The current row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
  *
- * * @example
+ * @example
  * ```html
  * <kendo-treelist ...>
  *   <kendo-treelist-column field="ProductName">
@@ -108,6 +110,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). If you use the TreeList inside [Template-Driven Forms](link:site.data.urls.angular['forms']), `formGroup` will be `undefined`.
  * - `isNew`&mdash;The state of the current item.
  * - `rowIndex`&mdash;The current row index. If inside a new item row, `rowIndex` is `-1`.
+ *
+ *  * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-command-column title="command">
+ *     <ng-template kendoTreeListEditTemplate let-rowIndex="rowIndex">
+ *         {{rowIndex}}
+ *     </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
  */
 class EditTemplateDirective {
     constructor(templateRef) {
@@ -282,6 +295,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 TreeList.
@@ -674,14 +691,15 @@ function isColumnComponent(column) {
     return isPresent(column.field);
 }
 /**
- * Represents the columns of the [Angular TreeList]({% slug getstarted_treelist %}).
+ * Represents the columns of the TreeList.
  *
- * {% meta height:470 %}
- * {% embed_file basic-usage/app.component.ts preview %}
- * {% embed_file basic-usage/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist [kendoTreeListFlatBinding]="data" ...>
+ *   <kendo-treelist-column field="name" title="Name"></kendo-treelist-column>
+ *   <kendo-treelist-column field="title"title="Title"></kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnComponent extends ColumnBase {
     constructor(parent, optionChanges) {
@@ -693,51 +711,27 @@ class ColumnComponent extends ColumnBase {
         this.sortable = true;
         /**
          * Defines the editor type ([see example]({% slug editing_reactive_forms_treelist %}#toc-setup)).
-         * Used when the column enters the edit mode. The default value is `text`.
+         * Used when the column enters the edit mode. [See example](slug:editing_reactive_forms_treelist).
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" editor="numeric">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default 'text'
          */
         this.editor = 'text';
         /**
-         * Defines the filter type that is displayed inside the filter row. The default value is `text`.
+         * Defines the filter type that is displayed inside the filter row.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" filter="numeric">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default 'text'
          */
         this.filter = 'text';
         /**
-         * Defines if a filter UI will be displayed for this column. The default value is `true`.
+         * Defines if a filter UI will be displayed for this column.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" [filterable]="false">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default true
          */
         this.filterable = true;
         /**
-         * Defines whether the column is editable. The default value is `true`.
+         * Defines whether the column is editable.
          *
-         * @example
-         * ```html-no-run
-         * <kendo-treelist>
-         *    <kendo-treelist-column field="UnitPrice" [editable]="false">
-         *    </kendo-treelist-column>
-         * </kendo-treelist>
-         * ```
+         * @default true
          */
         this.editable = true;
     }
@@ -833,25 +827,15 @@ function isSpanColumnComponent(column) {
  * [sorting]({% slug sorting_treelist %}) and [filtering]({% slug filtering_treelist %}). Wrap the columns that will be
  * merged inside the `<kendo-treelist-span-column>` tag.
  *
- * {% meta height:570 %}
- * {% embed_file configuration/span-column/app.component.ts preview %}
- * {% embed_file configuration/span-column/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
- *
- * By default, the data cell displays the data for the specified fields. To further customize
- * the span-column functionality, use a [cell template]({% slug api_treelist_celltemplatedirective %}).
- *
- * ```html-no-run
+ * ```html
  * <kendo-treelist-span-column>
- *  <kendo-treelist-column field="field1" title="Field 1"></kendo-treelist-column>
- *  <kendo-treelist-column field="field2" title="Field 2"></kendo-treelist-column>
- *    <ng-template kendoTreeListCellTemplate let-dataItem>
- *        <h5>{{ dataItem.field1 }}</h5>
- *        <p>{{ dataItem.field2 }}</p>
- *    </ng-template>
- *  </kendo-treelist-span-column>
+ *   <kendo-treelist-column field="field1" ></kendo-treelist-column>
+ *   <kendo-treelist-column field="field2" ></kendo-treelist-column>
+ *   <ng-template kendoTreeListCellTemplate let-dataItem>
+ *     <h5>{{ dataItem.field1 }}</h5>
+ *     <p>{{ dataItem.field2 }}</p>
+ *   </ng-template>
+ * </kendo-treelist-span-column>
  * ```
  */
 class SpanColumnComponent extends ColumnBase {
@@ -879,22 +863,8 @@ class SpanColumnComponent extends ColumnBase {
     /**
      * Defines whether the edit template of the column will be rendered. The default value is `false`.
      *
-     * > To enable the editing functionality for a spanned column, set an edit template for it.
+     * To enable the editing functionality for a spanned column, set an edit template for it.
      *
-     * @example
-     * ```html-no-run
-     * <kendo-treelist>
-     *    <kendo-treelist-span-column [editable]="false">
-     *      <kendo-treelist-column field="UnitPrice">
-     *      </kendo-treelist-column>
-     *      <kendo-treelist-column field="ProductName">
-     *      </kendo-treelist-column>
-     *      <ng-template kendoTreeListEditTemplate>
-     *         .....
-     *      </ng-template>
-     *    </kendo-treelist-span-column>
-     * </kendo-treelist>
-     * ```
      */
     set editable(value) {
         this._editable = value;
@@ -939,56 +909,9 @@ class SpanColumnComponent extends ColumnBase {
     }
     /**
      * Toggles the locked (frozen) state of the columns. Locked columns are visible
-     * at all times during the horizontal scrolling of the TreeList.
-     *
-     * For the option to work properly, make sure that:
-     * - Scrolling is enabled.
-     * - The `height` option of the TreeList is set.
-     * - The widths of all TreeList columns are explicitly set in pixels. In this way,
-     * the TreeList adjusts the layout of the locked and unlocked columns.
+     * at all times during the horizontal scrolling of the TreeList. [See example](slug:locked_columns_treelist).
      *
      * @default false
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [scrollable]="scrollable" style="height: 200px">
-     *          <kendo-treelist-span-column [locked]="true">
-     *             <kendo-treelist-column field="ProductID" title="Product ID" [width]="120">
-     *             </kendo-treelist-column>
-     *             <kendo-treelist-column field="ProductName" title="Product Name" [width]="200">
-     *             </kendo-treelist-column>
-     *          </kendo-treelist-span-column>
-     *          <kendo-treelist-column field="UnitPrice" title="Unit Price" [width]="230">
-     *          </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     *
-     * class AppComponent {
-     *    public treelistData: any[];
-     *
-     *    constructor() {
-     *        this.treelistData = 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;
@@ -1127,12 +1050,15 @@ function isColumnGroupComponent(column) {
  * Represents the column group header of the TreeList
  * ([more information and examples]({% slug multicolumnheaders_columns_treelist %})).
  *
- * {% meta height:533 %}
- * {% embed_file configuration/multi-column-headers/app.component.ts preview %}
- * {% embed_file configuration/multi-column-headers/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/filesystem.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column-group title="File Info">
+ *     <kendo-treelist-column field="type" title="Type"> </kendo-treelist-column>
+ *     <kendo-treelist-column field="size" title="Size"> </kendo-treelist-column>
+ *   </kendo-treelist-column-group>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnGroupComponent extends ColumnBase {
     constructor(parent, optionChanges) {
@@ -1289,22 +1215,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 const EXPANDED_STATE = {
-    isExpanded: () => true
+    isExpanded: () => true,
 };
 /**
  * @hidden
  */
 const UNSELECTED_STATE = {
-    isRowSelected: () => false
+    isRowSelected: () => false,
 };
 /**
  * @hidden
  */
 const NOT_EDITED_STATE = {
     hasNew: () => false,
-    context: () => null
+    context: () => null,
 };
-const identity$1 = item => item;
+const identity$1 = (item) => item;
 function loadView(view, subject) {
     view.loadData();
     if (view.loading) {
@@ -1349,10 +1275,11 @@ class ViewRange {
         return true;
     }
     includeParents(_children) {
+        // eslint-disable-next-line no-empty
     }
 }
 function isPagerSettings(pageable) {
-    return typeof pageable === "object";
+    return typeof pageable === 'object';
 }
 class PagerRange extends ViewRange {
     constructor(skip, pageSize, pageable) {
@@ -1366,8 +1293,8 @@ class PagerRange extends ViewRange {
         return this.skip <= index && index < this.skip + this.pageSize;
     }
     levelInRange(parent, items, _rowIndex) {
-        return parent.level === -1 ||
-            (this.skip <= parent.index + items.length && parent.index + 1 < this.skip + this.pageSize);
+        return (parent.level === -1 ||
+            (this.skip <= parent.index + items.length && parent.index + 1 < this.skip + this.pageSize));
     }
     includeParents(children) {
         let parentLevel = children.parentLevel;
@@ -1410,7 +1337,7 @@ class ViewItemFactory {
             this.rootLevel = this.dataLevel({
                 level: -1,
                 id: null,
-                expanded: true
+                expanded: true,
             }, options.data);
         }
     }
@@ -1425,7 +1352,8 @@ class ViewItemFactory {
             while (dataLevels[0] && dataLevels[0].idx >= dataLevels[0].items.length) {
                 const dataLevel = dataLevels.shift();
                 if (this.hasFooter && dataLevel.expanded && dataLevel.items.length) {
-                    if (dataLevel.inRange || this.viewRange.levelInRange(dataLevel.parent, dataLevel.items, this.rowIndex)) {
+                    if (dataLevel.inRange ||
+                        this.viewRange.levelInRange(dataLevel.parent, dataLevel.items, this.rowIndex)) {
                         result.push({
                             type: 'footer',
                             items: dataLevel.items,
@@ -1433,7 +1361,7 @@ class ViewItemFactory {
                             level: dataLevel.level,
                             parentItem: dataLevel.parent.data,
                             parentIndex: dataLevel.parentIndex,
-                            rowIndex: this.rowIndex
+                            rowIndex: this.rowIndex,
                         });
                         this.viewRange.includeParents(dataLevel);
                     }
@@ -1453,7 +1381,7 @@ class ViewItemFactory {
                 index: itemIndex,
                 level: currentLevel.level,
                 hasChildren: this.hasChildren(dataItem),
-                parent: currentLevel.parent
+                parent: currentLevel.parent,
             };
             if (currentLevel.expanded) {
                 this.rowIndex++;
@@ -1486,7 +1414,7 @@ class ViewItemFactory {
             observables: this.observables,
             total: itemCount,
             totalVisible: itemIndex,
-            totalRows: this.rowIndex
+            totalRows: this.rowIndex,
         };
     }
     loadChildren(parent) {
@@ -1505,7 +1433,7 @@ class ViewItemFactory {
             if (isObservable(children)) {
                 this.observables.push({
                     observable: children,
-                    parentId: parentId
+                    parentId: parentId,
                 });
                 parent.loading = true;
             }
@@ -1526,7 +1454,7 @@ class ViewItemFactory {
             aggregates: children.aggregates,
             expanded: parent.expanded,
             parentIndex: parent.index,
-            parent: parent
+            parent: parent,
         };
     }
     addNew(result, parent) {
@@ -1539,7 +1467,7 @@ class ViewItemFactory {
                 type: 'data',
                 data: this.editState.newItem.dataItem,
                 editContext: this.editState.newItem,
-                rowIndex: rowIndex
+                rowIndex: rowIndex,
             });
             if (parent || inRange) {
                 this.rowIndex++;
@@ -1575,7 +1503,7 @@ class ViewCollection {
             idGetter: identity$1,
             pageable: false,
             isVirtual: false,
-            skip: 0
+            skip: 0,
         }, options.fields);
         const childrenView = new ViewCollection(viewFields, options.expandState || EXPANDED_STATE, options.editState || NOT_EDITED_STATE, options.selectionState || UNSELECTED_STATE);
         if (options.loaded) {
@@ -1596,20 +1524,28 @@ class ViewCollection {
         }
         return this._data;
     }
-    get length() { return this.data.length; }
-    get first() { return this.data[0]; }
+    get length() {
+        return this.data.length;
+    }
+    get first() {
+        return this.data[0];
+    }
     get firstItem() {
-        return this.find(item => item.type === 'data');
+        return this.find((item) => item.type === 'data');
+    }
+    get last() {
+        return this.data[this.data.length - 1];
     }
-    get last() { return this.data[this.data.length - 1]; }
     at(index) {
         return this.data[index];
     }
     itemIndex(item) {
         const idGetter = this.fieldAccessor().idGetter;
-        return this.data.findIndex(i => i.id === idGetter(item));
+        return this.data.findIndex((i) => i.id === idGetter(item));
+    }
+    map(fn) {
+        return this.data.map(fn);
     }
-    map(fn) { return this.data.map(fn); }
     filter(fn) {
         return this.data.filter(fn);
     }
@@ -1628,16 +1564,18 @@ class ViewCollection {
     find(fn) {
         return this.data.find(fn);
     }
-    toString() { return this.data.toString(); }
+    toString() {
+        return this.data.toString();
+    }
     updateSelectedState() {
-        this.forEach(item => {
+        this.forEach((item) => {
             if (item.type === 'data') {
                 item.selected = this.selectionState.isRowSelected(item.data);
             }
         });
     }
     updateEditedState() {
-        this.forEach(item => {
+        this.forEach((item) => {
             if (item.type === 'data') {
                 item.editContext = this.editState.context(item.data);
             }
@@ -1670,7 +1608,7 @@ class ViewCollection {
     loadData() {
         const itemFactory = new ViewItemFactory(this.expandState, this.editState, this.selectionState, this.loaded, this.fieldAccessor);
         let result = itemFactory.generate();
-        if (!result.loading && result.total && (!result.items.length || !result.items.some(i => i.type === 'data'))) {
+        if (!result.loading && result.total && (!result.items.length || !result.items.some((i) => i.type === 'data'))) {
             this.resetPage.emit();
             result = new ViewItemFactory(this.expandState, this.editState, this.selectionState, this.loaded, this.fieldAccessor).generate();
         }
@@ -1684,9 +1622,10 @@ class ViewCollection {
             if (!this.childrenSubscription) {
                 this.childrenSubscription = new Subscription();
             }
-            result.observables.forEach(o => {
+            result.observables.forEach((o) => {
                 this.loaded.set(o.parentId, LOADING);
-                this.childrenSubscription.add(o.observable.subscribe(children => {
+                this.childrenSubscription.add(o.observable.subscribe((children) => {
+                    // handle error, might show reload icon
                     this.clear();
                     this.loaded.set(o.parentId, children);
                     this.childrenLoaded.emit();
@@ -2134,7 +2073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * * `totalPages`&mdash;The total number of available pages.
  *
  * @example
- * ```
+ * ```html
  * <kendo-treelist ...>
  *   <kendo-treelist-column field="type"></kendo-treelist-column>
  *   <ng-template
@@ -3007,17 +2946,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,
@@ -5177,6 +5116,345 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
+/**
+ * @hidden
+ */
+const isNextSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.nextElementSibling;
+/**
+ * @hidden
+ */
+const isPreviousSibling = (dropTarget, dragTarget) => dropTarget === dragTarget.previousElementSibling;
+/**
+ * @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',
+    over: 'plus'
+};
+/**
+ * @hidden
+ */
+const hintSVGIcons = {
+    forbidden: cancelIcon,
+    before: insertMiddleIcon,
+    after: insertMiddleIcon,
+    over: plusIcon
+};
+/**
+ * @hidden
+ */
+const dropPosition = {
+    forbidden: 'forbidden',
+    before: 'before',
+    after: 'after',
+    over: 'over'
+};
+/**
+ * @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-table-row[data-treelist-view-index]',
+    dropTarget: '.k-table-row[data-treelist-view-index]'
+};
+/**
+ * @hidden
+ */
+const rowIndexAttr = 'data-treelist-view-index';
+/**
+ * @hidden
+ */
+const findParent$1 = (collection, searchItem, field) => {
+    let parent = null;
+    for (const item of collection) {
+        if (searchItem === item) {
+            return null;
+        }
+        const checked = [];
+        const queue = [];
+        queue.push(item);
+        while (queue.length !== 0) {
+            const current = queue.shift();
+            if (!current) {
+                continue;
+            }
+            checked.push(current);
+            if (current === searchItem) {
+                return item;
+            }
+            if (current.hasOwnProperty(field)) {
+                current[field].forEach(node => {
+                    if (checked.indexOf(node) === -1) {
+                        checked.push(node);
+                        queue.push(node);
+                        if (node === searchItem) {
+                            parent = current;
+                            return;
+                        }
+                    }
+                });
+            }
+            if (parent) {
+                return parent;
+            }
+        }
+    }
+};
+const getDocument = element => element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
+const getWindow = element => element === null || element === void 0 ? void 0 : element.ownerDocument.defaultView;
+
+/**
+ * @hidden
+ */
+class RowReorderService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.defaultSelectors = defaultSelectors;
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.lastDropPosition = dropPosition.forbidden;
+        this.hintElement = 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;
+        this.view = ev.dragData;
+    }
+    dragLeave() {
+        this.dropTarget = null;
+        this.lastDropPosition === dropPosition.forbidden && this.hide();
+    }
+    dragEnd() {
+        this.destroyDropIndicator();
+        this.dragTarget = null;
+        this.dropTarget = null;
+        this.hintElement = null;
+    }
+    drop() {
+        this.destroyDropIndicator();
+        const rowReorderArgs = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        this.rowReorder.emit(rowReorderArgs);
+    }
+    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 === null || draggedDragRow === void 0 ? void 0 : 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
+        };
+    }
+    isOverChild(_item) { return false; }
+    reorderRows(_ev, _collection, _field) { }
+    get parentIdField() {
+        return this.bindingDirective.parentIdField;
+    }
+    get idField() {
+        return this.bindingDirective.idField;
+    }
+    get childrenField() {
+        return this.bindingDirective.childrenField;
+    }
+    get data() {
+        return this.bindingDirective.data;
+    }
+    getDragRowPerElement(row, data) {
+        var _a;
+        let rowIndex = row === null || row === void 0 ? void 0 : row.getAttribute(rowIndexAttr);
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) : -1;
+        const dataItem = rowIndex === -1 ? null : (_a = data === null || data === void 0 ? void 0 : data.at(rowIndex)) === null || _a === void 0 ? void 0 : _a.data;
+        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();
+    }
+    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;
+        }
+        ;
+        const itemViewPortCoords = this.dropTarget.getBoundingClientRect();
+        const itemDivisionsCount = 3;
+        const itemDivisionHeight = itemViewPortCoords.height / itemDivisionsCount;
+        const { dropTargetRow } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        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;
+        }
+        else {
+            currentDropPosition = dropPosition.over;
+        }
+        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;
+        }
+        if (this.isOverChild(dropTargetRow.dataItem)) {
+            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 || this.lastDropPosition === dropPosition.over;
+    }
+    hide() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.setStyle(this.dropIndicator, 'display', 'none');
+        }
+    }
+    show() {
+        if (isPresent$1(this.dropIndicator)) {
+            this.renderer.removeStyle(this.dropIndicator, '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
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
  * @hidden
@@ -5745,8 +6023,9 @@ class StringFilterComponent extends BaseFilterCellComponent {
         super(filterService);
         this.localization = localization;
         /**
-         * The default filter operator. Defaults to `contains`.
+         * The default filter operator.
          * @type {string}
+         * @default 'contains'
          */
         this.operator = "contains";
     }
@@ -6077,7 +6356,7 @@ StringFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [filterDelay]="0"
                 [ngModel]="currentFilter?.value" />
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i4$1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$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]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }], directives: [{ type: i2.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { type: i3$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]" }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -6116,6 +6395,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * Represents a string-filter menu component.
  * ([see example]({% slug builtinfiltertemplate_treelist %}#toc-configuration-components-for-filter-templates)).
+ *
+ * @example
+ * ```html
+ * <kendo-treelist-column field="name">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-string-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-string-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
+ *
  */
 class StringFilterMenuComponent extends StringFilterComponent {
     constructor(localization) {
@@ -6128,6 +6421,7 @@ class StringFilterMenuComponent extends StringFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -6240,18 +6534,21 @@ class NumericFilterComponent extends BaseFilterCellComponent {
         super(filterService);
         this.localization = localization;
         /**
-         * The default filter operator. Defaults to `eq`.
+         * The default filter operator.
          * @type {string}
+         * @default 'eq'
          */
         this.operator = "eq";
         /**
          * Specifies the value that is used to increment or decrement the component value.
          * @type {numeric}
+         * @default 1
          */
         this.step = 1;
         /**
          * Specifies whether the **Up** and **Down** spin buttons will be rendered.
          * @type {boolean}
+         * @default true
          */
         this.spinners = true;
         this.defaultOperators = numericOperators(this.localization);
@@ -6375,7 +6672,7 @@ NumericFilterMenuInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-menu-input-wrapper>
-    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i4$1.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"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterMenuInputWrapperComponent, selector: "kendo-treelist-filter-menu-input-wrapper", inputs: ["filterService", "currentFilter"] }, { type: i2.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"] }], directives: [{ type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterMenuInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -6434,18 +6731,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents a numeric-filter menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="UnitPrice" title="Unit Price">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *          <kendo-treelist-numeric-filter-menu
- *              [column]="column"
- *              [filter]="filter"
- *              [filterService]="filterService"
- *              >
- *          </kendo-treelist-numeric-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ *  ```html
+ * <kendo-treelist-column field="UnitPrice">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-numeric-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-numeric-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class NumericFilterMenuComponent extends NumericFilterComponent {
     constructor(localization) {
@@ -6458,6 +6754,7 @@ class NumericFilterMenuComponent extends NumericFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -6603,25 +6900,30 @@ class DateFilterComponent extends BaseFilterCellComponent {
         /**
          * The default filter operator. Defaults to `contains`.
          * @type {string}
+         * @default 'gte'
          */
         this.operator = "gte";
         /**
          * Defines the active view that the calendar initially renders.
          * By default, the active view is `month`.
          *
-         * > You have to set `activeView` within the `topView`-`bottomView` range.
+         * You have to set `activeView` within the `topView`-`bottomView` range.
+         * @default 'month'
          */
         this.activeView = "month";
         /**
          * Defines the bottommost calendar view, to which the user can navigate.
+         * @default 'month'
          */
         this.bottomView = "month";
         /**
          * Defines the topmost calendar view, to which the user can navigate.
+         * @default 'century'
          */
         this.topView = "century";
         /**
          * Determines whether to display a week number column in the `month` view of the Calendar.
+         * @default false
          */
         this.weekNumber = false;
         this.defaultOperators = dateOperators(this.localization);
@@ -6827,18 +7129,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents a date-filter menu component.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="OrderDate" title="Order Date">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-treelist-date-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-treelist-date-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="OrderDate" title="Order Date">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-date-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-date-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class DateFilterMenuComponent extends DateFilterComponent {
     constructor(localization) {
@@ -6851,6 +7152,7 @@ class DateFilterMenuComponent extends DateFilterComponent {
         this.filter = { filters: [], logic: "and" };
         /**
          * Determines if the inputs of second criteria will be displayed.
+         * @default true
          */
         this.extra = true;
     }
@@ -7064,20 +7366,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * Represents a Boolean-filter menu component.
+ * Represents a Boolean-filter menu component. [See example](slug:columnmenu_treelist#toc-customizing-the-content).
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="Discontinued" title="Discontinued">
- *          <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
- *            <kendo-treelist-boolean-filter-menu
- *                [column]="column"
- *                [filter]="filter"
- *                [filterService]="filterService"
- *                >
- *            </kendo-treelist-boolean-filter-menu>
- *          </ng-template>
- *      </kendo-treelist-column>
+ * ```html
+ * <kendo-treelist-column field="Discontinued" title="Discontinued">
+ *   <ng-template kendoTreeListFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">
+ *     <kendo-treelist-boolean-filter-menu
+ *       [column]="column"
+ *       [filter]="filter"
+ *       [filterService]="filterService">
+ *     </kendo-treelist-boolean-filter-menu>
+ *   </ng-template>
+ * </kendo-treelist-column>
  *   ```
  */
 class BooleanFilterMenuComponent extends BooleanFilterComponent {
@@ -7133,7 +7434,7 @@ BooleanFilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
             </li>
         </ul>
-    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanFilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -7459,7 +7760,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-treelist-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -7497,7 +7798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <ng-template
  *     kendoTreeListColumnMenuTemplate
  *     let-service="service"
@@ -7567,7 +7868,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-column field="ProductName">
  *     <ng-template kendoTreeListColumnMenuTemplate>
  *       <kendo-treelist-columnmenu-item text="Item Text" [expanded]="true">
@@ -7602,12 +7903,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents an item that can be placed inside a
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-item/app.component.ts preview %}
- * {% embed_file column-menu/template-item/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ *  * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <ng-template kendoTreeListColumnMenuTemplate let-service="service" let-column="column">
+ *     <kendo-treelist-columnmenu-item text="Fit column"></kendo-treelist-columnmenu-item>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnMenuItemComponent {
     constructor() {
@@ -7662,7 +7965,7 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -7749,19 +8052,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * Represents a column-menu item for sorting TreeList columns that can be placed inside a
- * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
- * Allows the user to sort the column.
+ * Represents the column-menu item for sorting TreeList columns.
+ *
+ * The component can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-sort` component.
+ * To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-sort` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-sort/app.component.ts preview %}
- * {% embed_file column-menu/template-sort/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 class ColumnMenuSortComponent extends ColumnMenuItemBase {
     constructor(localization, sortService) {
@@ -7843,19 +8140,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: SortService }]; } });
 
 /**
- * Represents a column-menu item that can be placed inside a
- * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
- * Allows the user to lock or unlock the columns.
+ * Represents the column-menu item that allows the user to lock or unlock columns.
+ *
+ * The componnt can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-lock` component.
+* To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-lock` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-lock/app.component.ts preview %}
- * {% embed_file column-menu/template-lock/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 class ColumnMenuLockComponent extends ColumnMenuItemBase {
     constructor(localization, columnInfoService, changeDetector) {
@@ -8142,18 +8433,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * Represents the component for selecting columns in the TreeList that can be placed
- * inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * Represents the column-menu item for selecting columns in the TreeList. [See example](slug:columnmenu_treelist#toc-column-chooser-item).
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-chooser` component.
+ * The component can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-chooser` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-chooser/app.component.ts preview %}
- * {% embed_file column-menu/template-chooser/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     constructor(localization, columnInfoService, changeDetector) {
@@ -8171,6 +8457,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -8195,7 +8482,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
 }
 ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1$1.LocalizationService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item 
+        <kendo-treelist-columnmenu-item
             [text]="localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
@@ -8220,7 +8507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{
                     selector: 'kendo-treelist-columnmenu-chooser',
                     template: `
-        <kendo-treelist-columnmenu-item 
+        <kendo-treelist-columnmenu-item
             [text]="localization.get('columns')"
             icon="columns"
             [svgIcon]="columnsIcon"
@@ -8250,18 +8537,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * Represents the component for editing column filters in the TreeList that can be placed
- * inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ * Represents the column-menu item for editing column filters in the TreeList.
  *
- * > You have to set the [ColumnMenuService]({% slug api_treelist_columnmenuservice %}) that is passed by
- * > the template to the service input of the `kendo-treelist-columnmenu-filter` component.
+ * The component can be placed inside a [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
+ *
+ * To register the component as a known column menu item, set the [`ColumnMenuService`]({% slug api_treelist_columnmenuservice %})
+ * that is passed by the template to the service input of the `kendo-treelist-columnmenu-filter` component.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/template-filter/app.component.ts preview %}
- * {% embed_file column-menu/template-filter/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
  */
 class ColumnMenuFilterComponent extends ColumnMenuItemBase {
     constructor(localization) {
@@ -8277,6 +8559,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -8338,7 +8621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
- * Represents the [column menu]({% slug columnmenu_treelist %}) component.
+ * Represents the [column menu]({% slug columnmenu_treelist %}) component of the TreeList.
  */
 class ColumnMenuComponent {
     constructor(popupService, localization, service) {
@@ -8470,7 +8753,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [expanded]="expandedFilter" (expand)="onFilterExpand()">
             </kendo-treelist-columnmenu-filter>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock" }, { type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: ["expanded"], outputs: ["expand", "collapse"] }, { type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: ["expanded"], outputs: ["expand", "collapse"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8528,6 +8811,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents a component which accommodates the filter operators.
+ *
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductName">
+ *     <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *       <input />
+ *       <kendo-treelist-filter-cell-operators
+ *         [operators]="[{text: 'Equals', value: 'eq'}]">
+ *       </kendo-treelist-filter-cell-operators>
+ *     </ng-template>
+ *   </kendo-treelist-column>
+ * </kendo-treelist>
+ * ```
  */
 class FilterCellOperatorsComponent {
     constructor(localization) {
@@ -8541,6 +8838,7 @@ class FilterCellOperatorsComponent {
         /**
          * Determines if the list of operators will be displayed.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
         /**
@@ -8629,7 +8927,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
         </button>
-    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
+    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
             type: Component,
             args: [{
@@ -8748,17 +9046,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-string-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-string-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-string-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-string-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class StringFilterCellComponent extends StringFilterComponent {
     constructor(filterService, localization) {
@@ -8767,12 +9064,14 @@ class StringFilterCellComponent extends StringFilterComponent {
          * Determines the delay time (in milliseconds) before the filter value is submitted.
          * A value of `0` indicates no delay. The default value is `500`.
          * @type {boolean}
+         * @default 500
          */
         this.filterDelay = 500;
         /**
          * Determines if the drop-down filter operators will be displayed.
          * The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
     }
@@ -8785,7 +9084,7 @@ StringFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input 
+            <input
                 class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
@@ -8804,7 +9103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [operators]="operators"
             [defaultOperator]="operator"
             [showOperators]="showOperators">
-            <input 
+            <input
                 class="k-textbox k-input k-input-md k-rounded-md k-input-solid"
                 kendoTreeListFocusable
                 kendoFilterInput
@@ -8823,16 +9122,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents a numeric filter cell.
  *
  * @example
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-numeric-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-numeric-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName" title="Product Name">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-numeric-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-numeric-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class NumericFilterCellComponent extends NumericFilterComponent {
     constructor(filterService, localization) {
@@ -8840,14 +9139,15 @@ class NumericFilterCellComponent extends NumericFilterComponent {
         this.localization = localization;
         /**
          * Determines the delay time (in milliseconds) before the filter value is submitted.
-         * A value of `0` indicates no delay. The default value is `500`.
+         * A value of `0` indicates no delay.
          * @type {boolean}
+         * @default 500
          */
         this.filterDelay = 500;
         /**
          * Determines if the drop-down filter operators will be displayed.
-         * The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
     }
@@ -8874,7 +9174,7 @@ NumericFilterCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [step]="step">
             </kendo-numerictextbox>
         </kendo-treelist-filter-wrapper-cell>
-    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i4$1.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
+    `, isInline: true, components: [{ type: FilterCellWrapperComponent, selector: "kendo-treelist-filter-wrapper-cell", inputs: ["showOperators"] }, { type: i2.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericFilterCellComponent, decorators: [{
             type: Component,
             args: [{
@@ -8910,19 +9210,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents a Boolean filter-cell component.
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-default-filter-operator).
  *
  * @example
- *
- *  ```html-no-run
- *      <kendo-treelist-column field="ProductName" title="Product Name">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-boolean-filter-cell
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-boolean-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="ProductName" title="Product Name">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-boolean-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-boolean-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class BooleanFilterCellComponent extends BooleanFilterComponent {
     constructor(filterService, localization, cd) {
@@ -8983,17 +9283,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  *
- *  ```html-no-run
- *      <kendo-treelist-column field="OrderDate" title="Order Date">
- *          <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
- *          <kendo-treelist-date-filter-cell
- *              [showOperators]="false"
- *              [column]="column"
- *              [filter]="filter">
- *          </kendo-treelist-date-filter-cell>
- *          </ng-template>
- *      </kendo-treelist-column>
- *   ```
+ * ```html
+ * <kendo-treelist-column field="OrderDate">
+ *   <ng-template kendoTreeListFilterCellTemplate let-filter let-column="column">
+ *     <kendo-treelist-date-filter-cell
+ *       [column]="column"
+ *       [filter]="filter">
+ *     </kendo-treelist-date-filter-cell>
+ *   </ng-template>
+ * </kendo-treelist-column>
+ * ```
  */
 class DateFilterCellComponent extends DateFilterComponent {
     constructor(filterService, localization) {
@@ -9002,6 +9301,7 @@ class DateFilterCellComponent extends DateFilterComponent {
         /**
          * Determines if the drop-down filter operators will be displayed. The default value is `true`.
          * @type {boolean}
+         * @default true
          */
         this.showOperators = true;
     }
@@ -10329,7 +10629,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [logicalSlaveCellsCount]="unlockedColumnsCount"
         >
         </tr>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-treelist-filter-menu", inputs: ["column", "filter"] }, { type: ColumnMenuComponent, selector: "kendo-treelist-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoTreeListFilterRow]", inputs: ["columns", "filter", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoTreeListLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "isNew"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoTreeListLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "column", "colIndex", "colSpan", "rowSpan", "dataRowIndex", "dataItem", "expandable"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: ColumnHandleDirective, selector: "[kendoTreeListColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -10700,6 +11000,10 @@ const ICON_CLASS = 'k-icon k-svg-icon';
  * @hidden
  */
 const IGNORE_CONTAINER_CLASSES = 'k-treelist-ignore-click';
+/**
+ * @hidden
+ */
+const DRAG_HANDLE_CLASS = 'k-drag-cell';
 
 /* eslint-disable @angular-eslint/pipe-prefix */
 /**
@@ -10766,13 +11070,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * @hidden
  */
 class CellComponent {
-    constructor(editService, focusGroup) {
+    constructor(editService, localization, focusGroup) {
         this.editService = editService;
+        this.localization = localization;
         this.focusGroup = focusGroup;
         this.isNew = false;
         this.level = 0;
         this.caretAltDownIcon = caretAltDownIcon;
         this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.reorderIcon = reorderIcon;
         this.cellContext = {};
         this._templateContext = {};
         this._editTemplateContext = {};
@@ -10788,7 +11095,13 @@ class CellComponent {
     get textNoWrapClass() {
         return this.column.expandable;
     }
-    set viewItem(value) {
+    get dragHandleCellClass() {
+        return isRowReorderColumn(this.column);
+    }
+    get dragRowHandleLabel() {
+        return isRowReorderColumn(this.column) ? this.localization.get('dragRowHandleLabel') : undefined;
+    }
+    set viewItem(value) {
         this._viewItem = value;
         this.cellContext.viewItem = this.viewItem;
     }
@@ -10854,9 +11167,25 @@ class CellComponent {
         context.loading = this.loading;
         context.rowIndex = this.viewItem.rowIndex;
     }
+    get arrowIcon() {
+        const icon = !this.isExpanded ?
+            !this.localization.rtl ?
+                'caret-alt-right' :
+                'caret-alt-left' :
+            'caret-alt-down';
+        return icon;
+    }
+    get arrowSVGIcon() {
+        const icon = !this.isExpanded ?
+            !this.localization.rtl ?
+                this.caretAltRightIcon :
+                this.caretAltLeftIcon :
+            this.caretAltDownIcon;
+        return icon;
+    }
 }
-CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
-CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass" } }, ngImport: i0, template: `
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, deps: [{ token: EditService }, { token: i1$1.LocalizationService }, { token: FocusGroup }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CellComponent, selector: "[kendoTreeListCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", level: "level", hasChildren: "hasChildren", isExpanded: "isExpanded", loading: "loading", expandIcons: "expandIcons", selected: "selected", dataItem: "dataItem", viewItem: "viewItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-checkbox-cell": "this.isCheckboxColumn", "class.k-text-nowrap": "this.textNoWrapClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
         <ng-container [ngSwitch]="isEdited">
             <ng-container *ngSwitchCase="false">
                 <ng-container *ngIf="column.expandable">
@@ -10864,8 +11193,8 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     <kendo-icon-wrapper
                         aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
-                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                        [name]="arrowIcon"
+                        [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
@@ -10885,6 +11214,12 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -10925,7 +11260,7 @@ CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i4$1.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: i3$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$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: { "levelItems": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i2.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: i3$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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3$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: { "levelItems": LevelItemsPipe, "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
@@ -10938,8 +11273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     <kendo-icon-wrapper
                         aria-hidden="true"
                         *ngIf="hasChildren && expandIcons && !loading"
-                        [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
-                        [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
+                        [name]="arrowIcon"
+                        [svgIcon]="arrowSVGIcon"></kendo-icon-wrapper>
                     <span class="k-icon k-i-loading" *ngIf="hasChildren && expandIcons && loading"></span>
                 </ng-container>
                 <ng-container *ngIf="column.templateRef"
@@ -10959,6 +11294,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         class="k-checkbox k-checkbox-md k-rounded-md"
                         [checked]="selected" />
                 </ng-template>
+                <ng-container *ngIf="column.isRowReorderColumn && !isNew">
+                    <kendo-icon-wrapper
+                        name="reorder"
+                        [svgIcon]="reorderIcon">
+                    </kendo-icon-wrapper>
+                </ng-container>
             </ng-container>
             <ng-container *ngSwitchCase="true">
                 <ng-container
@@ -11001,7 +11342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: EditService }, { type: FocusGroup }]; }, propDecorators: { commandCellClass: [{
+        }], ctorParameters: function () { return [{ type: EditService }, { type: i1$1.LocalizationService }, { type: FocusGroup }]; }, propDecorators: { commandCellClass: [{
                 type: HostBinding,
                 args: ['class.k-command-cell']
             }], isCheckboxColumn: [{
@@ -11010,6 +11351,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], textNoWrapClass: [{
                 type: HostBinding,
                 args: ['class.k-text-nowrap']
+            }], 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: [{
@@ -11214,8 +11564,10 @@ class TableBodyComponent {
     clickHandler(eventArg) {
         const target = eventArg.target;
         const { cell, row } = this.targetElements(target);
-        if (cell && !hasClasses(cell, NON_DATA_CELL_CLASSES) &&
-            !hasClasses(row, NON_DATA_ROW_CLASSES)) {
+        const forbiddenCellClasses = NON_DATA_CELL_CLASSES.concat(` ${DRAG_HANDLE_CLASS}`);
+        const isValidCell = cell ? !hasClasses(cell, forbiddenCellClasses) : false;
+        const isValidRow = row ? !hasClasses(row, NON_DATA_ROW_CLASSES) : false;
+        if (isValidRow && isValidCell) {
             if (this.expandClick(eventArg, row) || this.checkboxClick(cell, row, eventArg)) {
                 return;
             }
@@ -12494,6 +12846,10 @@ class PagerElementComponent {
         this.skip = this.pagerContext.skip;
         this.pageSize = this.pagerContext.pageSize;
         this.allCount = this.pagerContext.allCount;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -12551,6 +12907,18 @@ class PagerElementComponent {
             this.subscriptions.unsubscribe();
         }
     }
+    get prevArrowIcons() {
+        return !this.localization.rtl ? ['caret-alt-to-left', 'caret-alt-left'] : ['caret-alt-to-right', 'caret-alt-right'];
+    }
+    get prevArrowSVGIcons() {
+        return !this.localization.rtl ? [this.caretAltToLeftIcon, this.caretAltLeftIcon] : [this.caretAltToRightIcon, this.caretAltRightIcon];
+    }
+    get nextArrowIcons() {
+        return !this.localization.rtl ? ['caret-alt-right', 'caret-alt-to-right'] : ['caret-alt-left', 'caret-alt-to-left'];
+    }
+    get nextArrowSVGIcons() {
+        return !this.localization.rtl ? [this.caretAltRightIcon, this.caretAltToRightIcon] : [this.caretAltLeftIcon, this.caretAltToLeftIcon];
+    }
 }
 PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1$1.LocalizationService }, { token: PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 PagerElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: PagerElementComponent, ngImport: i0 });
@@ -12567,8 +12935,6 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltLeftIcon = caretAltLeftIcon;
-        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -12607,8 +12973,8 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="onButtonClick('firstPage')"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -12621,15 +12987,15 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
             [attr.aria-label]="textFor('pagerPreviousPage')"
             (click)="onButtonClick('prevPage')">
         </button>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPrevButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12645,8 +13011,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="textFor('pagerFirstPage')"
             (click)="onButtonClick('firstPage')"
             role="button"
-            icon="caret-alt-to-left"
-            [svgIcon]="caretAltToLeftIcon"
+            [icon]="prevArrowIcons[0]"
+            [svgIcon]="prevArrowSVGIcons[0]"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -12659,8 +13025,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [enabled]="!disabled"
             class="k-pager-nav"
             [disabled]="disabled"
-            icon="caret-alt-left"
-            [svgIcon]="caretAltLeftIcon"
+            [icon]="prevArrowIcons[1]"
+            [svgIcon]="prevArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             [title]="textFor('pagerPreviousPage')"
@@ -12673,7 +13039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 /**
- * Displays numeric buttons to enable navigation between the pages.
+ * Displays numeric buttons to enable navigation between the pages ([see example]({% slug paging_treelist %}#toc-pager-templates)).
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
     constructor(localization, cd, pagerContext) {
@@ -12814,7 +13180,7 @@ PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [attr.title]="pageLabel(end + 1)"
                 (click)="changePage(end)">...</button>
         </div>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -12983,7 +13349,7 @@ PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-numerictextbox>
                 {{textFor('pagerOf')}} {{totalPages}}
         </span>
-    `, isInline: true, components: [{ type: i4$1.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    `, isInline: true, components: [{ type: i2.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"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }, { type: i1$3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -13028,8 +13394,6 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
-        this.caretAltRightIcon = caretAltRightIcon;
-        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -13064,8 +13428,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             kendoTreeListFocusable
             [enabled]="!disabled"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -13079,8 +13443,8 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             kendoTreeListFocusable
             [enabled]="!disabled"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -13089,7 +13453,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             [attr.aria-label]="textFor('pagerLastPage')"
             (click)="onButtonClick('lastPage')">
         </button>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
             type: Component,
             args: [{
@@ -13101,8 +13465,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             kendoTreeListFocusable
             [enabled]="!disabled"
-            icon="caret-alt-right"
-            [svgIcon]="caretAltRightIcon"
+            [icon]="nextArrowIcons[0]"
+            [svgIcon]="nextArrowSVGIcons[0]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -13116,8 +13480,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             type="button"
             kendoTreeListFocusable
             [enabled]="!disabled"
-            icon="caret-alt-to-right"
-            [svgIcon]="caretAltToRightIcon"
+            [icon]="nextArrowIcons[1]"
+            [svgIcon]="nextArrowSVGIcons[1]"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -13289,7 +13653,7 @@ PagerPageSizesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [attr.aria-label]="textFor('pagerItemsPerPage')"
             (valueChange)="pageSizeChange($event)"></kendo-dropdownlist>
         <kendo-label [for]="dropdownlist" [text]="textFor('pagerItemsPerPage')"></kendo-label>
-    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$3.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i3$1.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["iconClass", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { type: i4$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }], directives: [{ type: FocusableDirective, selector: "[kendoTreeListFocusable],\n        [kendoTreeListAddCommand],\n        [kendoTreeListEditCommand],\n        [kendoTreeListRemoveCommand],\n        [kendoTreeListSaveCommand],\n        [kendoTreeListCancelCommand]\n    ", inputs: ["kendoTreeListFocusable", "enabled", "kendoTreeListAddCommand", "kendoTreeListEditCommand", "kendoTreeListRemoveCommand", "kendoTreeListSaveCommand", "kendoTreeListCancelCommand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PagerPageSizesComponent, decorators: [{
             type: Component,
             args: [{
@@ -13691,7 +14055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", 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", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel" }, usesInheritance: true, ngImport: i0 });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { groupPanelEmpty: "groupPanelEmpty", noRecords: "noRecords", pagerLabel: "pagerLabel", pagerFirstPage: "pagerFirstPage", pagerLastPage: "pagerLastPage", pagerPreviousPage: "pagerPreviousPage", pagerNextPage: "pagerNextPage", pagerPage: "pagerPage", pagerPageNumberInputTitle: "pagerPageNumberInputTitle", pagerItemsPerPage: "pagerItemsPerPage", pagerOf: "pagerOf", pagerItemsTotal: "pagerItemsTotal", selectPage: "selectPage", filter: "filter", 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", columnMenu: "columnMenu", columns: "columns", lock: "lock", unlock: "unlock", sortable: "sortable", sortAscending: "sortAscending", sortDescending: "sortDescending", sortedAscending: "sortedAscending", sortedDescending: "sortedDescending", sortedDefault: "sortedDefault", columnsApply: "columnsApply", columnsReset: "columnsReset", topToolbarLabel: "topToolbarLabel", bottomToolbarLabel: "bottomToolbarLabel", dragRowHandleLabel: "dragRowHandleLabel" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{}]
@@ -13803,6 +14167,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], bottomToolbarLabel: [{
                 type: Input
+            }], dragRowHandleLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -14117,15 +14483,14 @@ const isInEditedCell = (element, treelistElement) => closest(element, matchesCla
 /**
  * Represents the Kendo UI TreeList component for Angular.
  *
- * {% meta height:470 %}
- * {% embed_file data-binding/flat/app.component.ts preview %}
- * {% embed_file data-binding/flat/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist [kendoTreeListFlatBinding]="data" ...></kendo-treelist>
+ * ```
+ *
  */
 class TreeListComponent {
-    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx) {
+    constructor(supportService, wrapper, changeNotification, editService, filterService, pdfService, responsiveService, renderer, excelService, ngZone, scrollSyncService, domEvents, columnResizingService, changeDetectorRef, columnReorderService, columnInfoService, navigationService, sortService, scrollRequestService, expandStateService, optionChanges, selectionService, localization, ctx, rowReorderService) {
         this.supportService = supportService;
         this.wrapper = wrapper;
         this.changeNotification = changeNotification;
@@ -14150,6 +14515,7 @@ class TreeListComponent {
         this.selectionService = selectionService;
         this.localization = localization;
         this.ctx = ctx;
+        this.rowReorderService = rowReorderService;
         /**
          * Defines the page size used by the TreeList when [paging]({% slug paging_treelist %}) is enabled.
          *
@@ -14158,10 +14524,7 @@ class TreeListComponent {
         this.pageSize = 10;
         /**
          * Defines the scroll mode used by the TreeList.
-         *
-         * The available options are:
-         *  - `none`&mdash;Renders no scrollbar.
-         *  - `scrollable`&mdash;The default scroll mode. It requires the setting of the `height` option.
+         * @default 'scrollable'
          */
         this.scrollable = 'scrollable';
         /**
@@ -14169,49 +14532,12 @@ class TreeListComponent {
          *
          * By default, the TreeList tracks changes by the index of the data item.
          * Edited rows are tracked by reference.
-         * In some cases, you might need to override the default behavior,
-         * for example, when you implement editing with immutable data items.
-         *
-         * The following example demonstrates how to track items only by index.
-         *
-         * @example
-         * ```ts
-         * import { Component } from '@angular/core';
-         * import { TreeListItem } from '@progress/kendo-angular-treelist';
-         *
-         * _@Component({
-         *    selector: 'my-app',
-         *    template: `
-         *        <kendo-treelist [data]="treelistData" [trackBy]="trackBy">
-         *        </kendo-treelist>
-         *    `
-         * })
-         * class AppComponent {
-         *    public treelistData: any[] = products;
          *
-         *    public trackBy(index: number, item: TreeListItem): any {
-         *        console.log(item);
-         *        return index;
-         *    }
-         * }
-         *
-         * const products = [{
-         *    "ProductID": 1,
-         *    "ProductName": "Chai",
-         *    "UnitPrice": 18.0000,
-         *    "Discontinued": true
-         *  }, {
-         *    "ProductID": 2,
-         *    "ProductName": "Chang",
-         *    "UnitPrice": 19.0000,
-         *    "Discontinued": false
-         *  }
-         * ];
-         * ```
          */
         this.trackBy = defaultTrackBy;
         /**
          * If set to `true`, the treelist will render only the columns in the current viewport.
+         * @default false
          */
         this.virtualColumns = false;
         /**
@@ -14225,18 +14551,12 @@ class TreeListComponent {
         /**
          * Configures the pager of the TreeList ([see example]({% slug paging_treelist %})).
          *
-         * The available options are:
-         * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed. Defaults to `10`.
-         * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records. Defaults to `true`.
-         * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. Defaults to `'numeric'`.
-         * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size. Defaults to `false`.
-         * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons. Defaults to `true`.
-         * - `responsive: Boolean`&mdash;Toggles the built-in responsive behavior of the Pager. Defaults to `true`.
          */
         this.pageable = false;
         /**
          * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
          * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.
+         * @default false
          */
         this.navigable = false;
         /**
@@ -14245,6 +14565,8 @@ class TreeListComponent {
          * Columns with `autoSize` set to `false` are excluded.
          * To dynamically update the column width to match the new content,
          * refer to [this example]({% slug resizing_columns_treelist %}).
+         *
+         * @default false
          */
         this.autoSize = false;
         /**
@@ -14276,7 +14598,9 @@ class TreeListComponent {
         /**
          * Specifies if the header of the treelist will be hidden. The header is visible by default.
          *
-         * > The header includes column headers and the [filter row]({% slug filtering_treelist %}#toc-filter-row).
+         * The header includes column headers and the [filter row]({% slug filtering_treelist %}#toc-filter-row).
+         *
+         * @default false
          */
         this.hideHeader = false;
         /**
@@ -14385,6 +14709,11 @@ class TreeListComponent {
          * Used by the expand directive and the Gantt component.
          */
         this.expandStateChange = new EventEmitter();
+        /**
+         * Fires when the user drops the dragged row and reordering is performed.
+         * Emits the [RowReorderEvent]({% slug api_treelist_rowreorderevent %}).
+         */
+        this.rowReorder = new EventEmitter();
         /**
          * @hidden
          */
@@ -14414,6 +14743,11 @@ class TreeListComponent {
         this._sort = new Array();
         this._skip = 0;
         this.cachedWindowWidth = 0;
+        this._rowReorderable = false;
+        /**
+         * @hidden
+         */
+        this.treeListData = () => { return this.view; };
         this._rowClass = () => null;
         validatePackage(packageMetadata);
         this.subscriptions.add(localization.changes.subscribe(({ rtl }) => {
@@ -14476,6 +14810,11 @@ class TreeListComponent {
                 this.view.clear();
                 this.expandStateChange.emit(args);
             }
+            if (this.rowReorderable) {
+                this.ngZone.onStable.pipe(take(2)).subscribe(() => {
+                    this.notifyReorderContainers();
+                });
+            }
         }));
         this.subscriptions.add(this.view.childrenLoaded.subscribe(() => {
             this.changeDetectorRef.detectChanges();
@@ -14581,48 +14920,6 @@ class TreeListComponent {
     /**
      * Defines a function that is executed for every data row in the component.
      *
-     * @example
-     * ```ts
-     * import { Component, ViewEncapsulation } from '@angular/core';
-     * import { RowClassArgs } from '@progress/kendo-angular-treelist';
-     *
-     * _@Component({
-     *    selector: 'my-app',
-     *    encapsulation: ViewEncapsulation.None,
-     *    styles: [`
-     *        .k-treelist tr.even { background-color: #f45c42; }
-     *        .k-treelist tr.odd { background-color: #41f4df; }
-     *    `],
-     *    template: `
-     *        <kendo-treelist [data]="treelistData" [rowClass]="rowCallback">
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     *
-     *    public rowCallback(context: RowClassArgs) {
-     *        const isEven = context.index % 2 === 0;
-     *        return {
-     *            even: isEven,
-     *            odd: !isEven
-     *        };
-     *    }
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     set rowClass(fn) {
         if (typeof fn !== 'function') {
@@ -14666,7 +14963,7 @@ class TreeListComponent {
         this.selectionService.settings = value;
     }
     /**
-     * Provides a callback that determines if the given row / cell is selected.
+     * Provides a callback that determines if the given row or cell is selected.
      */
     set isSelected(value) {
         if (typeof value !== 'function' && isDevMode()) {
@@ -14674,6 +14971,27 @@ class TreeListComponent {
         }
         this.selectionService.isSelected = value;
     }
+    /**
+     * Enables the [row reordering]({% slug treelist_row_reordering %}) of the TreeList.
+     * @default false
+     */
+    set rowReorderable(value) {
+        var _a;
+        this._rowReorderable = value;
+        if (value) {
+            this.rowReorderSubscription = this.rowReorderService.rowReorder.subscribe(args => {
+                hasObservers(this.rowReorder) && this.ngZone.run(() => {
+                    this.rowReorder.emit(args);
+                });
+            });
+        }
+        else {
+            (_a = this.rowReorderSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        }
+    }
+    get rowReorderable() {
+        return this._rowReorderable;
+    }
     /**
      * @hidden
      */
@@ -14935,6 +15253,30 @@ class TreeListComponent {
         this.ngZone = null;
         clearTimeout(this.pageChangeTimeout);
     }
+    /**
+     * @hidden
+     */
+    handleReorderEvents(ev, evType) {
+        this.rowReorderService[evType](ev);
+    }
+    /**
+     * @hidden
+     */
+    getDefaultSelectors(type) {
+        return this.rowReorderService.defaultSelectors[type];
+    }
+    /**
+     * @hidden
+     */
+    getHintSettings(setting) {
+        return this.rowReorderService[setting];
+    }
+    /**
+     * @hidden
+     */
+    get hintText() {
+        return this.rowReorderService.getDefaultHintText(this.columnList, this.view);
+    }
     /**
      * @hidden
      */
@@ -15076,7 +15418,7 @@ class TreeListComponent {
      * Exports the TreeList element to a Drawing [`Group`]({% slug api_kendo-drawing_group %}) by using the `kendo-treelist-pdf` component options.
      * ([see example]({% slug pdfexport_treelist %}#toc-exporting-multiple-treelists-to-the-same-pdf)).
      *
-     * @return {Promise} - A promise that will be resolved with the Drawing `Group`.
+     * @return {Promise} A promise that will be resolved with the Drawing `Group`.
      */
     drawPDF() {
         const promise = createPromise();
@@ -15094,64 +15436,8 @@ class TreeListComponent {
      * so that the whole text fits without wrapping. This method expects the TreeList
      * to be resizable (set `resizable` to `true`).
      * Makes sense to execute this method only
-     * after the TreeList is already populated with data.
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist
-     *            #treelist
-     *            [data]="treelistData"
-     *            [resizable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button kendoButton (click)="treelist.autoFitColumn(groupColumn)">
-     *                     Auto-fit the group column
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-treelist-column-group #groupColumn title="Product Info">
-     *                <kendo-treelist-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    [minResizableWidth]="30"
-     *                    title="ID">
-     *                </kendo-treelist-column>
-     *
-     *                <kendo-treelist-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-treelist-column>
-     *            </kendo-treelist-column-group>
-     *
-     *            <kendo-treelist-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                filter="numeric"
-     *                format="{0:c}">
-     *            </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
+     * after the TreeList is already populated with data. [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
      *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     autoFitColumn(column) {
         this.columnResizingService.autoFit(column);
@@ -15161,69 +15447,7 @@ class TreeListComponent {
      * If no columns are specified, `autoFitColumns` is applied to all columns.
      *
      * This method requires the TreeList to be resizable (set `resizable` to `true`).
-     *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *      <kendo-treelist
-     *          #treelist
-     *          [data]="treelistData"
-     *          [resizable]="true"
-     *          style="height: 300px">
-     *          <ng-template kendoTreeListToolbarTemplate>
-     *              <button kendoButton (click)="treelist.autoFitColumns([firstColumn, lastColumn])">
-     *                  Auto-fit the first and last column
-     *              </button>
-     *              <button kendoButton (click)="treelist.autoFitColumns()">
-     *                  Auto-fit all columns
-     *              </button>
-     *          </ng-template>
-     *          <kendo-treelist-column-group title="Product Info">
-     *              <kendo-treelist-column
-     *                  #firstColumn
-     *                  field="ProductID"
-     *                  [width]="50"
-     *                  [minResizableWidth]="30"
-     *                  title="ID">
-     *              </kendo-treelist-column>
-     *
-     *              <kendo-treelist-column
-     *                  field="ProductName"
-     *                  title="Product Name"
-     *                  >
-     *              </kendo-treelist-column>
-     *          </kendo-treelist-column-group>
-     *
-     *          <kendo-treelist-column
-     *              #lastColumn
-     *              field="UnitPrice"
-     *              title="Unit Price"
-     *              [width]="180"
-     *              filter="numeric"
-     *              format="{0:c}">
-     *          </kendo-treelist-column>
-     *      </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
+     * [See example](slug:resizing_columns_treelist#toc-auto-fitting-the-content).
      */
     autoFitColumns(columns = this.columns) {
         let cols;
@@ -15296,9 +15520,9 @@ class TreeListComponent {
     /**
      * Focuses the cell with the specified row and column index.
      *
-     * The row index is based on the logical structure of the TreeList and does not correspond to the data item index:
-     * * Header rows are included, starting at index 0.
-     * * The row indexing is absolute and does not change with paging.
+     * The row index is based on the logical structure of the TreeList and does not correspond to the data item index.
+     * The row indexing is absolute and does not change with paging.
+     * Header rows are included, starting at index 0.
      *
      * If the TreeList is configured for scrolling, including virtual scrolling, the scroll position will be updated.
      * If the row is not present on the current page, the method will have no effect.
@@ -15349,67 +15573,6 @@ class TreeListComponent {
      * @param {number} destIndex - The new position of the column.
      * @param {ColumnReorderConfig} options - Additional options.
      *
-     * @example
-     * ```ts
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <kendo-treelist
-     *            #treelist
-     *            [data]="treelistData"
-     *            [reorderable]="true"
-     *            style="height: 300px">
-     *            <ng-template kendoTreeListToolbarTemplate>
-     *                 <button kendoButton
-     *                     (click)="treelist.reorderColumn(groupColumn, 2, { before: true })">
-     *                     Move the group column before the last one.
-     *                 </button>
-     *            </ng-template>
-     *            <kendo-treelist-column-group #groupColumn title="Product Info">
-     *                <kendo-treelist-column
-     *                    field="ProductID"
-     *                    [width]="50"
-     *                    title="ID">
-     *                </kendo-treelist-column>
-     *
-     *                <kendo-treelist-column
-     *                    field="ProductName"
-     *                    title="Product Name">
-     *                </kendo-treelist-column>
-     *            </kendo-treelist-column-group>
-     *
-     *            <kendo-treelist-column
-     *                field="UnitPrice"
-     *                title="Unit Price"
-     *                [width]="180"
-     *                format="{0:c}">
-     *            </kendo-treelist-column>
-     *
-     *            <kendo-treelist-column
-     *                field="Discontinued"
-     *                title="Discontinued"
-     *                [width]="100">
-     *            </kendo-treelist-column>
-     *        </kendo-treelist>
-     *    `
-     * })
-     * class AppComponent {
-     *    public treelistData: any[] = products;
-     * }
-     *
-     * const products = [{
-     *    "ProductID": 1,
-     *    "ProductName": "Chai",
-     *    "UnitPrice": 18.0000,
-     *    "Discontinued": true
-     *  }, {
-     *    "ProductID": 2,
-     *    "ProductName": "Chang",
-     *    "UnitPrice": 19.0000,
-     *    "Discontinued": false
-     *  }
-     * ];
-     * ```
      */
     reorderColumn(source, destIndex, options = { before: false }) {
         const columnsForLevel = sortColumns(this.allColumnsForLevel(source.level));
@@ -15626,6 +15789,7 @@ class TreeListComponent {
             this.closeCell();
             this.cancelCell();
             this.dataStateChange.emit(x);
+            this.rowReorderable && this.notifyReorderContainers();
         }));
     }
     attachEditHandlers() {
@@ -15890,9 +16054,14 @@ class TreeListComponent {
         this.columns.reset(columns.toArray());
         this.columns.notifyOnChanges();
     }
+    notifyReorderContainers() {
+        var _a, _b;
+        (_a = this.dragTargetContainer) === null || _a === void 0 ? void 0 : _a.notify();
+        (_b = this.dropTargetContainer) === null || _b === void 0 ? void 0 : _b.notify();
+    }
 }
-TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, deps: [{ token: BrowserSupportService }, { token: i0.ElementRef }, { token: ChangeNotificationService }, { 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: ExpandStateService }, { token: OptionChangesService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", 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", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
+TreeListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, deps: [{ token: BrowserSupportService }, { token: i0.ElementRef }, { token: ChangeNotificationService }, { 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: ExpandStateService }, { token: OptionChangesService }, { token: SelectionService }, { token: i1$1.LocalizationService }, { token: ContextService }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Component });
+TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeListComponent, selector: "kendo-treelist", inputs: { ariaLabel: ["aria-label", "ariaLabel"], data: "data", pageSize: "pageSize", height: "height", rowHeight: "rowHeight", skip: "skip", scrollable: "scrollable", sort: "sort", trackBy: "trackBy", filter: "filter", virtualColumns: "virtualColumns", filterable: "filterable", sortable: "sortable", pageable: "pageable", navigable: "navigable", navigatable: "navigatable", autoSize: "autoSize", rowClass: "rowClass", resizable: "resizable", reorderable: "reorderable", loading: "loading", columnMenu: "columnMenu", hideHeader: "hideHeader", idField: "idField", selectable: "selectable", isSelected: "isSelected", rowReorderable: "rowReorderable", columnsRef: ["columns", "columnsRef"], fetchChildren: "fetchChildren", hasChildren: "hasChildren", isExpanded: "isExpanded" }, outputs: { selectionChange: "selectionChange", filterChange: "filterChange", pageChange: "pageChange", sortChange: "sortChange", dataStateChange: "dataStateChange", 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", scrollBottom: "scrollBottom", contentScroll: "contentScroll", expandEvent: "expand", collapseEvent: "collapse", expandStateChange: "expandStateChange", rowReorder: "rowReorder" }, host: { properties: { "attr.dir": "this.dir", "class.k-grid": "this.hostClasses", "class.k-grid-md": "this.hostClasses", "class.k-treelist": "this.hostClasses", "class.k-grid-lockedcolumns": "this.lockedClasses", "class.k-grid-virtual": "this.virtualClasses", "class.k-grid-no-scrollbar": "this.noScrollbarClass" } }, providers: [
         BrowserSupportService,
         LocalizationService,
         ColumnInfoService,
@@ -15933,8 +16102,9 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: ExpandableTreeComponent,
             useExisting: forwardRef(() => TreeListComponent)
         },
-        ContextService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { 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: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
+        ContextService,
+        RowReorderService
+    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { 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: ["kendoTreeList"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTreeListLocalizedMessages
 
             i18n-noRecords="kendo.treelist.noRecords|The label visible in the TreeList when there are no records"
@@ -16095,6 +16265,8 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
             i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
+            i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
+            dragRowHandleLabel="Drag row"
          >
         </ng-container>
         <kendo-treelist-toolbar
@@ -16112,7 +16284,24 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel">
+            [attr.aria-label]="ariaLabel"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="treeListData">
             <ng-template [ngIf]="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
@@ -16199,14 +16388,14 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                     [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
                     (scrollBottom)="notifyScrollBottom()"
-                    (contentScroll)="contentScroll.emit($event)"   
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoTreeListSelectionMarquee
                     [enableDrag]="marqueeSelection">
                 </kendo-treelist-list>
             </ng-template>
             <ng-template [ngIf]="!isScrollable">
-                <table 
+                <table
                     class="k-table k-table-md k-grid-header-table"
                     [style.table-layout]="resizable ? 'fixed' : null">
                     <colgroup kendoTreeListColGroup
@@ -16264,7 +16453,16 @@ TreeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId">
         </kendo-treelist-toolbar>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+        <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-treelist-toolbar", inputs: ["position", "navigable"] }, { type: ColGroupComponent, selector: "[kendoTreeListColGroup]", inputs: ["columns"] }, { type: HeaderComponent, selector: "[kendoTreeListHeader]", inputs: ["totalColumnLevels", "columns", "scrollable", "filterable", "sort", "filter", "sortable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount"] }, { type: ListComponent, selector: "kendo-treelist-list", inputs: ["view", "total", "rowHeight", "take", "skip", "columns", "noRecordsTemplate", "filterable", "rowClass", "loading", "trackBy", "virtualColumns", "isVirtual", "expandIcons"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: TableBodyComponent, selector: "[kendoTreeListTableBody]", inputs: ["columns", "allColumns", "noRecordsTemplate", "view", "skip", "filterable", "noRecordsText", "isLocked", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "expandIcons", "trackBy", "rowClass"] }, { type: LoadingComponent, selector: "[kendoTreeListLoading]" }, { type: PagerComponent, selector: "kendo-treelist-pager", inputs: ["allCount", "total", "skip", "navigable", "pageSize", "options", "template"], outputs: ["pageChange"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoTreeListLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i32.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i32.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: ResizableContainerDirective, selector: "[kendoTreeListResizableContainer]", inputs: ["lockedWidth", "kendoTreeListResizableContainer"] }, { type: i1$3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: MarqueeDirective, selector: "[kendoTreeListSelectionMarquee]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -16312,7 +16510,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             provide: ExpandableTreeComponent,
                             useExisting: forwardRef(() => TreeListComponent)
                         },
-                        ContextService
+                        ContextService,
+                        RowReorderService
                     ],
                     selector: 'kendo-treelist',
                     template: `
@@ -16476,6 +16675,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-bottomToolbarLabel="kendo.treelist.bottomToolbarLabel|The label of the TreeList bottom toolbar"
             bottomToolbarLabel="Bottom toolbar"
+            i18n-dragRowHandleLabel="kendo.treelist.dragRowHandleLabel|The label for the TreeList drag row handle"
+            dragRowHandleLabel="Drag row"
          >
         </ng-container>
         <kendo-treelist-toolbar
@@ -16493,7 +16694,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-rowcount]="ariaRowCount"
             [attr.aria-colcount]="ariaColCount"
             [attr.aria-multiselectable]="ariaMultiselectable"
-            [attr.aria-label]="ariaLabel">
+            [attr.aria-label]="ariaLabel"
+            kendoDragTargetContainer
+            kendoDropTargetContainer
+            mode="manual"
+            [dragDisabled]="!rowReorderable"
+            [dropDisabled]="!rowReorderable"
+            [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+            [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+            [dragHandle]="getDefaultSelectors('handle')"
+            [hint]="{hintTemplate: defaultHint}"
+            (onPress)="handleReorderEvents($event, 'press')"
+            (onDragStart)="handleReorderEvents($event, 'dragStart')"
+            (onDrag)="handleReorderEvents($event, 'drag')"
+            (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+            (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+            (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+            (onDrop)="handleReorderEvents($event, 'drop')"
+            [dragData]="treeListData">
             <ng-template [ngIf]="isScrollable">
                 <div *ngIf="!hideHeader"
                     class="k-grid-header"
@@ -16580,14 +16798,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [virtualColumns]="virtualColumns"
                     [expandIcons]="expandIcons"
                     (scrollBottom)="notifyScrollBottom()"
-                    (contentScroll)="contentScroll.emit($event)"   
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoTreeListSelectionMarquee
                     [enableDrag]="marqueeSelection">
                 </kendo-treelist-list>
             </ng-template>
             <ng-template [ngIf]="!isScrollable">
-                <table 
+                <table
                     class="k-table k-table-md k-grid-header-table"
                     [style.table-layout]="resizable ? 'fixed' : null">
                     <colgroup kendoTreeListColGroup
@@ -16645,9 +16863,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-label]="messageFor('bottomToolbarLabel')"
             [attr.aria-controls]="ariaRootId">
         </kendo-treelist-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: i0.ElementRef }, { type: ChangeNotificationService }, { 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: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }]; }, propDecorators: { ariaLabel: [{
+        }], ctorParameters: function () { return [{ type: BrowserSupportService }, { type: i0.ElementRef }, { type: ChangeNotificationService }, { 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: ExpandStateService }, { type: OptionChangesService }, { type: SelectionService }, { type: i1$1.LocalizationService }, { type: ContextService }, { type: RowReorderService }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], data: [{
@@ -16700,6 +16927,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isSelected: [{
                 type: Input
+            }], rowReorderable: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], filterChange: [{
@@ -16748,6 +16977,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['collapse']
             }], expandStateChange: [{
                 type: Output
+            }], rowReorder: [{
+                type: Output
             }], columnsRef: [{
                 type: Input,
                 args: ['columns']
@@ -16799,6 +17030,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]
             }], fetchChildren: [{
                 type: Input
             }], hasChildren: [{
@@ -16809,7 +17046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Custom component messages override default component messages
- * ([see example]({% slug globalization_treelist %}#toc-localization)).
+ * ([see example](slug:globalization_treelist#toc-custom-messages)).
  */
 class CustomMessagesComponent extends Messages {
     constructor(service) {
@@ -16925,7 +17162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 /**
- * Represents the checkbox for selecting rows in the TreeList.
+ * Represents the checkbox for selecting rows in the TreeList. [See example](slug:selection_treelist#toc-select-all-checkbox).
  */
 class CheckboxColumnComponent extends ColumnBase {
     constructor(parent) {
@@ -16978,6 +17215,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: [CellTemplateDirective, { static: false }]
             }] } });
 
+/**
+ * Represents the drag handle for reordering rows in the TreeList.
+ */
+class RowReorderColumnComponent extends ColumnBase {
+    constructor(parent) {
+        super(parent);
+        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 }], target: i0.ɵɵFactoryTarget.Component });
+RowReorderColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RowReorderColumnComponent, selector: "kendo-treelist-rowreorder-column", 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-treelist-rowreorder-column',
+                    template: ``
+                }]
+        }], ctorParameters: function () {
+        return [{ type: ColumnBase, decorators: [{
+                        type: SkipSelf
+                    }, {
+                        type: Host
+                    }, {
+                        type: Optional
+                    }] }];
+    } });
+
 const exportedModules$3 = [
     ColumnComponent,
     ColumnGroupComponent,
@@ -16991,7 +17270,8 @@ const exportedModules$3 = [
     SpanColumnComponent,
     TableDirective,
     LoadingComponent,
-    CheckboxColumnComponent
+    CheckboxColumnComponent,
+    RowReorderColumnComponent
 ];
 /**
  * @hidden
@@ -17002,6 +17282,7 @@ class SharedModule {
             ColumnComponent,
             SpanColumnComponent,
             CheckboxColumnComponent,
+            RowReorderColumnComponent,
             ColumnGroupComponent,
             FocusableDirective
         ];
@@ -17020,7 +17301,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
+        CheckboxColumnComponent,
+        RowReorderColumnComponent], imports: [CommonModule, IconsModule], exports: [ColumnComponent,
         ColumnGroupComponent,
         LogicalCellDirective,
         LogicalRowDirective,
@@ -17032,7 +17314,8 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         SpanColumnComponent,
         TableDirective,
         LoadingComponent,
-        CheckboxColumnComponent, DraggableModule, IconsModule] });
+        CheckboxColumnComponent,
+        RowReorderColumnComponent, DraggableModule, IconsModule] });
 SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, imports: [[CommonModule, IconsModule], DraggableModule, IconsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -17045,10 +17328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `Contains` (**Contains**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class ContainsFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("contains", localization); }
@@ -17076,10 +17356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `DoesNotContain` (**Does not contain**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class DoesNotContainFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("doesnotcontain", localization); }
@@ -17107,10 +17384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `EndsWith` (**Ends with**) string filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class EndsWithFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("endswith", localization); }
@@ -17138,10 +17412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `Equal` (**Is equal to**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class EqualFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("eq", localization); }
@@ -17169,10 +17440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `IsEmpty` (**Is empty**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class IsEmptyFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isempty", localization); }
@@ -17200,10 +17468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `IsNotEmpty` (**Is not empty**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class IsNotEmptyFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnotempty", localization); }
@@ -17231,10 +17496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `IsNotNull` (**Is not null**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class IsNotNullFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnotnull", localization); }
@@ -17262,10 +17524,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `IsNull` (**Is null**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class IsNullFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("isnull", localization); }
@@ -17293,10 +17552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `NotEqual` (**Is not equal to**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class NotEqualFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("neq", localization); }
@@ -17324,10 +17580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `StartsWith` (**Starts with**) filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class StartsWithFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("startswith", localization); }
@@ -17355,10 +17608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /*
  * Represents the `Greater` (**Is greater than**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class GreaterFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("gt", localization); }
@@ -17386,10 +17636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the `GreaterOrEqualTo` (**Is greater than or equal to**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class GreaterOrEqualToFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("gte", localization); }
@@ -17415,12 +17662,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/*
+/**
  * Represents the `Less` (**Is less than**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class LessFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("lt", localization); }
@@ -17448,10 +17692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /*
  * Represents the `LessOrEqualTo` (**Is less than or equal to**) numeric filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class LessOrEqualToFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("lte", localization); }
@@ -17477,12 +17718,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/*
+/**
  * Represents the `Greater` (**Is after**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class AfterFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after", localization); }
@@ -17517,12 +17755,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/*
+/**
  * Represents the `GreaterOrEqualTo` (**Is after or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class AfterEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("after-eq", localization); }
@@ -17557,12 +17792,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/*
+/**
  * Represents the `LessOrEqualTo` (**Is before or equal to**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class BeforeEqFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before-eq", localization); }
@@ -17597,12 +17829,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
-/*
- * Represents the `Less then` (**Is before**) date filter operator.
- *
- * For more information and examples, refer to:
- * * [Setting the default filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-default-filter-operator)
- * * [Setting the order of the filter operators]({% slug builtinfiltertemplate_treelist %}#toc-setting-the-order-of-the-filter-operators)
+/**
+ * Represents the `Less than` (**Is before**) date filter operator.
+ * [See example](slug:builtinfiltertemplate_treelist#toc-setting-the-order-of-the-filter-operators).
  */
 class BeforeFilterOperatorComponent extends FilterOperatorBase {
     constructor(localization) { super("before", localization); }
@@ -17992,12 +18221,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
  * add the component inside a [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
  *
- * {% meta height:500 %}
- * {% embed_file column-menu/chooser-toolbar/app.component.ts preview %}
- * {% embed_file column-menu/chooser-toolbar/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% embed_file shared/employees.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <ng-template kendoTreeListToolbarTemplate>
+ *     <kendo-treelist-column-chooser> </kendo-treelist-column-chooser>
+ *   </ng-template>
+ * </kendo-treelist>
+ * ```
  */
 class ColumnChooserComponent {
     constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
@@ -18009,10 +18240,12 @@ class ColumnChooserComponent {
         this.changeDetector = changeDetector;
         /**
          * Specifies if the changes in the visibility of the column will be immediately applied.
+         * @default false
          */
         this.autoSync = false;
         /**
          * Specifies if all columns can be hidden.
+         * @default true
          */
         this.allowHideAll = true;
         this.columnsIcon = columnsIcon;
@@ -18103,7 +18336,7 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4$2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -18243,30 +18476,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /**
  * Represents the command columns of the TreeList. You have to define the content of the
- * column inside an `<ng-template>` tag. The template context is set to the current
- * data item. For more information and examples on using the passed fields
+ * column inside an `<ng-template>` tag. For more information and examples on using the passed fields
  * and the command directives, refer to the article on
  * [editing the TreeList in Angular Reactive Forms]({% slug editing_reactive_forms_treelist %}).
  *
- * The following additional fields are passed:
- * - `columnIndex`&mdash;The current column index.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex`is `-1`.
- * - `dataItem`&mdash;The current data item.
- * - `column`&mdash;The current column instance.
- * - `isNew`&mdash;The state of the current item.
- *
  * Usually, the template contains CRUD command directives such as:
  * - [`EditCommandDirective`]({% slug api_treelist_editcommanddirective %})
  * - [`RemoveCommandDirective`]({% slug api_treelist_removecommanddirective %})
  * - [`CancelCommandDirective`]({% slug api_treelist_cancelcommanddirective %})
  * - [`SaveCommandDirective`]({% slug api_treelist_savecommanddirective %})
  *
- * {% meta height:590 %}
- * {% embed_file editing/editing-directives/reactive-editing/app.component.ts preview %}
- * {% embed_file shared/employees.ts %}
- * {% embed_file editing/editing-directives/reactive-editing/app.module.ts %}
- * {% embed_file shared/main.ts %}
- * {% endmeta %}
+ * @example
+ * ```html
+ * <kendo-treelist ...>
+ *   <kendo-treelist-column field="ProductID"></kendo-treelist-column>
+ *   <kendo-treelist-command-column title="command" >
+ *      <ng-template kendoTreeListCellTemplate>
+ *         <button kendoTreeListEditCommand class="k-primary">Edit</button>
+ *         <button kendoTreeListRemoveCommand>Remove</button>
+ *      </ng-template>
+ *   </kendo-treelist-command-column>
+ * </kendo-treelist>
+ * ```
  */
 class CommandColumnComponent extends ColumnBase {
     constructor(parent, optionChanges) {
@@ -18354,7 +18585,7 @@ BaseCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18392,7 +18623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>
@@ -18426,7 +18657,7 @@ EditCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18464,7 +18695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListCancelCommand]="cellContext">Cancel changes</button>
@@ -18498,7 +18729,7 @@ CancelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CancelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18536,7 +18767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListSaveCommand]="cellContext">Save changes</button>
@@ -18569,7 +18800,7 @@ SaveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18607,7 +18838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListRemoveCommand]="cellContext">Remove row</button>
@@ -18640,7 +18871,7 @@ RemoveCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RemoveCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -18681,7 +18912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListAddCommand]="cellContext" class="k-primary">Edit</button>
@@ -18712,7 +18943,7 @@ AddCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AddCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -19213,8 +19444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }] } });
 
 class BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.state = {};
         this.cache = new Map();
         this.originalData = [];
@@ -19247,6 +19479,8 @@ class BaseBindingDirective {
         this.applyState(this.state);
         this.subscriptions.add(this.component.dataStateChange
             .subscribe(this.onStateChange.bind(this)));
+        this.component.rowReorderable && this.subscriptions.add(this.rowReorderService.rowReorder
+            .subscribe(this.onRowReorder.bind(this)));
     }
     /**
      * @hidden
@@ -19287,6 +19521,7 @@ class BaseBindingDirective {
         this.cache.clear();
         this.component.data = this.fetchChildren();
     }
+    onRowReorder(_event) { }
     applyState({ sort, filter }) {
         this.sort = sort;
         this.filter = filter;
@@ -19355,12 +19590,12 @@ class BaseBindingDirective {
         this.dataChanged = true;
     }
 }
-BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService }], target: i0.ɵɵFactoryTarget.Directive });
 BaseBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaseBindingDirective, inputs: { sort: "sort", filter: "filter", aggregate: "aggregate" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, decorators: [{
             type: Directive,
             args: [{}]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { sort: [{
+        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }, { type: RowReorderService }]; }, propDecorators: { sort: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -19410,6 +19645,53 @@ class HierarchyEditService extends LocalEditService {
     }
 }
 
+/**
+ * @hidden
+ */
+class HierarchicalRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasChildren = isPresent(draggedItem[this.childrenField]) && draggedItem[this.childrenField].length > 0;
+        if (!hasChildren) {
+            return false;
+        }
+        if (targetItem && draggedItem.hasOwnProperty(this.childrenField)) {
+            if (draggedItem[this.childrenField].includes(targetItem)) {
+                return true;
+            }
+            const parent = findParent$1(this.data, targetItem, this.childrenField);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+        return false;
+    }
+    reorderRows(ev, collection, field) {
+        const draggedItem = ev.draggedRows[0].dataItem;
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        const draggedItemParent = findParent$1(collection, draggedItem, field);
+        const dropTargetParent = findParent$1(collection, dropTargetItem, field);
+        const draggedItemIdx = draggedItemParent ? draggedItemParent[field].indexOf(draggedItem) : collection.indexOf(draggedItem);
+        let dropTargetItemIdx = dropTargetParent ? dropTargetParent[field].indexOf(dropTargetItem) : collection.indexOf(dropTargetItem);
+        if (ev.dropPosition === dropPosition.after && dropTargetItemIdx < draggedItemIdx) {
+            dropTargetItemIdx++;
+        }
+        draggedItemParent ? draggedItemParent[field].splice(draggedItemIdx, 1) : collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition !== dropPosition.over) {
+            dropTargetParent ? dropTargetParent[field].splice(dropTargetItemIdx, 0, draggedItem) : collection.splice(dropTargetItemIdx, 0, draggedItem);
+        }
+        else {
+            dropTargetItem[field].unshift(draggedItem);
+        }
+    }
+}
+HierarchicalRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+HierarchicalRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchicalRowReorderService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * A directive which binds the TreeList to a tree of objects.
  *
@@ -19418,12 +19700,16 @@ class HierarchyEditService extends LocalEditService {
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 class HierarchyBindingDirective extends BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         super(component);
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.childrenGetter = getter('items');
         this.childrenSetter = setter('items');
         component.localEditService = new HierarchyEditService(this);
+        if (this.rowReorderService) {
+            this.rowReorderService.bindingDirective = this;
+        }
     }
     /**
      *  The name of the field which holds the child data items of the node.
@@ -19431,23 +19717,58 @@ class HierarchyBindingDirective extends BaseBindingDirective {
     set childrenField(value) {
         this.childrenGetter = getter(value);
         this.childrenSetter = setter(value);
+        this._childrenField = value;
     }
+    get childrenField() {
+        return this._childrenField;
+    }
+    /**
+     * @hidden
+     */
     getChildren(item) {
         return item ? this.childrenGetter(item) || [] : this.originalData;
     }
     itemKey(item) {
         return item;
     }
+    onRowReorder(ev) {
+        if (ev.dropPosition === 'forbidden') {
+            return;
+        }
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        if (ev.dropPosition === 'over') {
+            if (!dropTargetItem.hasOwnProperty(this.childrenField)) {
+                dropTargetItem[this.childrenField] = [];
+            }
+        }
+        this.rowReorderService.reorderRows(ev, this.originalData, this.childrenField);
+        this.rebind();
+    }
 }
-HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: { childrenField: "childrenField", data: ["kendoTreeListHierarchyBinding", "data"] }, exportAs: ["kendoTreeListHierarchyBinding"], usesInheritance: true, ngImport: i0 });
+HierarchyBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+HierarchyBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HierarchyBindingDirective, selector: "[kendoTreeListHierarchyBinding]", inputs: { childrenField: "childrenField", data: ["kendoTreeListHierarchyBinding", "data"] }, providers: [
+        {
+            provide: RowReorderService,
+            useClass: HierarchicalRowReorderService
+        }
+    ], exportAs: ["kendoTreeListHierarchyBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoTreeListHierarchyBinding',
-                    selector: '[kendoTreeListHierarchyBinding]'
+                    selector: '[kendoTreeListHierarchyBinding]',
+                    providers: [
+                        {
+                            provide: RowReorderService,
+                            useClass: HierarchicalRowReorderService
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { childrenField: [{
+        }], ctorParameters: function () {
+        return [{ type: DataBoundTreeComponent }, { type: RowReorderService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { childrenField: [{
                 type: Input
             }], data: [{
                 type: Input,
@@ -19498,6 +19819,47 @@ class FlatEditService extends LocalEditService {
     }
 }
 
+/**
+ * @hidden
+ */
+class FlatRowReorderService extends RowReorderService {
+    isOverChild(targetItem) {
+        const { draggedRows } = this.rowReorderArgs(this.dragTarget, this.dropTarget, this.view);
+        const draggedItem = draggedRows[0].dataItem;
+        const hasParent = isPresent(targetItem[this.parentIdField]);
+        const sameParents = draggedItem[this.parentIdField] === targetItem[this.parentIdField];
+        if (!hasParent || sameParents) {
+            return false;
+        }
+        if (targetItem && targetItem.hasOwnProperty(this.parentIdField)) {
+            if (draggedItem[this.idField] === targetItem[this.parentIdField]) {
+                return true;
+            }
+            const parent = this.data.find(i => i[this.idField] === targetItem[this.parentIdField]);
+            if (parent) {
+                return this.isOverChild(parent);
+            }
+        }
+    }
+    reorderRows(ev, collection) {
+        const { draggedRows, dropTargetRow } = ev;
+        const draggedDataItem = draggedRows[0].dataItem;
+        const dropTargetDataItem = dropTargetRow.dataItem;
+        let dropTargetIdx = collection.indexOf(dropTargetDataItem);
+        const draggedItemIdx = collection.indexOf(draggedDataItem);
+        collection.splice(draggedItemIdx, 1);
+        if (ev.dropPosition === 'after' && dropTargetIdx < draggedItemIdx) {
+            dropTargetIdx++;
+        }
+        collection.splice(dropTargetIdx, 0, draggedDataItem);
+    }
+}
+FlatRowReorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+FlatRowReorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatRowReorderService, decorators: [{
+            type: Injectable
+        }] });
+
 const ROOT_ID = null;
 /**
  * A directive which binds the TreeList to an array of objects by using
@@ -19508,14 +19870,18 @@ const ROOT_ID = null;
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
  */
 class FlatBindingDirective extends BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         super(component);
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.idGetter = getter('id');
         this.idSetter = setter('id');
         this.parentIdGetter = getter('parentId');
         this.parentIdSetter = setter('parentId');
         component.localEditService = new FlatEditService(this);
+        if (this.rowReorderService) {
+            this.rowReorderService.bindingDirective = this;
+        }
     }
     /**
      * The name of the field which contains the identifier of the parent node.
@@ -19523,6 +19889,10 @@ class FlatBindingDirective extends BaseBindingDirective {
     set parentIdField(value) {
         this.parentIdGetter = getter(value);
         this.parentIdSetter = setter(value);
+        this._parentIdField = value;
+    }
+    get parentIdField() {
+        return this._parentIdField;
     }
     /**
      * The name of the field which contains the unique identifier of the node.
@@ -19530,7 +19900,14 @@ class FlatBindingDirective extends BaseBindingDirective {
     set idField(value) {
         this.idGetter = getter(value);
         this.idSetter = setter(value);
+        this._idField = value;
     }
+    get idField() {
+        return this._idField;
+    }
+    /**
+     * @hidden
+     */
     getChildren(item) {
         const id = this.itemKey(item);
         const children = id === ROOT_ID ?
@@ -19541,16 +19918,50 @@ class FlatBindingDirective extends BaseBindingDirective {
     itemKey(item) {
         return item ? this.idGetter(item) : ROOT_ID;
     }
+    onRowReorder(ev) {
+        if (ev.dropPosition === 'forbidden') {
+            return;
+        }
+        const draggedItem = ev.draggedRows[0].dataItem;
+        const dropTargetItem = ev.dropTargetRow.dataItem;
+        if (ev.dropPosition === 'over') {
+            const dropItemId = this.itemKey(dropTargetItem);
+            if (draggedItem[this.parentIdField] !== dropItemId) {
+                draggedItem[this.parentIdField] = dropItemId;
+            }
+        }
+        else {
+            const dropItemParentId = dropTargetItem[this.parentIdField];
+            draggedItem[this.parentIdField] = dropItemParentId;
+            this.rowReorderService.reorderRows(ev, this.originalData);
+        }
+        this.rebind();
+    }
 }
-FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, deps: [{ token: DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
-FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: { parentIdField: "parentIdField", idField: "idField", data: ["kendoTreeListFlatBinding", "data"] }, exportAs: ["kendoTreeListFlatBinding"], usesInheritance: true, ngImport: i0 });
+FlatBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, deps: [{ token: DataBoundTreeComponent }, { token: RowReorderService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FlatBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FlatBindingDirective, selector: "[kendoTreeListFlatBinding]", inputs: { parentIdField: "parentIdField", idField: "idField", data: ["kendoTreeListFlatBinding", "data"] }, providers: [
+        {
+            provide: RowReorderService,
+            useClass: FlatRowReorderService
+        }
+    ], exportAs: ["kendoTreeListFlatBinding"], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'kendoTreeListFlatBinding',
-                    selector: '[kendoTreeListFlatBinding]'
+                    selector: '[kendoTreeListFlatBinding]',
+                    providers: [
+                        {
+                            provide: RowReorderService,
+                            useClass: FlatRowReorderService
+                        }
+                    ]
                 }]
-        }], ctorParameters: function () { return [{ type: DataBoundTreeComponent }]; }, propDecorators: { parentIdField: [{
+        }], ctorParameters: function () {
+        return [{ type: DataBoundTreeComponent }, { type: RowReorderService, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { parentIdField: [{
                 type: Input
             }], idField: [{
                 type: Input
@@ -19841,7 +20252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Represents the Kendo UI TreeListSpacer component for Angular.
  * Used to give additional white space between the Pager inner elements,
  * and provides a way for customizing the spacer width.
- * It can also be used in any flex container within the TreeList.
+ * It can also be used in any flex container within the TreeList. [See example](slug:toolbartemplate_treelist#toc-define-spacing-between-the-toolbar-elements).
  */
 class TreeListSpacerComponent {
     constructor() {
@@ -19962,7 +20373,8 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         RowFilterModule,
         FilterMenuModule,
         ResizeSensorModule,
-        ColumnMenuModule], exports: [TreeListComponent,
+        ColumnMenuModule,
+        DragAndDropModule$1], exports: [TreeListComponent,
         ToolbarTemplateDirective,
         ToolbarComponent,
         TreeListSpacerComponent,
@@ -19974,7 +20386,7 @@ TreeListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FlatBindingDirective,
         ExpandableDirective,
         SelectableDirective,
-        TreeListToolbarFocusableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, 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, 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, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
+        TreeListToolbarFocusableDirective, ColumnComponent, SpanColumnComponent, CheckboxColumnComponent, RowReorderColumnComponent, ColumnGroupComponent, FocusableDirective, CommandColumnComponent, CellTemplateDirective, NoRecordsTemplateDirective, EditTemplateDirective, EditCommandDirective, CancelCommandDirective, SaveCommandDirective, RemoveCommandDirective, AddCommandDirective, FooterTemplateDirective, HeaderTemplateDirective, PagerComponent, PagerPrevButtonsComponent, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerInputComponent, PagerInfoComponent, PagerPageSizesComponent, PagerTemplateDirective, 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, 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, ColumnMenuChooserComponent, ColumnMenuTemplateDirective, ColumnMenuComponent] });
 TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, imports: [[
             CommonModule,
             SharedModule,
@@ -19984,7 +20396,8 @@ TreeListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             RowFilterModule,
             FilterMenuModule,
             ResizeSensorModule,
-            ColumnMenuModule
+            ColumnMenuModule,
+            DragAndDropModule$1
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeListModule, decorators: [{
             type: NgModule,
@@ -20000,11 +20413,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         RowFilterModule,
                         FilterMenuModule,
                         ResizeSensorModule,
-                        ColumnMenuModule
+                        ColumnMenuModule,
+                        DragAndDropModule$1
                     ]
                 }]
         }] });
 
+/**
+ * Represents the Kendo UI PDFMargin component for Angular.
+ * The supported units are:
+ * `"mm"`
+ * `"cm"`
+ * `"in"`
+ * `"pt"` (default).
+ * Numbers are considered to be points (`"pt"`).
+ */
 class PDFMarginComponent extends PDFExportMarginComponent {
 }
 PDFMarginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFMarginComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -20434,7 +20857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <ng-template kendoTreeListToolbarTemplate>
  *     <button kendoTreeListPDFCommand>Export to PDF</button>
  *   </ng-template>
@@ -20474,7 +20897,7 @@ PDFCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PDFCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -20775,7 +21198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <ng-template kendoTreeListToolbarTemplate>
  *     <button kendoTreeListExcelCommand>Export to PDF</button>
  *   </ng-template>
@@ -20815,7 +21238,7 @@ ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </span>
         <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
         <span class="k-button-text"><ng-content></ng-content></span>
-    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ExcelCommandDirective, decorators: [{
             type: Component,
             args: [{
@@ -20879,5 +21302,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };
+export { AddCommandDirective, AfterEqFilterOperatorComponent, AfterFilterOperatorComponent, AutoCompleteFilterCellComponent, BaseCommandDirective, BaseFilterCellComponent, BeforeEqFilterOperatorComponent, BeforeFilterOperatorComponent, BodyModule, BooleanFilterCellComponent, BooleanFilterComponent, BooleanFilterMenuComponent, CancelCommandDirective, CellCloseEvent, CellComponent, CellTemplateDirective, CheckboxColumnComponent, ColGroupComponent, ColumnBase, ColumnChooserComponent, ColumnComponent, ColumnGroupComponent, ColumnHandleDirective, ColumnInfoService, ColumnMenuChooserComponent, ColumnMenuComponent, ColumnMenuFilterComponent, ColumnMenuItemComponent, ColumnMenuItemContentTemplateDirective, ColumnMenuLockComponent, ColumnMenuSortComponent, ColumnMenuTemplateDirective, ColumnReorderEvent, ColumnVisibilityChangeEvent, ColumnsContainer, CommandColumnComponent, ContainsFilterOperatorComponent, CustomMessagesComponent, DataBoundTreeComponent, DateFilterCellComponent, DateFilterComponent, DateFilterMenuComponent, DateFilterMenuInputComponent, DoesNotContainFilterOperatorComponent, EditCommandDirective, EditTemplateDirective, EditingDirectiveBase, EndsWithFilterOperatorComponent, EqualFilterOperatorComponent, ExcelCommandDirective, ExcelComponent, ExcelExportEvent, ExcelModule, ExcelService, ExpandEvent, ExpandableDirective, ExpandableTreeComponent, FieldAccessorPipe, FilterCellComponent, FilterCellHostDirective, FilterCellOperatorsComponent, FilterCellTemplateDirective, FilterCellWrapperComponent, FilterInputDirective, FilterMenuComponent, FilterMenuContainerComponent, FilterMenuHostDirective, FilterMenuInputWrapperComponent, FilterMenuModule, FilterMenuTemplateDirective, FilterRowComponent, FilterService, FlatBindingDirective, FocusableDirective, FooterTemplateDirective, GreaterFilterOperatorComponent, GreaterOrEqualToFilterOperatorComponent, HeaderComponent, HeaderModule, HeaderTemplateDirective, HierarchyBindingDirective, InCellEditingDirective, IsEmptyFilterOperatorComponent, IsNotEmptyFilterOperatorComponent, IsNotNullFilterOperatorComponent, IsNullFilterOperatorComponent, LessFilterOperatorComponent, LessOrEqualToFilterOperatorComponent, LevelItemsPipe, ListComponent, LoadingComponent, LogicalCellDirective, LogicalRowDirective, NoRecordsTemplateDirective, NotEqualFilterOperatorComponent, NumericFilterCellComponent, NumericFilterMenuComponent, NumericFilterMenuInputComponent, PDFCommandDirective, PDFComponent, PDFMarginComponent, PDFModule, PDFService, PDFTemplateDirective, PagerComponent, PagerInfoComponent, PagerInputComponent, PagerModule, PagerNextButtonsComponent, PagerNumericButtonsComponent, PagerPageSizesComponent, PagerPrevButtonsComponent, PagerTemplateDirective, PopupCloseEvent, ReactiveEditingDirective, RemoveCommandDirective, ResizableContainerDirective, RowEditingDirectiveBase, RowFilterModule, RowReorderColumnComponent, SaveCommandDirective, SelectableDirective, SelectionChangeEvent, SharedFilterModule, SharedModule, SinglePopupService, Skip, SpanColumnComponent, StartsWithFilterOperatorComponent, StringFilterCellComponent, StringFilterMenuComponent, StringFilterMenuInputComponent, SuspendService, TableBodyComponent, TableDirective, TemplateContextDirective, TemplateEditingDirective, ToolbarComponent, ToolbarTemplateDirective, TreeListComponent, TreeListModule, TreeListSpacerComponent, TreeListToolbarFocusableDirective };