|
<template>
<div id="app">
<div>
<ejs-grid
ref="grid"
:dataSource="data"
:allowSorting="true"
:toolbar="toolbar"
:allowPdfExport="true"
height="273px"
id="grid"
>
<e-columns>
<e-column
field="CaseID"
headerText="Order ID"
:isPrimaryKey="true"
width="100"
></e-column>
<e-column
field="Freight"
headerText="Freight"
allowGrouping="false"
width="120"
format="C2"
textAlign="Right"
></e-column>
. . . . . . .
. . . . . . .
</e-columns>
</ejs-grid>
</div>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
Toolbar,
Edit,
Sort,
Resize,
Reorder,
ColumnMenu,
ColumnChooser,
PdfExport,
} from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(GridPlugin);
export default {
name: "App",
data: () => {
return {
data: [
{
Market: "Atlanta",
Freight: 32.38,
. . . . . . . . .
}
],
formatOptions: { type: "date", format: "M/d/y" },
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Normal",
},
},
methods: {
clickHandler: function (args) {
if (args.item.id === "savebutton") {
this.$refs.grid.endEdit();
}
if (args.item.text === "PDF Export") {
this.$refs.grid.pdfExport();
}
},
},
provide: {
grid: [
Toolbar,
Edit,
Sort,
Resize,
PdfExport,
Reorder,
ColumnMenu,
ColumnChooser,
],
},
};
</script> |