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

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

@@ -20,25 +20,15 @@ export declare function isSpanColumnComponent(column: any): column is SpanColumn
  * [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>
  * ```
  */
 export declare class SpanColumnComponent extends ColumnBase {
@@ -89,22 +79,8 @@ export declare 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: boolean);
     get editable(): boolean;
@@ -134,56 +110,9 @@ export declare class SpanColumnComponent extends ColumnBase {
     get colspan(): number;
     /**
      * 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: boolean);
     get locked(): boolean;

package/data/change-event-args.interface.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { SortDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
 /**
- * Arguments for the `pageChange` event.
+ * Arguments for the [`pageChange`](slug:api_treelist_treelistcomponent#toc-pagechange) event.
  */
 export interface PageChangeEvent {
     /**
@@ -17,7 +17,7 @@ export interface PageChangeEvent {
     take: number;
 }
 /**
- * Arguments for the `dataStateChange` event
+ * Arguments for the [`dataStateChange`](slug:api_treelist_treelistcomponent#toc-datastatechange) event
  * ([more information and examples]({% slug databinding_treelist %})).
  */
 export interface DataStateChangeEvent {

package/data/data.collection.d.ts

@@ -8,7 +8,13 @@ import { EventEmitter } from '@angular/core';
  * The data type that is expected by the TreeList.
  */
 export interface TreeListDataResult {
+    /**
+     * The data that will be rendered by the TreeList as an array.
+     */
     data: any[];
+    /**
+     * The aggregated values for the group. An [`AggregateResult`](slug:treelist_with_aggregates) instance.
+     */
     aggregates?: any;
 }
 /**

package/dragdrop/column-reorder-config.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Additional configuration for the `reorderColumn` method.
+ * Additional configuration for the [`reorderColumn`](slug:api_treelist_treelistcomponent#toc-reordercolumn) method.
  */
 export interface ColumnReorderConfig {
     /**

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

@@ -22,7 +22,7 @@ import * as i0 from "@angular/core";
  *
  * @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>

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

@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListCancelCommand]="cellContext">Cancel changes</button>

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

@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListEditCommand]="cellContext">Edit</button>

package/editing/edit-event-args.interface.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import type { TreeListComponent } from "../treelist.component";
 /**
- * Arguments for the `remove` event.
+ * Arguments for the [`edit`](slug:api_treelist_treelistcomponent#toc-edit) event.
  */
 export interface EditEvent {
     /**

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

@@ -16,6 +16,17 @@ import * as i0 from "@angular/core";
  * - `formGroup`—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`—The state of the current item.
  * - `rowIndex`—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>
+ * ```
  */
 export declare class EditTemplateDirective {
     templateRef: TemplateRef<any>;

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

@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListRemoveCommand]="cellContext">Remove row</button>

package/editing/remove-event-args.interface.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "./edit-event-args.interface";
 /**
- * Arguments for the `remove` event.
+ * Arguments for the [`remove`](slug:api_treelist_treelistcomponent#toc-remove) event.
  */
 export interface RemoveEvent extends EditEvent {
     /**

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

@@ -19,7 +19,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-command-column title="command">
  *     <ng-template kendoTreeListCellTemplate let-cellContext="cellContext">
  *       <button [kendoTreeListSaveCommand]="cellContext">Save changes</button>

package/editing/save-event-args.interface.d.ts

@@ -5,7 +5,7 @@
 import { EditEvent } from "./edit-event-args.interface";
 import { FormGroup } from "@angular/forms";
 /**
- * Arguments for the `save` event.
+ * Arguments for the [`save`](slug:api_treelist_treelistcomponent#toc-save) event.
  */
 export interface SaveEvent extends EditEvent {
     /**

package/esm2020/binding-directives/base-binding.directive.mjs

@@ -8,11 +8,14 @@ import { process, aggregateBy } from '@progress/kendo-data-query';
 import { isChanged } from '@progress/kendo-angular-common';
 import { DataBoundTreeComponent } from './data-bound-tree-component';
 import { anyChanged } from '../utils';
+import { RowReorderService } from './../row-reordering/row-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-bound-tree-component";
+import * as i2 from "./../row-reordering/row-reorder.service";
 export class BaseBindingDirective {
-    constructor(component) {
+    constructor(component, rowReorderService) {
         this.component = component;
+        this.rowReorderService = rowReorderService;
         this.state = {};
         this.cache = new Map();
         this.originalData = [];
@@ -45,6 +48,8 @@ export 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
@@ -85,6 +90,7 @@ export class BaseBindingDirective {
         this.cache.clear();
         this.component.data = this.fetchChildren();
     }
+    onRowReorder(_event) { }
     applyState({ sort, filter }) {
         this.sort = sort;
         this.filter = filter;
@@ -153,12 +159,12 @@ export class BaseBindingDirective {
         this.dataChanged = true;
     }
 }
-BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: i1.DataBoundTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BaseBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseBindingDirective, deps: [{ token: i1.DataBoundTreeComponent }, { token: i2.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: i1.DataBoundTreeComponent }]; }, propDecorators: { sort: [{
+        }], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }, { type: i2.RowReorderService }]; }, propDecorators: { sort: [{
                 type: Input
             }], filter: [{
                 type: Input

package/esm2020/binding-directives/flat-binding.directive.mjs

@@ -2,14 +2,17 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Optional } from '@angular/core';
 import { getter, setter } from '@progress/kendo-common';
 import { BaseBindingDirective } from './base-binding.directive';
 import { FlatEditService } from '../editing-directives/flat-edit.service';
 import { DataBoundTreeComponent } from './data-bound-tree-component';
 import { isPresent } from '../utils';
+import { RowReorderService } from '../row-reordering/row-reorder.service';
+import { FlatRowReorderService } from '../row-reordering/flat-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-bound-tree-component";
+import * as i2 from "../row-reordering/row-reorder.service";
 const ROOT_ID = null;
 /**
  * A directive which binds the TreeList to an array of objects by using
@@ -20,14 +23,18 @@ const ROOT_ID = null;
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples]({% slug databinding_treelist %})).
  */
 export 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.
@@ -35,6 +42,10 @@ export 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.
@@ -42,7 +53,14 @@ export 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 ?
@@ -53,16 +71,48 @@ export 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: i1.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: i1.DataBoundTreeComponent }, { token: i2.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: i1.DataBoundTreeComponent }]; }, propDecorators: { parentIdField: [{
+        }], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }, { type: i2.RowReorderService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { parentIdField: [{
                 type: Input
             }], idField: [{
                 type: Input

package/esm2020/binding-directives/hierarchy-binding.directive.mjs

@@ -2,13 +2,16 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
+import { Directive, Input, Optional } from '@angular/core';
 import { getter, setter } from '@progress/kendo-common';
 import { BaseBindingDirective } from './base-binding.directive';
 import { HierarchyEditService } from '../editing-directives/hierarchy-edit.service';
 import { DataBoundTreeComponent } from './data-bound-tree-component';
+import { RowReorderService } from '../row-reordering/row-reorder.service';
+import { HierarchicalRowReorderService } from '../row-reordering/hierarchical-reorder.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./data-bound-tree-component";
+import * as i2 from "../row-reordering/row-reorder.service";
 /**
  * A directive which binds the TreeList to a tree of objects.
  *
@@ -17,12 +20,16 @@ import * as i1 from "./data-bound-tree-component";
  * and [filtering]({% slug filtering_treelist %}) ([more information and examples](slug:databinding_treelist#toc-binding-to-hierarchical-data)).
  */
 export 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.
@@ -30,23 +37,56 @@ export 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: i1.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: i1.DataBoundTreeComponent }, { token: i2.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: i1.DataBoundTreeComponent }]; }, propDecorators: { childrenField: [{
+        }], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }, { type: i2.RowReorderService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { childrenField: [{
                 type: Input
             }], data: [{
                 type: Input,

package/esm2020/column-menu/column-chooser.component.mjs

@@ -19,12 +19,14 @@ import * as i5 from "./column-list.component";
  * 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>
+ * ```
  */
 export class ColumnChooserComponent {
     constructor(localization, columnInfoService, popupService, ngZone, renderer, changeDetector) {
@@ -36,10 +38,12 @@ export 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;

package/esm2020/column-menu/column-menu-chooser.component.mjs

@@ -14,18 +14,13 @@ import * as i3 from "./column-menu-item.component";
 import * as i4 from "./column-list.component";
 import * as i5 from "./column-menu-item-content-template.directive";
 /**
- * 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 %}
  */
 export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
     constructor(localization, columnInfoService, changeDetector) {
@@ -43,6 +38,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**
@@ -67,7 +63,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
 }
 ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.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"
@@ -92,7 +88,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"

package/esm2020/column-menu/column-menu-filter.component.mjs

@@ -12,18 +12,13 @@ import * as i2 from "./column-menu-item.component";
 import * as i3 from "../filtering/menu/filter-menu-container.component";
 import * as i4 from "./column-menu-item-content-template.directive";
 /**
- * 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 %}
  */
 export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
     constructor(localization) {
@@ -39,6 +34,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
         this.collapse = new EventEmitter();
         /**
          * Specifies if the content is expanded.
+         * @default false
          */
         this.expanded = false;
         /**

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

@@ -13,7 +13,7 @@ import * as i0 from "@angular/core";
  *
  * @example
  * ```html
- * <kendo-treelist>
+ * <kendo-treelist ...>
  *   <kendo-treelist-column field="ProductName">
  *     <ng-template kendoTreeListColumnMenuTemplate>
  *       <kendo-treelist-columnmenu-item text="Item Text" [expanded]="true">