syncfusion virtualscrollsrevice implementation

angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

package-lock.json

@@ -1815,6 +1815,205 @@
         "semver-intersect": "1.4.0"
       }
     },
+    "@syncfusion/ej2-angular-base": {
+      "version": "19.3.55",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-19.3.55.tgz",
+      "integrity": "sha512-TQEKKAutZn9hwk6N2+t+DxzhVCc3cb400TbG/7t/uJdoKfaeWM+bGi3C0MFQ939dl1o/d69AupSTWu1FXnk2Mg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.54",
+        "@syncfusion/ej2-icons": "~19.3.53",
+        "core-js": "^3.4.8",
+        "reflect-metadata": "^0.1.9",
+        "rxjs": "^6.5.4",
+        "rxjs-compat": "^6.5.4",
+        "zone.js": "^0.10.2"
+      },
+      "dependencies": {
+        "zone.js": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
+          "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
+        }
+      }
+    },
+    "@syncfusion/ej2-angular-treegrid": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-treegrid/-/ej2-angular-treegrid-19.3.57.tgz",
+      "integrity": "sha512-PiIWwj4NGF9UzygoVHZRsC3lQZ23oK+vMDSQRcHplGdektPkb+tj/1KCTn4xdt60+Y8QTwktmOMeEb3I1+DpEA==",
+      "requires": {
+        "@syncfusion/ej2-angular-base": "~19.3.55",
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-treegrid": "19.3.57"
+      }
+    },
+    "@syncfusion/ej2-base": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-19.3.57.tgz",
+      "integrity": "sha512-zidOG4IuWk75AzulLM2qqoHOlQsdu/ICPb2x92Bzjeq5ol2fqY1Yy26+rqhDY8NJllOBGdtsRmUCGyjN4E3MRA==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-buttons": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-19.3.53.tgz",
+      "integrity": "sha512-abWqinbJL7nftz6alzvvyQRH/LOM6rDUwQ9ZY9CnPga6OkKfe57XGwt1rn6F/LsjgtLVxmykIPSdKlJBe8Q/vQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-calendars": {
+      "version": "19.3.56",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-calendars/-/ej2-calendars-19.3.56.tgz",
+      "integrity": "sha512-XJj4Bl6hl3M5e+VAMOh5/JM3uR1C6v2unCl3JuHk+lCV+WLWcaboBC3XB2ZsZ0Sni2snSi25+yk8K3Ia9LiY5g==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-buttons": "~19.3.53",
+        "@syncfusion/ej2-inputs": "~19.3.53",
+        "@syncfusion/ej2-lists": "~19.3.53",
+        "@syncfusion/ej2-popups": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-compression": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-19.3.53.tgz",
+      "integrity": "sha512-AzFdUBKpB/4I6Okn/5P1s+o+i856LYRWNyw/xWp+BUQd/1/NhcBdBVDX/F/dx06RtYm8fHNJjyZe91CkK6ROjA==",
+      "requires": {
+        "@syncfusion/ej2-file-utils": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-19.3.57.tgz",
+      "integrity": "sha512-u+7npaSuxJn4RRIjI3lZuGjziz1Dtay0xsv73oknn99pWxZBAEAJrk//Of97SiNKe/kkw1+DtML9ikf3mmbBOA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56"
+      }
+    },
+    "@syncfusion/ej2-dropdowns": {
+      "version": "19.3.56",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.3.56.tgz",
+      "integrity": "sha512-rAVTJY6lbM6a3O621jJV3P1zrTzO0vI0dr3hsrgvgnhEiRebqxootmbzCiogpOCU5VLMIHDrWXMspJUBrE7tlQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-data": "~19.3.56",
+        "@syncfusion/ej2-inputs": "~19.3.53",
+        "@syncfusion/ej2-lists": "~19.3.53",
+        "@syncfusion/ej2-navigations": "~19.3.56",
+        "@syncfusion/ej2-popups": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-excel-export": {
+      "version": "19.3.56",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-excel-export/-/ej2-excel-export-19.3.56.tgz",
+      "integrity": "sha512-xjzsLJLQgoZhkweyVeAnbL0/54Ih3Rh6CbWbVURuujnpMyJnIOJ8y9OFMF1Ff0oPiIr4KBWI+6uUuKnOxbroZQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-compression": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-file-utils": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-19.3.53.tgz",
+      "integrity": "sha512-s9Ool8eU913pQWt4GKEEYEgkKZDJqTpbWo6vfXNE+3GEAOO38F+MbuMfAgM6aFiJMWXWxPJO1/koQt3aF6WRZg=="
+    },
+    "@syncfusion/ej2-grids": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-grids/-/ej2-grids-19.3.57.tgz",
+      "integrity": "sha512-mIQ2mm75lkDgvRoMa3gCjnKZvojn4ug9nNumUcr1Uqb+SseTfWBtHeRx8hweArP7alXCQB50teV2gWcsiGYpLA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-buttons": "~19.3.53",
+        "@syncfusion/ej2-calendars": "~19.3.56",
+        "@syncfusion/ej2-compression": "~19.3.53",
+        "@syncfusion/ej2-data": "~19.3.57",
+        "@syncfusion/ej2-dropdowns": "~19.3.56",
+        "@syncfusion/ej2-excel-export": "~19.3.56",
+        "@syncfusion/ej2-file-utils": "~19.3.53",
+        "@syncfusion/ej2-inputs": "~19.3.57",
+        "@syncfusion/ej2-lists": "~19.3.53",
+        "@syncfusion/ej2-navigations": "~19.3.57",
+        "@syncfusion/ej2-pdf-export": "~19.3.53",
+        "@syncfusion/ej2-popups": "~19.3.57",
+        "@syncfusion/ej2-splitbuttons": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-19.3.53.tgz",
+      "integrity": "sha512-W4+JkzTurFcpCfrgdD/0uDX4LQ/OSez/Kx5qm0ZGaWHBCWdUy9+qvBeZGpl8Yv+iuvOvuVpdqilpZ/RoCSnWvQ=="
+    },
+    "@syncfusion/ej2-inputs": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-19.3.57.tgz",
+      "integrity": "sha512-CTISfVXMQ9kqICmKYsTt8gAharyBa1RKGJw5Vy3dfa6jzYnzCrd3LCC5xSGXXnoi1Jni0cJfADYqwRdwoBPuIQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-buttons": "~19.3.53",
+        "@syncfusion/ej2-popups": "~19.3.57",
+        "@syncfusion/ej2-splitbuttons": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-lists": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-19.3.53.tgz",
+      "integrity": "sha512-iq/M/nMhKxWUBkNHddkubA+v+19vn1bGb2xEAawPn5zFbfeqGsm+eMa5+5UF73Q6VSxs6M1UJcq3TmIpMFRtVw==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.53",
+        "@syncfusion/ej2-buttons": "~19.3.53",
+        "@syncfusion/ej2-data": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-navigations": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-19.3.57.tgz",
+      "integrity": "sha512-dAWiXiB/MD4VU1zVZ3j1aKiY1NiYwxhgbVC4JI+8gmAAsNvKPCt0AubiiavG9qKm2iV+Wzhd7PCpxxrfs+scfQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-buttons": "~19.3.53",
+        "@syncfusion/ej2-data": "~19.3.57",
+        "@syncfusion/ej2-inputs": "~19.3.57",
+        "@syncfusion/ej2-lists": "~19.3.53",
+        "@syncfusion/ej2-popups": "~19.3.57"
+      }
+    },
+    "@syncfusion/ej2-pdf-export": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-19.3.53.tgz",
+      "integrity": "sha512-nEfgdnpFG8cXH7+bcqV5PzZDlZ6VWuBkNDQG9iZ8TvXRUJq9iC8vhug9Rnug0Yy0Npvr5mf25TM/h3hEEsiCZQ==",
+      "requires": {
+        "@syncfusion/ej2-compression": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-popups": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-19.3.57.tgz",
+      "integrity": "sha512-21HX00hnOs4jYpvrGocAXNMG7p5Hs2kzdfw1KbzUoDuBv1mf/1uLNi/w/arOUMj+hD8AeGxAuN8/G9nCr7Ox6A==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-buttons": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-splitbuttons": {
+      "version": "19.3.53",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.3.53.tgz",
+      "integrity": "sha512-HOFBRW6M1PN83fAEZz8r/YahDntvssKfdk2nWRI6iqgwhjicmWLw1ihMSOyAvMZGrQf56hmBVAWUL/XKuK+lkA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.53",
+        "@syncfusion/ej2-popups": "~19.3.53"
+      }
+    },
+    "@syncfusion/ej2-treegrid": {
+      "version": "19.3.57",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-treegrid/-/ej2-treegrid-19.3.57.tgz",
+      "integrity": "sha512-l/36R+goYonuX82BT7+NkakkDL4ryTnvN6pkZFEC5NW9MQwl1fmNcsGGUapaswOHHnwRrJQJ7h+CrswvCPGguA==",
+      "requires": {
+        "@syncfusion/ej2-base": "~19.3.56",
+        "@syncfusion/ej2-data": "~19.3.57",
+        "@syncfusion/ej2-grids": "~19.3.57",
+        "@syncfusion/ej2-popups": "~19.3.57"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3692,8 +3891,7 @@
     "core-js": {
       "version": "3.8.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz",
-      "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==",
-      "dev": true
+      "integrity": "sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q=="
     },
     "core-js-compat": {
       "version": "3.19.3",
@@ -9657,8 +9855,7 @@
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
-      "dev": true
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
     },
     "regenerate": {
       "version": "1.4.2",
@@ -10002,6 +10199,11 @@
         }
       }
     },
