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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
[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();
}
}
}
}; |
