Hi Bingxueyinlian,
Thanks for contacting Syncfusion support.
We found that you forgot to inject the VirtualScroll module in your component by analyzing your code example. This is the cause of the reported problem.
To use virtualization, you need to inject VirtualScroll module in
the provide section.
Row virtualization allows you to load and render rows only
in content viewport. It is an alternative way of paging in which the data will
load while scrolling vertically. To setup the row virtualization, you need to
define enableVirtualization as true and content height
by height property.
|
[App.vue]
<template>
<div class="col-lg-12
control-section">
<div>
<div
class="control-section">
<ejs-grid
ref="grid"
:dataSource="data"
:enableVirtualization="true"
:allowGrouping='true'
:allowSorting='false'
:groupSettings='groupOptions'
:pageSettings='pageOptions'
height='500'
>
</ejs-grid>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { GridPlugin, Group, Page, Sort, VirtualScroll } from
'@syncfusion/ej2-vue-grids';
Vue.use(GridPlugin);
export default Vue.extend({
data: function () {
return {
data: data,
};
},
provide: {
grid: [VirtualScroll, Group, Page, Sort],
},
});
</script>
|
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue_grid_virtualscroll1462064029.zip
Please get back to us if you need further assistance with
this.
Regards,
Rajapandiyan S
