Tree virtual docs

src/app/showcase/doc/tree/treedoc.module.ts

@@ -22,10 +22,12 @@ import { MultipleDoc } from './multipledoc';
 import { SingleDoc } from './singledoc';
 import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
+import { VirtualScrollDoc } from './virtualscrolldoc';
+import { LazyVirtualScrollDoc } from './virtualscrolllazydoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, TreeModule, ButtonModule, InputSwitchModule, FormsModule, ToastModule, ContextMenuModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, ControlledDoc, SingleDoc, MultipleDoc, CheckboxDoc, EventDoc, LazyDoc, TemplateDoc, DragDropDoc, ContextMenuDoc, FilterDoc, StyleDoc, AccessibilityDoc]
+    declarations: [ImportDoc, BasicDoc, ControlledDoc, SingleDoc, MultipleDoc, CheckboxDoc, EventDoc, LazyDoc, VirtualScrollDoc, LazyVirtualScrollDoc, TemplateDoc, DragDropDoc, ContextMenuDoc, FilterDoc, StyleDoc, AccessibilityDoc]
 })
 export class TreeDocModule {}

src/app/showcase/doc/tree/virtualscrolldoc.ts

@@ -0,0 +1,111 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'virtual-scroll-doc',
+    template: `
+        <app-docsectiontext>
+            <p>VirtualScroller is a performance-approach to handle huge data efficiently. Setting <i>virtualScroll</i> property as true and providing a <i>virtualScrollItemSize</i> in pixels would be enough to enable this functionality.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>
+        </div>
+        <app-code [code]="code" selector="tree-virtual-scroll-demo"></app-code>
+    `
+})
+export class VirtualScrollDoc implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.nodeService.getFiles().then((data) => {
+            this.files = this.duplicateData(data, 50);
+            this.cd.markForCheck();
+        });
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    code: Code = {
+        basic: `<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>`,
+
+        html: `
+<div class="card flex justify-content-center">
+<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46" [value]="files"></p-tree>
+</div>`,
+
+        typescript: `
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'tree-virtual-scroll-demo',
+    templateUrl: './tree-virtual-scroll-demo.html'
+})
+export class TreeVirtualScrollDemo implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.nodeService.getFiles().then((data) => {
+            this.files = this.duplicateData(data, 50);
+            this.cd.markForCheck();
+        });
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+}`,
+service: ['NodeService'],
+
+data: `
+/* NodeService */
+{
+key: '0',
+label: 'Documents',
+data: 'Documents Folder',
+icon: 'pi pi-fw pi-inbox',
+children: [
+{
+    key: '0-0',
+    label: 'Work',
+    data: 'Work Folder',
+    icon: 'pi pi-fw pi-cog',
+    children: [
+        { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+        { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+    ]
+},
+{
+    key: '0-1',
+    label: 'Home',
+    data: 'Home Folder',
+    icon: 'pi pi-fw pi-home',
+    children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+}
+]
+},
+...`
+    };
+}

src/app/showcase/doc/tree/virtualscrolllazydoc.ts

@@ -0,0 +1,145 @@
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'lazy-virtual-scroll-doc',
+    template: `
+        <app-docsectiontext>
+            <p>VirtualScroller is a performance-approach to handle huge data efficiently. Setting <i>virtualScroll</i> property as true and providing a <i>virtualScrollItemSize</i> in pixels would be enough to enable this functionality.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>
+        </div>
+        <app-code [code]="code" selector="tree-virtual-scroll-lazy-demo"></app-code>
+    `
+})
+export class LazyVirtualScrollDoc implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    virtualFiles!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.loading = true;
+        setTimeout(() => {
+            this.nodeService.getLazyFiles().then((files) => (this.files = this.duplicateData(files, 50)));
+            this.loading = false;
+            this.cd.markForCheck();
+        }, 1000);
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    nodeExpand(event: any) {
+        if (event.node) {
+            this.loading = true;
+            setTimeout(() => {
+                this.nodeService.getLazyFiles().then((nodes) => {
+                    event.node.children = nodes;
+                    this.files = [...this.files, event.node.children];
+                });
+                this.loading = false;
+                this.cd.markForCheck();
+            }, 200);
+        }
+    }
+
+    code: Code = {
+        basic: `<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>`,
+
+        html: `<div class="card flex justify-content-center">
+<p-tree class="w-full md:w-30rem" scrollHeight="250px" [virtualScroll]="true" [lazy]="true" [virtualScrollItemSize]="46" [value]="files" (onNodeExpand)="nodeExpand($event)" [loading]="loading"></p-tree>
+</div>`,
+
+        typescript: `
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'tree-virtual-scroll-lazy-demo',
+    templateUrl: './tree-virtual-scroll-lazy-demo.html'
+})
+export class TreeVirtualScrollLazyDemo implements OnInit {
+    loading: boolean = false;
+
+    files!: TreeNode[];
+
+    virtualFiles!: TreeNode[];
+
+    constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {}
+
+    ngOnInit() {
+        this.loading = true;
+        setTimeout(() => {
+            this.nodeService.getLazyFiles().then((files) => (this.files = this.duplicateData(files, 50)));
+            this.loading = false;
+            this.cd.markForCheck();
+        }, 1000);
+    }
+
+    duplicateData(data: TreeNode[], count: number): TreeNode[] {
+        let duplicatedData: TreeNode[] = [];
+        for (let i = 0; i < count; i++) {
+            duplicatedData = [...duplicatedData, ...data.map((item) => ({ ...item }))];
+        }
+        return duplicatedData;
+    }
+
+    nodeExpand(event: any) {
+        if (event.node) {
+            this.loading = true;
+            setTimeout(() => {
+                this.nodeService.getLazyFiles().then((nodes) => {
+                    event.node.children = nodes;
+                    this.files = [...this.files, event.node.children];
+                });
+                this.loading = false;
+                this.cd.markForCheck();
+            }, 200);
+        }
+    }
+}`,
+        service: ['NodeService'],
+
+        data: `
+    /* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...`
+    };
+}

src/app/showcase/pages/tree/treedemo.ts

@@ -13,6 +13,8 @@ import { ContextMenuDoc } from '../../doc/tree/contextmenudoc';
 import { FilterDoc } from '../../doc/tree/filterdoc';
 import { StyleDoc } from '../../doc/tree/styledoc';
 import { AccessibilityDoc } from '../../doc/tree/accessibilitydoc';
+import { VirtualScrollDoc } from '../../doc/tree/virtualscrolldoc';
+import { LazyVirtualScrollDoc } from '../../doc/tree/virtualscrolllazydoc';
 
 @Component({
     templateUrl: './treedemo.html'
@@ -65,6 +67,22 @@ export class TreeDemo {
             label: 'Lazy',
             component: LazyDoc
         },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            children:[
+                {
+                    id: 'preload',
+                    label: 'Preload',
+                    component: VirtualScrollDoc
+                },
+                {
+                    id: 'lazyvirtualscroll',
+                    label: 'Lazy',
+                    component: LazyVirtualScrollDoc
+                },
+            ]
+        },
         {
             id: 'template',
             label: 'Template',