@progress/kendo-angular-treeview
Version:
Kendo UI TreeView for Angular
123 lines (122 loc) • 5.87 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, isDevMode } from '@angular/core';
import { guid } from '@progress/kendo-angular-common';
import { TreeViewComponent } from '../treeview.component';
import { isPresent } from '../utils';
import * as i0 from "@angular/core";
import * as i1 from "../treeview.component";
const LOAD_MORE_DOC_LINK = 'https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/';
/**
* A directive that enables the display of only a limited amount of nodes per level
* ([see example]({% slug loadmorebutton_treeview %})).
*/
export class LoadMoreDirective {
treeview;
/**
* Specifies the callback that will be called when the load more button is clicked.
* Providing a function is only required when additional nodes are fetched on demand
* ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
*/
set loadMoreNodes(loadMoreNodes) {
if (typeof loadMoreNodes === 'string') {
return;
}
this.treeview.loadMoreService.loadMoreNodes = loadMoreNodes;
}
/**
* Specifies the initial number of nodes that will be rendered on each level.
* Every time the load more button is clicked, the data item page size will be incremented with this number.
*/
pageSize;
/**
* Specifies the total number of root nodes.
* Used when additional nodes are fetched on demand
* ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
*/
totalRootNodes;
/**
* Specifies which field holds information about the total number of child nodes of the data item.
* Used when additional nodes are fetched on demand
* ([see example]({% slug loadmorebutton_treeview %}#toc-remote-data)).
*/
totalField;
/**
* Keeps track of the current page size of each node over expand/collapse cycles.
*/
pageSizes = new Map();
/**
* Used as an identifier for the root page size as the root collection of nodes is not associated with a data item.
*/
rootLevelId = guid();
constructor(treeview) {
this.treeview = treeview;
this.treeview.loadMoreService = {
getInitialPageSize: this.getInitalPageSize.bind(this),
getGroupSize: this.getGroupSize.bind(this),
setGroupSize: this.setGroupSize.bind(this),
getTotalNodesCount: this.getTotalNodesCount.bind(this)
};
}
ngOnChanges() {
this.verifySettings();
}
verifySettings() {
if (!isDevMode()) {
return;
}
if (!isPresent(this.pageSize)) {
throw new Error(`To use the TreeView \`kendoTreeViewLoadMore\` directive, you need to assign a \`pageSize\` value. See ${LOAD_MORE_DOC_LINK}.`);
}
const loadMoreNodes = this.treeview.loadMoreService.loadMoreNodes;
if (isPresent(loadMoreNodes) && typeof loadMoreNodes !== 'function') {
throw new Error(`The passed value to the \`kendoTreeViewLoadMore\` directive must be a function that retrieves additional nodes. See ${LOAD_MORE_DOC_LINK}.`);
}
if (isPresent(loadMoreNodes) && !isPresent(this.totalField)) {
throw new Error(`When a function to fetch additional nodes is provided to the \`kendoTreeViewLoadMore\` directive, the \`totalField\` and \`totalRootNodes\` values must also be provided. See ${LOAD_MORE_DOC_LINK}.`);
}
}
getGroupSize(dataItem) {
const itemKey = dataItem || this.rootLevelId;
return this.pageSizes.has(itemKey) ? this.pageSizes.get(itemKey) : this.pageSize;
}
setGroupSize(dataItem, pageSize) {
const itemKey = dataItem || this.rootLevelId;
const normalizedSizeValue = pageSize > 0 ? pageSize : 0;
this.pageSizes.set(itemKey, normalizedSizeValue);
}
getTotalNodesCount(dataItem, loadedNodesCount) {
if (isPresent(dataItem) && isPresent(this.totalField)) {
return dataItem[this.totalField];
}
else if (!isPresent(dataItem) && isPresent(this.totalRootNodes)) {
return this.totalRootNodes;
}
else {
return loadedNodesCount;
}
}
getInitalPageSize() {
return this.pageSize;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadMoreDirective, deps: [{ token: i1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LoadMoreDirective, isStandalone: true, selector: "[kendoTreeViewLoadMore]", inputs: { loadMoreNodes: ["kendoTreeViewLoadMore", "loadMoreNodes"], pageSize: "pageSize", totalRootNodes: "totalRootNodes", totalField: "totalField" }, usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadMoreDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoTreeViewLoadMore]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.TreeViewComponent }]; }, propDecorators: { loadMoreNodes: [{
type: Input,
args: ['kendoTreeViewLoadMore']
}], pageSize: [{
type: Input
}], totalRootNodes: [{
type: Input
}], totalField: [{
type: Input
}] } });