|
[App.Vue]
<template>
<div id="app">
. . . .
<div>Grid 2</div>
<ejs-grid
ref="grid2"
:dataSource="data"
height="400px"
:toolbar="toolbarTemplate"
:toolbarClick="clickHandler"
:allowExcelExport="true"
:allowPdfExport="true"
:allowGrouping="true"
:groupSettings="groupOptions"
>
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="150"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="150"></e-column>
<e-column field="ShipName" headerText="Ship Name" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { PdfExport,ExcelExport,parentsUntil} from "@syncfusion/ej2-vue-grids";
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(GridPlugin);
Vue.use(ToolbarPlugin);
Vue.use(ComboBoxPlugin);
});
export default {
data() {
return {
data: orderDetails.slice(0),
groupOptions: { columns: ["CustomerID", "ShipCity"] },
editSettings: {
showDeleteConfirmDialog: true,
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Dialog"
},
toolbar: [
"Add",
"Print",
"Search",
"ExcelExport",
"PdfExport",
"CsvExport"
],
toolbarTemplate: [
{
template: function() {
return {
template: Vue.component("custom-toolbar", {
template: `<ejs-toolbar >
<e-items>
<e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'></e-item>
<e-item id='collapse1' text='Collapse Out' prefixIcon='e-collapse'></e-item>
<e-item id="comboboxTemp" :template='vueTemplate'></e-item>
</e-items>
</ejs-toolbar>`,
data: function() {
return {
vueTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: `<div class= 'content'><ejs-combobox id='cTemplate' :dataSource='CBData' :placeholder='waterMark' :select='CBSelectAction'></ejs-combobox></div>`,
data: function() {
return {
data: {},
waterMark: "Select Export option",
CBData: [
"Excel Export",
"PDF Export",
"CSV Export"
]
};
},
methods: {
CBSelectAction(args) {
var gridInstance = parentsUntil(
this.$el,
"e-grid"
).ej2_instances[0];
if (args.itemData.value === "Excel Export") {
gridInstance.excelExport();
} else if (args.itemData.value === "PDF Export") {
gridInstance.pdfExport();
} else if (args.itemData.value === "CSV Export") {
gridInstance.csvExport();
}
}
}
})
};
}
};
}
})
};
}
}
]
};
},
methods: {
. . . .
},
provide: {
. . . .
}
};
</script>
<style>
</style>
| 