+    "rxjs-compat": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz",
+      "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "~11.2.9",
     "@angular/platform-browser-dynamic": "~11.2.9",
     "@angular/router": "~11.2.9",
+    "@syncfusion/ej2-angular-treegrid": "^19.3.57",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

src/app/app.component.ts

@@ -1,10 +1,26 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
+import { VirtualScrollService, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
+import { dataSource, virtualData } from './datasource';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    template: `<ejs-treegrid #treegrid [dataSource]='data' [enableVirtualization]=true height=600 childMapping='Crew' [treeColumnIndex]='1' >
+        <e-columns>
+            <e-column field='TaskID' headerText='Player Jersey' width='120' textAlign='Right'></e-column>
+            <e-column field='FIELD1' headerText='Player Name' width='120'></e-column>
+            <e-column field='FIELD2' headerText='Year' width='100' textAlign='Right'></e-column>
+            <e-column field='FIELD3' headerText='Stint' width='120' textAlign='Right'></e-column>
+            <e-column field='FIELD4' headerText='TMID' width='120' textAlign='Right'></e-column>
+        </e-columns>
+</ejs-treegrid>`,
+providers: [VirtualScrollService]
 })
-export class AppComponent {
-  title = 'test-treegrid';
+export class AppComponent implements OnInit {
+
+    public data: Object[] | any;
+
+    ngOnInit(): void {
+        dataSource();
+        this.data = virtualData;
+    }
 }

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { TreeGridModule} from '@syncfusion/ej2-angular-treegrid';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -10,7 +10,8 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    TreeGridModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.scss

@@ -1 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-treegrid/styles/material.css';