@progress/kendo-angular-treelist
Version:
Kendo UI TreeList for Angular - Display hierarchical data in an Angular tree grid view that supports sorting, filtering, paging, and much more.
110 lines (109 loc) • 5.07 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
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";
/**
* Represents the Kendo UI for Angular TreeList hierarchy binding directive.
* Use this directive to bind the TreeList to a tree of objects using a field that holds child data items.
* Handles in-memory data operations [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
* and [filtering]({% slug filtering_treelist %}). [More information and examples.](slug:local_databinding_treelist#toc-binding-to-hierarchical-data-1)
*
* @example
* ```html
* <kendo-treelist [kendoTreeListHierarchyBinding]="data" [children]="childrenField"></kendo-treelist>
* ```
*
* @remarks
* Applied to: {@link TreeListComponent}.
*/
export class HierarchyBindingDirective extends BaseBindingDirective {
component;
rowReorderService;
/**
* Sets the name of the field that holds the child data items of the node.
*/
set childrenField(value) {
this.childrenGetter = getter(value);
this.childrenSetter = setter(value);
this._childrenField = value;
}
get childrenField() {
return this._childrenField;
}
/**
* Sets the array of data that populates the TreeList.
*/
data;
childrenGetter = getter('items');
childrenSetter = setter('items');
constructor(component, rowReorderService) {
super(component);
this.component = component;
this.rowReorderService = rowReorderService;
component.localEditService = new HierarchyEditService(this);
if (this.rowReorderService) {
this.rowReorderService.bindingDirective = 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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HierarchyBindingDirective, deps: [{ token: i1.DataBoundTreeComponent }, { token: i2.RowReorderService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HierarchyBindingDirective, isStandalone: true, 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: "16.2.12", ngImport: i0, type: HierarchyBindingDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'kendoTreeListHierarchyBinding',
selector: '[kendoTreeListHierarchyBinding]',
providers: [
{
provide: RowReorderService,
useClass: HierarchicalRowReorderService
}
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }, { type: i2.RowReorderService, decorators: [{
type: Optional
}] }]; }, propDecorators: { childrenField: [{
type: Input
}], data: [{
type: Input,
args: ["kendoTreeListHierarchyBinding"]
}] } });