<div id="Grid"></div>
<script type="text/javascript">
$(function () {
var gridData = [
{ ID: 1, OrderID: 10248, EmployeeName: "JOHN", CustomerID: "VINET" },
. .. .
{ ID: 9, OrderID: 10256, EmployeeName: "JOHN1", CustomerID: "VINET" }
]
$("#Grid").ejGrid({
. . . .
columns: [
{ field: "ID", isPrimaryKey: true },
{ field: "OrderID", editType: "dropdownedit" },
{
field: "EmployeeName",
editTemplate: {
create: function () {
return "<input>";
},
read: function (args) {
args.ejAutocomplete('suggestionList').css('display', 'none');
return args.ejAutocomplete("getValue");
},
write: function (args) {
var data = ej.DataManager(gridData).executeLocal(new ej.Query().select("EmployeeName"));
args.element.ejAutocomplete({ dataSource: data, value: args.rowdata !== undefined ? args.rowdata["EmployeeName"] : "" });
}
}
},
{ field: "CustomerID" }
],
actionComplete: function (args) {
if (args.requestType == 'beginedit' || args.requestType == 'add') {
$("#GridOrderID").ejDropDownList({//Grid’ ID + field name
change: function (args) {
$("#Grid").ejWaitingPopup("show")//show popup
$.ajax({
type: "POST",
url: "/Home/autoCompleteData",
data: { gridObj: args.selectedText },//pass the grid model
dataType: "json",
success: function (response) {
$("#Grid").ejWaitingPopup("hide")//hide popup
$("#GridEmployeeName").ejAutocomplete({
dataSource: response,
fields: { text: "FirstName", key: "EmployeeID" },
select: function (args) {
if (args.key < 5) $("#GridCustomerID").val("VINET");
else $("#GridCustomerID").val("ALFGH");
}
});
},
error: function (Result) {
$("#Grid").ejWaitingPopup("hide")//hide popup
//Result.responseText => get the response message
alert(Result.statusText);
}
});
}
})
}
},
});
}); |