Grid allows you to load large amount of data without performance degradation.
Row virtualization allows you to load and render rows only in the content viewport. It is an alternative way of paging in which the data will be loaded while scrolling vertically. To setup the row virtualization, you need to define
EnableVirtualization
as true and content height by Height
property.
The number of records displayed in the Grid is determined implicitly by height of the content area. Also, you have an option to define a visible number of records by
the PageSettings.PageSize
property. The loaded data will be cached and reused when it is needed for next time.
@Html.EJS().Grid("VirtualGrid").DataBound("hide").EnableVirtualization().Height("500").Columns(col =>
{
col.Field("Field1").HeaderText("PlayerName").Width("140").Add();
col.Field("Field2").HeaderText("Year").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field3").HeaderText("Stint").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field4").HeaderText("TMID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field5").HeaderText("LGID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Render()
<script>
var virtualData = [], date1=null, date2=null, flag= true;
var names = ['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', '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'];
document.getElementById("generate").addEventListener('click', () => {
var grid = document.getElementById("VirtualGrid").ej2_instances[0]
if (!virtualData.length) {
show();
dataSource();
date1 = new Date().getTime();
grid.dataSource = virtualData;
} else {
flag = true;
show();
date1 = new Date().getTime();
grid.refresh();
}
})
function show() {
document.getElementById('popup').style.display = 'inline-block';
}
function hide(args) {
if (flag && date1) {
var date2 = new Date().getTime();
document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (date2 - date1) + 'ms';
flag = false;
}
document.getElementById('popup').style.display = 'none';
}
function dataSource() {
for (var i= 0; i < 100000; i++) {
virtualData.push({
'Field1': names[Math.floor(Math.random() * names.length)],
'Field2': 1967 + (i % 10),
'Field3': Math.floor(Math.random() * 200),
'Field4': Math.floor(Math.random() * 100),
'Field5': Math.floor(Math.random() * 2000),
});
}
}
</script>
public IActionResult Index()
{
return View();
}
Column virtualization allows you to virtualize columns. It will render columns which are in the viewport. You can scroll horizontally to view more columns.
To setup the column virtualization, set the
EnableVirtualization
and
EnableColumnVirtualization
properties as true
.
@Html.EJS().Grid("VirtualGrid").DataBound("hide").EnableColumnVirtualization().EnableVirtualization().Height("500").Columns(col =>
{
col.Field("Field1").HeaderText("PlayerName").Width("140").Add();
col.Field("Field2").HeaderText("Year").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field3").HeaderText("Stint").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field4").HeaderText("TMID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field5").HeaderText("LGID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field6").HeaderText("GP").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field7").HeaderText("GS").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field8").HeaderText("Minutes").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field9").HeaderText("Points").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field10").HeaderText("oRebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field11").HeaderText("dRebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field12").HeaderText("Rebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field13").HeaderText("Assists").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field14").HeaderText("Steals").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field15").HeaderText("Blocks").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field16").HeaderText("Turnovers").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field17").HeaderText("PF").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field18").HeaderText("fgAttempted").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field19").HeaderText("fgMade").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field20").HeaderText("ftAttempted").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field21").HeaderText("ftMade").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field22").HeaderText("ThreeAttempted").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field23").HeaderText("ThreeMade").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field24").HeaderText("PostGP").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field25").HeaderText("PostGS").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field26").HeaderText("PostMinutes").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field27").HeaderText("PostPoints").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field28").HeaderText("PostoRebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field29").HeaderText("PostdRebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Field30").HeaderText("PostRebounds").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Render()
<script>
var virtualData = [], date1=null, date2=null, flag= true;
var names = ['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', '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'];
document.getElementById("generate").addEventListener('click', () => {
var grid = document.getElementById("VirtualGrid").ej2_instances[0]
if (!virtualData.length) {
show();
dataSource();
date1 = new Date().getTime();
grid.dataSource = virtualData;
} else {
flag = true;
show();
date1 = new Date().getTime();
grid.refresh();
}
})
function show() {
document.getElementById('popup').style.display = 'inline-block';
}
function hide(args) {
if (flag && date1) {
var date2 = new Date().getTime();
document.getElementById('performanceTime').innerHTML = 'Time Taken: ' + (date2 - date1) + 'ms';
flag = false;
}
document.getElementById('popup').style.display = 'none';
}
function dataSource() {
for (var i= 0; i < 100000; i++) {
virtualData.push({
'Field1': names[Math.floor(Math.random() * names.length)],
'Field2': 1967 + (i % 10),
'Field3': Math.floor(Math.random() * 200),
'Field4': Math.floor(Math.random() * 100),
'Field5': Math.floor(Math.random() * 2000),
'Field6': Math.floor(Math.random() * 1000),
'Field7': Math.floor(Math.random() * 100),
'Field8': Math.floor(Math.random() * 10),
'Field9': Math.floor(Math.random() * 10),
'Field10': Math.floor(Math.random() * 100),
'Field11': Math.floor(Math.random() * 100),
'Field12': Math.floor(Math.random() * 1000),
'Field13': Math.floor(Math.random() * 10),
'Field14': Math.floor(Math.random() * 10),
'Field15': Math.floor(Math.random() * 1000),
'Field16': Math.floor(Math.random() * 200),
'Field17': Math.floor(Math.random() * 300),
'Field18': Math.floor(Math.random() * 400),
'Field19': Math.floor(Math.random() * 500),
'Field20': Math.floor(Math.random() * 700),
'Field21': Math.floor(Math.random() * 800),
'Field22': Math.floor(Math.random() * 1000),
'Field23': Math.floor(Math.random() * 2000),
'Field24': Math.floor(Math.random() * 150),
'Field25': Math.floor(Math.random() * 1000),
'Field26': Math.floor(Math.random() * 100),
'Field27': Math.floor(Math.random() * 400),
'Field28': Math.floor(Math.random() * 600),
'Field29': Math.floor(Math.random() * 500),
'Field30': Math.floor(Math.random() * 300),
});
}
}
</script>
Column’s
Width
is required for column virtualization. If column’s width is not defined then Grid will consider its value as200px
.
Both the row and column virtualization can be used along with grouping. At initial rendering, the virtual height of scrollbar will be set based on the total number of records and after grouping, it will be refreshed based on the grouped state(expand/collapse). While collapse the group caption row in current viewport then the next view page grouped records are shown.
The collapsed/expanded state will persist only for local dataSource while scrolling.
Group with Page
topic..e-grid .e-row {
height: 2em;
}
selectRows
method is not supported in virtual scrolling.