From be077ebe27b3be5a786b1aa547aa98d915e2b721 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
<92744169+mehmetcetin01140@users.noreply.github.com>
Date: Mon, 26 Feb 2024 10:43:11 +0300
Subject: [PATCH] tree virtual scroll added
---
src/app/showcase/doc/tree/treedoc.module.ts | 4 +-
src/app/showcase/doc/tree/virtualscrolldoc.ts | 80 ++++++++++++
.../showcase/doc/tree/virtualscrolllazydoc.ts | 114 ++++++++++++++++++
src/app/showcase/pages/tree/treedemo.ts | 18 +++
4 files changed, 215 insertions(+), 1 deletion(-)
create mode 100644 src/app/showcase/doc/tree/virtualscrolldoc.ts
create mode 100644 src/app/showcase/doc/tree/virtualscrolllazydoc.ts
diff --git a/src/app/showcase/doc/tree/treedoc.module.ts b/src/app/showcase/doc/tree/treedoc.module.ts
index a8a851af322..afe234ab19e 100644
--- a/src/app/showcase/doc/tree/treedoc.module.ts
+++ b/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 {}
diff --git a/src/app/showcase/doc/tree/virtualscrolldoc.ts b/src/app/showcase/doc/tree/virtualscrolldoc.ts
new file mode 100644
index 00000000000..76f6b970e29
--- /dev/null
+++ b/src/app/showcase/doc/tree/virtualscrolldoc.ts
@@ -0,0 +1,80 @@
+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: `
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.
+
+
+
+ `
+})
+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: ``,
+
+ html: `
+`,
+
+ typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+ selector: 'tree-template-demo',
+ templateUrl: './tree-template-demo.html'
+})
+export class TreeTemplateDemo 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;
+ }
+
+}`
+ };
+}
diff --git a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
new file mode 100644
index 00000000000..aaaf72e72b2
--- /dev/null
+++ b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts
@@ -0,0 +1,114 @@
+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: `
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.
+
+
+
+ `
+})
+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: ``,
+
+ html: ``,
+
+ typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+ selector: 'tree-template-demo',
+ templateUrl: './tree-template-demo.html'
+})
+export class TreeTemplateDemo 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);
+ }
+ }
+}`
+ };
+}
diff --git a/src/app/showcase/pages/tree/treedemo.ts b/src/app/showcase/pages/tree/treedemo.ts
index 72ed5d4c44e..30538daa466 100644
--- a/src/app/showcase/pages/tree/treedemo.ts
+++ b/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',