@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.
131 lines (130 loc) • 5.76 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 { 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;
/**
* Represents the Kendo for Angular UI TreeList flat binding directive.
* Use this directive to bind the TreeList to a flat array of objects using `idField` and `parentIdField` to define the hierarchy.
* Handles in-memory data operations [sorting]({% slug sorting_treelist %}), [aggregation]({% slug treelist_with_aggregates %})
* and [filtering]({% slug filtering_treelist %}). [More information and examples]({% slug databinding_treelist %}).
*
*/
export class FlatBindingDirective extends BaseBindingDirective {
component;
rowReorderService;
/**
* Sets the name of the field that contains the identifier of the parent node.
*/
set parentIdField(value) {
this.parentIdGetter = getter(value);
this.parentIdSetter = setter(value);
this._parentIdField = value;
}
get parentIdField() {
return this._parentIdField;
}
/**
* Sets the name of the field that contains the unique identifier of the node.
*/
set idField(value) {
this.idGetter = getter(value);
this.idSetter = setter(value);
this._idField = value;
}
get idField() {
return this._idField;
}
/**
* Sets the array of data that populates the TreeList.
*/
data;
idGetter = getter('id');
idSetter = setter('id');
parentIdGetter = getter('parentId');
parentIdSetter = setter('parentId');
constructor(component, rowReorderService) {
super(component);
this.component = component;
this.rowReorderService = rowReorderService;
component.localEditService = new FlatEditService(this);
if (this.rowReorderService) {
this.rowReorderService.bindingDirective = this;
}
}
_parentIdField;
_idField;
/**
* @hidden
*/
getChildren(item) {
const id = this.itemKey(item);
const children = id === ROOT_ID ?
this.originalData.filter(o => !isPresent(this.parentIdGetter(o))) :
this.originalData.filter(o => this.parentIdGetter(o) === id);
return children;
}
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();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FlatBindingDirective, 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: FlatBindingDirective, isStandalone: true, 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: "16.2.12", ngImport: i0, type: FlatBindingDirective, decorators: [{
type: Directive,
args: [{
exportAs: 'kendoTreeListFlatBinding',
selector: '[kendoTreeListFlatBinding]',
providers: [
{
provide: RowReorderService,
useClass: FlatRowReorderService
}
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.DataBoundTreeComponent }, { type: i2.RowReorderService, decorators: [{
type: Optional
}] }]; }, propDecorators: { parentIdField: [{
type: Input
}], idField: [{
type: Input
}], data: [{
type: Input,
args: ["kendoTreeListFlatBinding"]
}] } });