<ejs-grid id="ConfiguracionPACGrid" dataSource="ViewBag.data" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">
<e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Normal" showConfirmDialog="true"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" isPrimaryKey="true" visible="false"></e-grid-column>
<e-grid-column field="CustomerID" headerText="cfdiID" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="90"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="180"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" width="180"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="180"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var elem;
var dObj;
function create(args) {
elem = document.createElement('input');
return elem;
}
function write(args) {
dObj = new ej.dropdowns.AutoComplete({
dataSource: @Html.Raw(Json.Serialize(ViewBag.data)),
fields: { value: 'CustomerID' },
value: args.rowData[args.column.field],
change: (e) => {
console.log(e.value); // you can get the changed value in autocomplete
// send the AJAX here and from the returned value you can modify the fields value as below
//”#”+Grid ID+”Field name”
document.querySelector("#ConfiguracionPACGridShipCity").value = "Updated";
document.querySelector("#ConfiguracionPACGridFreight").value = 3;
document.querySelector("#ConfiguracionPACGridShipCountry").value = "Updated";
}
});
dObj.appendTo(elem);
}
function destroy() {
dObj.destroy();
}
function read(args) {
return dObj.value;
}
</script> |