|
<template>
<div id="app">
<ejs-grid
ref="grid"
:dataSource="data"
:toolbar="Toolbar"
allowPaging="true"
:editSettings="editSettings"
>
<e-columns>
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { L10n, setCulture } from "@syncfusion/ej2-base";
Vue.use(GridPlugin);
// changing the label of the buttons
L10n.load({
"en-US": {
grid: {
SaveButton: "Allow",
CancelButton: "Deny",
},
},
});
export default Vue.extend({
data: () => {
return {
data: gridData,
wrapSettings: { wrapMode: "Content" },
customAttributes: { class: "customcss" },
pageSettings: { pageSize: 5 },
Toolbar: ["Add", "Delete", "Edit"],
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Dialog",
template: function () {
. . .
};
},
methods: {},
provide: {
grid: [Edit, Page, Toolbar, ContextMenu],
},
});
</script>
<style>
.e-footer-content button.e-control.e-btn.e-lib.e-primary.e-flat {
background: blanchedalmond;
color: green;
}
.e-footer-content button.e-control.e-btn.e-lib.e-flat {
color: red;
}
</style> |
