Skip to content

Commit 9ec5b87

Browse files
author
pipeline
committed
feature(EJ2-3757): virtual scroll sample added.
1 parent 9ffd8ae commit 9ec5b87

File tree

5 files changed

+85
-40
lines changed

5 files changed

+85
-40
lines changed

‎src/grid/images/spinner.gif‎

1.64 KB
Loading

‎src/grid/virtualization-plnkr.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/grid/virtualization.component.ts‎

Lines changed: 53 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,67 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { VirtualScrollService } from '@syncfusion/ej2-ng-grids';
1+
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
2+
import { VirtualScrollService, GridComponent } from '@syncfusion/ej2-ng-grids';
33

44
@Component({
55
selector: 'ej2-gridvirtual',
66
templateUrl: 'virtualization.html',
7+
styleUrls: ['virtualization.style.css'],
8+
encapsulation: ViewEncapsulation.None,
79
providers: [VirtualScrollService]
810
})
911
export class VirtualizationComponent implements OnInit {
10-
public data: Object[] = [];
12+
public virtualData: Object[] = [];
1113
public names: string[] = ['hardire', 'abramjo01', 'aubucch01', "Hook", "Rumpelstiltskin", "Belle", "Emma", "Regina", "Aurora", "Elsa", "Anna", "Snow White", "Prince Charming", "Cora", "Zelena", "August", "Mulan", "Graham", "Discord", "Will", "Robin Hood", "Jiminy Cricket", "Henry", "Neal", "Red",
1214
"Aaran", "Aaren", "Aarez", "Aarman", "Aaron", "Aaron-James", "Aarron", "Aaryan", "Aaryn", "Aayan", "Aazaan", "Abaan", "Abbas", "Abdallah", "Abdalroof", "Abdihakim", "Abdirahman", "Abdisalam", "Abdul", "Abdul-Aziz", "Abdulbasir", "Abdulkadir", "Abdulkarem", "Abdulkhader", "Abdullah", "Abdul-Majeed", "Abdulmalik", "Abdul-Rehman", "Abdur", "Abdurraheem", "Abdur-Rahman", "Abdur-Rehmaan", "Abel", "Abhinav", "Abhisumant", "Abid", "Abir", "Abraham", "Abu", "Abubakar", "Ace", "Adain", "Adam", "Adam-James", "Addison", "Addisson", "Adegbola", "Adegbolahan", "Aden", "Adenn", "Adie", "Adil", "Aditya", "Adnan", "Adrian", "Adrien", "Aedan", "Aedin", "Aedyn", "Aeron", "Afonso", "Ahmad", "Ahmed", "Ahmed-Aziz", "Ahoua", "Ahtasham", "Aiadan", "Aidan", "Aiden", "Aiden-Jack", "Aiden-Vee"];
1315

14-
public ngOnInit(): void {
15-
for (let i: number = 0; i < 5000; i++) {
16-
this.data.push({
17-
"FIELD1": this.names[Math.floor(Math.random() * this.names.length)],
18-
"FIELD2": 1967 + (i % 10),
19-
"FIELD3": Math.floor(Math.random() * 200),
20-
"FIELD4": Math.floor(Math.random() * 100),
21-
"FIELD5": Math.floor(Math.random() * 2000),
22-
"FIELD6": Math.floor(Math.random() * 1000),
23-
"FIELD7": Math.floor(Math.random() * 100),
24-
"FIELD8": Math.floor(Math.random() * 10),
25-
"FIELD9": Math.floor(Math.random() * 10),
26-
"FIELD10": Math.floor(Math.random() * 100),
27-
"FIELD11": Math.floor(Math.random() * 100),
28-
"FIELD12": Math.floor(Math.random() * 1000),
29-
"FIELD13": Math.floor(Math.random() * 10),
30-
"FIELD14": Math.floor(Math.random() * 10),
31-
"FIELD15": Math.floor(Math.random() * 1000),
32-
"FIELD16": Math.floor(Math.random() * 200),
33-
"FIELD17": Math.floor(Math.random() * 300),
34-
"FIELD18": Math.floor(Math.random() * 400),
35-
"FIELD19": Math.floor(Math.random() * 500),
36-
"FIELD20": Math.floor(Math.random() * 700),
37-
"FIELD21": Math.floor(Math.random() * 800),
38-
"FIELD22": Math.floor(Math.random() * 1000),
39-
"FIELD23": Math.floor(Math.random() * 2000),
40-
"FIELD24": Math.floor(Math.random() * 150),
41-
"FIELD25": Math.floor(Math.random() * 1000),
42-
"FIELD26": Math.floor(Math.random() * 100),
43-
"FIELD27": Math.floor(Math.random() * 400),
44-
"FIELD28": Math.floor(Math.random() * 600),
45-
"FIELD29": Math.floor(Math.random() * 500),
46-
"FIELD30": Math.floor(Math.random() * 300),
16+
@ViewChild('grid')
17+
public grid: GridComponent;
18+
public ngOnInit(): void {}
19+
20+
onClick = (args: any) => {
21+
for (let i: number = 0; i < 100000; i++) {
22+
if (!this.virtualData.length){
23+
this.show();
24+
}
25+
this.virtualData.push({
26+
'FIELD1': this.names[Math.floor(Math.random() * this.names.length)],
27+
'FIELD2': 1967 + (i % 10),
28+
'FIELD3': Math.floor(Math.random() * 200),
29+
'FIELD4': Math.floor(Math.random() * 100),
30+
'FIELD5': Math.floor(Math.random() * 2000),
31+
'FIELD6': Math.floor(Math.random() * 1000),
32+
'FIELD7': Math.floor(Math.random() * 100),
33+
'FIELD8': Math.floor(Math.random() * 10),
34+
'FIELD9': Math.floor(Math.random() * 10),
35+
'FIELD10': Math.floor(Math.random() * 100),
36+
'FIELD11': Math.floor(Math.random() * 100),
37+
'FIELD12': Math.floor(Math.random() * 1000),
38+
'FIELD13': Math.floor(Math.random() * 10),
39+
'FIELD14': Math.floor(Math.random() * 10),
40+
'FIELD15': Math.floor(Math.random() * 1000),
41+
'FIELD16': Math.floor(Math.random() * 200),
42+
'FIELD17': Math.floor(Math.random() * 300),
43+
'FIELD18': Math.floor(Math.random() * 400),
44+
'FIELD19': Math.floor(Math.random() * 500),
45+
'FIELD20': Math.floor(Math.random() * 700),
46+
'FIELD21': Math.floor(Math.random() * 800),
47+
'FIELD22': Math.floor(Math.random() * 1000),
48+
'FIELD23': Math.floor(Math.random() * 2000),
49+
'FIELD24': Math.floor(Math.random() * 150),
50+
'FIELD25': Math.floor(Math.random() * 1000),
51+
'FIELD26': Math.floor(Math.random() * 100),
52+
'FIELD27': Math.floor(Math.random() * 400),
53+
'FIELD28': Math.floor(Math.random() * 600),
54+
'FIELD29': Math.floor(Math.random() * 500),
55+
'FIELD30': Math.floor(Math.random() * 300),
4756
});
4857
}
58+
this.grid.dataSource = this.virtualData;
59+
this.grid.refresh();
60+
}
61+
show(): void {
62+
document.getElementById('popup').style.display = 'inline-block';
63+
}
64+
hide(): void {
65+
document.getElementById('popup').style.display = 'none';
4966
}
5067
}

‎src/grid/virtualization.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<div class="control-section">
2-
<ej-grid [dataSource]='data' [enableVirtualization]='true' [enableColumnVirtualization]='true' height='400'>
2+
<button ej-button (click)='onClick($event)' cssClass='e-info'>Load 100K Data</button>
3+
<span id="popup">
4+
<span id="gif" class="image"></span>
5+
</span>
6+
<ej-grid #grid [dataSource]='virtualData' [enableVirtualization]='true' [enableColumnVirtualization]='true' height='600' (dataBound)='hide()'>
37
<e-columns>
48
<e-column field='FIELD1' headerText='Player Name' width='120'></e-column>
59
<e-column field='FIELD2' headerText='Year' width='100'></e-column>
@@ -47,10 +51,12 @@
4751
<p>
4852
Note: The <code><a target="_blank" class="code"
4953
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#height-string---number">
50-
height</a></code> property must be defined when enable row virtualization.
54+
height</a></code> property must be defined when enable <code><a target="_blank" class="code"
55+
href="http://ej2.syncfusion.com/documentation/grid/api-grid.html#enablevirtualization-boolean">
56+
enableVirtualization </a></code>.
5157
</p>
5258
<p>
53-
In this demo, the Grid have 5000 rows and 30 columns. Also row and column virtualization is enabled on this.
59+
In this demo, Grid enabled row and column virtualization. Click the Load 100K Data button to bind 100000 rows and 30 columns.
5460
</p>
5561
<p style='font-weight: 500'>Injecting Module</p>
5662
<p>Grid component features are segregated into individual feature-wise modules. To use Virtualscrolling feature, we need

‎src/grid/virtualization.style.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.image {
2+
position: absolute;
3+
background-repeat: no-repeat;
4+
background-image: url('src/grid/images/spinner.gif');
5+
background-position: center;
6+
width: 16px;
7+
height: 35px;
8+
}
9+
10+
.e-bigger .image {
11+
height: 48px;
12+
}
13+
14+
#popup {
15+
position: absolute;
16+
background-color: transparent;
17+
display: none;
18+
z-index: 100;
19+
}
20+
.e-info{
21+
margin: 5px 5px 5px 0;
22+
}

0 commit comments

Comments
 (0)