Declined
Last Updated:
29 Jan 2024 12:15
by ADMIN
OpkeyDev
Created on:
23 Jan 2024 07:01
Category:
Kendo UI for Angular
Type:
Feature Request
How can I reduce the rendering time of Kendo Tree UI, when the hierarichal data is large in size, it takes some time to load the tree view. How can we optimize it ?
1. Start using the Kendo Tree View in Angular.
2. Load a large dataset for the Kendo Tree View, observe the time taken to render the Tree View.
3. The timing will increase if the dataset keeps on increasing.
4. Suggest some ways to reduce or optimize it.
This is how I am using the Kendo TreeView in Angular,
<kendo-treeview #treeView [nodes]="folderData" textField="Name" kendoTreeViewExpandable
kendoTreeViewSelectable kendoTreeViewHierarchyBinding childrenField="Child"
[(expandedKeys)]="expandedKeys" (expand)="onExpand($event)" (selectionChange)="folderSelected($event)"
(collapse)="onCollapse($event)" (nodeClick)="onNodeClick($event)" id="folderView">
<ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
<div ngbDropdown container="body" placement="right left" [id]="'folder-' + dataItem?.ID"
class="folder-heading-container" *ngIf="dataItem?.ID"
[ngClass]="{'selected-folder': dataItem?.ID == selectedFolder?.ID, 'no-data': !dataItem?.FolderCount}">
<div class="icon">
<i class="oci oci-folder1"></i>
</div>
<div class="title" *ngIf="renameId != dataItem?.ID" ngbTooltip="{{ dataItem?.Name }}"
container="body">
{{dataItem?.Name}}
</div>
<input type="text" maxlength="255" (keyup)="renameChanged($event)" (blur)="saveUpdatedName()"
id="folder-rename-box" class="input-box" *ngIf="renameId == dataItem?.ID"
[(ngModel)]="renameText">
<div (click)="getExactArtifactCount(dataItem, $event)" class="count remove_icon_drop"
ngbTooltip="Click to view folder details" container="body" ngbDropdownToggle
container="body" placement="right left"
*ngIf="dataItem?.artifactCount || dataItem?.FolderCount">
{{ dataItem?.FolderCount + dataItem?.artifactCount }}
</div>
<div class="count remove_icon_drop" *ngIf="!dataItem?.artifactCount && !dataItem?.FolderCount">
0
</div>
<div ngbDropdownMenu class="folder-view-artifact"
[ngClass]="{'test-case-link-parent': linkTestCase}">
<div class="exact-artifact-count scrollableY"
[ngClass]="{'test-case-link': linkTestCase, 'other-link': !linkTestCase}"
id="exact-artifact-count" *ngIf="exactArtifactCount?.length">
<div class="artifact" *ngFor="let artifact of exactArtifactCount">
<div class="icon">
<i [ngStyle]="{'color': artifact.color}"
class=" oci {{artifact.icon}} font_16px align-middle">
</i>
</div>
<div [ngStyle]="{'color': artifact.color}" class="title">{{artifact.artifactName |
pipe_grogu : '': '' :
'change_component_name'}}</div>
<div [ngStyle]="{'color': artifact.color}" class="count">{{artifact.count}}</div>
</div>
</div>
</div>
</div>
</ng-template>
</kendo-treeview>
1 comment
ADMIN
Yanmario
Posted on:
29 Jan 2024 12:15