Hi,
As the data show in data grid will be huge, we use virtualization feature in data grid, the client side only get the data need to refresh when "virtualscroll" begin, the total records around 20000, each time we get 50 record from server in the show datagrid show window, but when we try to export grid data to execl file, nothing happen, we can not save to execl file, please help?
the code like below
<template>
<div class="col-lg-12 control-section">
<div class="content-wrapper">
<ejs-grid ref='refgrid'
width='100%'
height=200
rowHeight=30
:allowFiltering='false'
:allowSorting='true'
:allowResizing='true'
:enableVirtualization='true'
:allowExcelExport="true"
:frozenColumns=3
:pageSettings='pageSettings'
:actionBegin='actionBegin'
...
:columns = datasheetColumns
:dataSource="mapItemPageData" >
</ejs-grid>
</div>
</div>
</template>
<style>
</style>
<script>
//import Vue from "vue";
import { VirtualScroll, Sort, Filter, Resize, Freeze, Selection} from "@syncfusion/ej2-vue-grids";
export default {
name: "MyDataGrid",
props: {
},
watch:{
},
data(){
return {
pageSettings: {
pageSize: 50
},
mapItemPageData:{
result: [],
count: 0
},
datasheetColumns: []
};
},
methods: {
savetofile(){
this.$refs.gmapoverviewgrid.excelExport();
},
actionBegin: function(args) {
if (args.requestType == "virtualscroll") {
const curPage = args.virtualInfo.page;
const recordsToSkip = this.$refs.gmapoverviewgrid.ej2Instances.pageSettings.pageSize * (curPage - 1);
const recordsToTake = this.$refs.gmapoverviewgrid.ej2Instances.pageSettings.pageSize;
var self = this;
WebAPICall(recordsToSkip, recordsToTake, (totalnumber, showitemlist)=>{
self.mapItemPageData = {
result: showitemlist,
count: totalnumber
};
});
}
},
created(){
...Init columns and make a call
var self = this;
WebAPICall(0, 50, (totalnumber, showitemlist)=>{
self.mapItemPageData = {
result: showitemlist,
count: totalnumber
};
});
},
provide: {
grid: [Filter, Selection, Sort, Resize, Freeze, VirtualScroll]
}
};
</script>
