|
new Vue({
el: '#app',
template: `
<div id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :toolbar='toolbar' :toolbarClick='toolbarClick'
:allowExcelExport='true' :allowPdfExport='true' height='315px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' width=90></e-column>
<e-column field='ShipCity' headerText='Ship City' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
`,
data() {
return {
data: data.slice(0,20),
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport']
};
},
methods: {
toolbarClick: function(args) {
switch (args.item.text) {
case 'PDF Export':
this.$refs.grid.pdfExport({fileName:"new.pdf"});
break;
case 'Excel Export':
this.$refs.grid.excelExport({fileName:"new.xlsx" });
break;
case 'CSV Export':
this.$refs.grid.csvExport({fileName:"new.csv"});
break;
}
}
},
provide: {
grid: [PdfExport, ExcelExport ,Toolbar, page]
}
}); | 
