Hi Bill Naples,
Thanks for contacting Syncfusion support.
We have checked your sample and found that you have changed the Grid component height dynamically in your Grid application. By default, in our EJ2 Grid the virtualScroll feature will work based on the Grid component height and pageSize.
So, when you change the Grid component height as 500, the default pageSize 12 will be very small to show the current page records in the changed height. So, load the records without any white space, we suggest you set the a large amount of pageSize as per the height of the Grid component. For your convenience, we have attached the sample, please refer them for your reference.
Code Example:
|
App.vue
<template>
<div>
<ejs-grid
ref="grid"
:columns="columns"
:dataSource="rows"
:enableVirtualization="true"
:allowResizing="true"
:height="height"
:pageSettings="pageSettings"
/>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Resize, VirtualScroll } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
name: "Grid",
data() {
return {
height: 200,
pageSettings: { pageSize: 30 }, set the pageSize as per the height
rows: [...Array(55550).keys()].map((index) => ({
name: "John Doe",
location: "London",
purchase: 5,
})),
};
},
computed: {
columns() {
return [
{
field: "name",
headerText: "Name",
},
{
field: "location",
headerText: "Location",
},
{
field: "purchase",
headerText: "Purchase",
},
];
},
},
provide: {
grid: [Resize, VirtualScroll],
},
mounted() {
setTimeout(() => {
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
grid.height = 500;
}, 1000);
},
};
</script> |
Please get back to us if you need further assistance.
Regards,
Ajith G.
