We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
[index.js]
<template>
<div id="app">
<ejs-grid
id="Grid"
ref="grid"
:dataSource="data"
:dataBound="dataBound"
:allowPaging="true"
:editSettings="editSettings"
:toolbar="toolbar"
:actionComplete="actionComplete"
></ejs-grid>
</div>
</template>
<script>
. . . .
import { Dialog } from "@syncfusion/ej2-popups";
import { DatePicker } from "@syncfusion/ej2-calendars";
import { TextBox, NumericTextBox} from "@syncfusion/ej2-inputs";
Vue.use(GridPlugin);
export default {
data() {
return {
data: customData,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: "Dialog",
template: function() {
return {
template: Vue.component("todo-item", {
template: `<div formGroup="orderForm">
</div>`,
data() {
return {
data: {}
};
}
})
};
}
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"]
};
},
provide: {
grid: [Page, Filter, Toolbar, Edit]
},
methods: {
dataBound: function(args) {
this.$refs.grid.ej2Instances.columns[0].isPrimaryKey = true; //Need to define primarykey column in unique column of Grid
},
actionComplete: function(args) {
if (args.requestType === "beginEdit" || args.requestType === "add") {
var columns = this.$refs.grid.ej2Instances.columns;
for (var i = 0; i < columns.length; i++) {
// Here, column type based to create input Element
var divEle = document.createElement("div");
divEle.className = "form-group";
var InputEle = document.createElement("input");
InputEle.name = columns[i].field;
InputEle.id = columns[i].field;
InputEle.type = "text";
if (columns[i].isPrimaryKey && args.requestType === "beginEdit") {
InputEle.disabled = columns[i].isPrimaryKey;
}
var label = document.createElement("label");
label.innerHTML = columns[i].field;
divEle.appendChild(label);
divEle.appendChild(InputEle);
args.form.appendChild(divEle);
}
for (var j = 0; j < columns.length; j++) {
//Here, column type based to bind input components
switch (columns[j].type) {
case "number":
var numberEle = new NumericTextBox({
value: args.rowData[columns[j].field]
});
numberEle.appendTo("#" + columns[j].field);
break;
case "string":
var stringEle = new TextBox({
value: args.rowData[columns[j].field]
});
stringEle.appendTo("#" + columns[j].field);
break;
case "datetime":
var dateEle = new DatePicker({
value: args.rowData[columns[j].field]
});
dateEle.appendTo("#" + columns[j].field);
break;
default:
break;
}
}
}
if (args.requestType === "beginEdit") {
args.form.elements.namedItem("CustomerID").focus();
}
}
}
}; |
