@progress/kendo-angular-treeview
Version:
Kendo UI TreeView for Angular
138 lines (137 loc) • 6.04 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/';
/**
* Represents the directive that enables you to display only a limited number of nodes per level
* ([see example](slug:loadmorebutton_treeview)).
*
* @example
* ```html
* <kendo-treeview
* ...
* kendoTreeViewLoadMore
* [pageSize]="10"
* [totalRootNodes]="100"
* totalField="totalChildren">
* </kendo-treeview>
* ```
*
* @remarks
* Applied to: {@link TreeViewComponent}
*/
export class LoadMoreDirective {
treeview;
/**
* Sets the callback function that runs when the load more button is clicked.
* Provide a function when you fetch additional nodes on demand
* ([see example](slug:loadmorebutton_treeview#remote-data)).
*
*/
set loadMoreNodes(loadMoreNodes) {
if (typeof loadMoreNodes === 'string') {
return;
}
this.treeview.loadMoreService.loadMoreNodes = loadMoreNodes;
}
/**
* Sets the initial number of nodes to render on each level.
* Each time the load more button is clicked, the page size increases by this number.
*/
pageSize;
/**
* Sets the total number of root nodes.
* Use this property when you fetch additional nodes on demand
* ([see example](slug:loadmorebutton_treeview#remote-data)).
*/
totalRootNodes;
/**
* Sets the field that contains the total number of child nodes for the data item.
* Use this property when you fetch additional nodes on demand
* ([see example](slug:loadmorebutton_treeview#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
}] } });