Skip to content

Commit 5799fd6

Browse files
author
pipeline
committed
feature(EJ2-3757): Virtual scrolling sample updated.
1 parent 23d10f0 commit 5799fd6

File tree

7 files changed

+77
-62
lines changed

7 files changed

+77
-62
lines changed

‎src/grid/hierarchy.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@
2828
<p style="font-weight: 500">Injecting Module</p>
2929
<p>
3030
Grid features are segregated into individual feature-wise modules.
31-
To use Hierarchy Grid feature, we need to inject <code>DetailRow</code> using the <code>Grid.Inject(DetailRow)</code> section.
31+
To use Hierarchy Grid feature, we need to inject <code>DetailRowService</code> into the <code>@NgModule.providers</code> section.
3232
</p>
3333
</div>

‎src/grid/rowtemplate-plnkr.json‎

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

‎src/grid/rowtemplate.html‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ej-grid #grid [dataSource]='data' height=335 width='auto'>
33
<e-columns>
44
<e-column field='Employee Image' headerText='Employee Image' width='150' textAlign='center'></e-column>
5-
<e-column field='Employee Details' headerText='Employee Details' width='300' textAling='left'></e-column>
5+
<e-column field='Employee Details' headerText='Employee Details' width='300' textAlign='left'></e-column>
66
</e-columns>
77
<ng-template #rowTemplate let-data>
88
<tr>
@@ -25,23 +25,17 @@
2525
<td>{{data.LastName}} </td>
2626
</tr>
2727
<tr>
28-
<td class="CardHeader">Title
29-
</td>
28+
<td class="CardHeader">Title</td>
3029

31-
<td>{{data.Title}}
32-
</td>
30+
<td>{{data.Title}}</td>
3331
</tr>
3432
<tr>
35-
<td class="CardHeader">Birth Date
36-
</td>
37-
<td>{{format(data.BirthDate)}}
38-
</td>
33+
<td class="CardHeader">Birth Date</td>
34+
<td>{{format(data.BirthDate)}}</td>
3935
</tr>
4036
<tr>
41-
<td class="CardHeader">Hire Date
42-
</td>
43-
<td>{{format(data.HireDate)}}
44-
</td>
37+
<td class="CardHeader">Hire Date</td>
38+
<td>{{format(data.HireDate)}}</td>
4539
</tr>
4640
</tbody>
4741
</table>

‎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: 47 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,53 +15,63 @@ export class VirtualizationComponent implements OnInit {
1515

1616
@ViewChild('grid')
1717
public grid: GridComponent;
18-
public ngOnInit(): void {}
18+
public date1: number;
19+
public date2: number;
20+
public flag: boolean = true;
21+
public ngOnInit(): void { }
1922

2023
onClick = (args: any) => {
21-
for (let i: number = 0; i < 100000; i++) {
22-
if (!this.virtualData.length){
23-
this.show();
24+
this.show();
25+
if (!this.virtualData.length) {
26+
for (let i: number = 0; i < 100000; i++) {
27+
this.virtualData.push({
28+
'FIELD1': this.names[Math.floor(Math.random() * this.names.length)],
29+
'FIELD2': 1967 + (i % 10),
30+
'FIELD3': Math.floor(Math.random() * 200),
31+
'FIELD4': Math.floor(Math.random() * 100),
32+
'FIELD5': Math.floor(Math.random() * 2000),
33+
'FIELD6': Math.floor(Math.random() * 1000),
34+
'FIELD7': Math.floor(Math.random() * 100),
35+
'FIELD8': Math.floor(Math.random() * 10),
36+
'FIELD9': Math.floor(Math.random() * 10),
37+
'FIELD10': Math.floor(Math.random() * 100),
38+
'FIELD11': Math.floor(Math.random() * 100),
39+
'FIELD12': Math.floor(Math.random() * 1000),
40+
'FIELD13': Math.floor(Math.random() * 10),
41+
'FIELD14': Math.floor(Math.random() * 10),
42+
'FIELD15': Math.floor(Math.random() * 1000),
43+
'FIELD16': Math.floor(Math.random() * 200),
44+
'FIELD17': Math.floor(Math.random() * 300),
45+
'FIELD18': Math.floor(Math.random() * 400),
46+
'FIELD19': Math.floor(Math.random() * 500),
47+
'FIELD20': Math.floor(Math.random() * 700),
48+
'FIELD21': Math.floor(Math.random() * 800),
49+
'FIELD22': Math.floor(Math.random() * 1000),
50+
'FIELD23': Math.floor(Math.random() * 2000),
51+
'FIELD24': Math.floor(Math.random() * 150),
52+
'FIELD25': Math.floor(Math.random() * 1000),
53+
'FIELD26': Math.floor(Math.random() * 100),
54+
'FIELD27': Math.floor(Math.random() * 400),
55+
'FIELD28': Math.floor(Math.random() * 600),
56+
'FIELD29': Math.floor(Math.random() * 500),
57+
'FIELD30': Math.floor(Math.random() * 300),
58+
});
2459
}
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),
56-
});
60+
this.grid.dataSource = this.virtualData;
5761
}
58-
this.grid.dataSource = this.virtualData;
62+
this.flag = true;
63+
this.date1 = new Date().getTime();
5964
this.grid.refresh();
6065
}
6166
show(): void {
6267
document.getElementById('popup').style.display = 'inline-block';
6368
}
6469
hide(): void {
70+
if (this.flag && this.date1) {
71+
this.date2 = new Date().getTime();
72+
document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (this.date2 - this.date1) + 'ms';
73+
this.flag = false;
74+
}
6575
document.getElementById('popup').style.display = 'none';
6676
}
6777
}

‎src/grid/virtualization.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<div class="control-section">
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>
1+
<div class="control-section">
2+
<div class='div-button'>
3+
<button ej-button (click)='onClick($event)' cssClass='e-info'>Load 100K Data</button>
4+
<span id="popup">
5+
<span id="gif" class="image"></span>
6+
</span>
7+
<span id="performanceTime">Time Taken: 0 ms</span>
8+
</div>
69
<ej-grid #grid [dataSource]='virtualData' [enableVirtualization]='true' [enableColumnVirtualization]='true' height='600' (dataBound)='hide()'>
710
<e-columns>
811
<e-column field='FIELD1' headerText='Player Name' width='120'></e-column>

‎src/grid/virtualization.style.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
background-image: url('src/grid/images/spinner.gif');
55
background-position: center;
66
width: 16px;
7-
height: 35px;
7+
height: 28px;
88
}
99

1010
.e-bigger .image {
11-
height: 48px;
11+
height: 36px;
1212
}
1313

1414
#popup {
@@ -17,6 +17,14 @@
1717
display: none;
1818
z-index: 100;
1919
}
20-
.e-info{
21-
margin: 5px 5px 5px 0;
20+
.div-button{
21+
margin: 5px 0;
22+
}
23+
#performanceTime {
24+
float: right;
25+
margin-top: 3px;
26+
}
27+
28+
.e-bigger #performanceTime{
29+
margin-top: 8px;
2230
}

0 commit comments

Comments
 (0)