<script type="text/javascript">
jQuery(function ($) {
$("#Grid").ejGrid({
//The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
dataSource: [],
toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
allowPaging: false,
columns: [
{ field: "ID", isPrimaryKey: true, headerText: "ID" },
{ field: "Country", foreignKeyField: "Id", foreignKeyValue: "Name", headerText: "Country", dataSource: locations, editType: "dropdownedit" },
{ field: "Company", foreignKeyField: "Id", foreignKeyValue: "Name", headerText: "Company", dataSource: companies, editType: "dropdownedit" }
],
actionComplete: function (args) {
if (args.requestType === 'add' || args.requestType === 'beginedit') {
$('#GridCountry').ejDropDownList({
dataSource: locations,
fields: { text: "Name", value: "Id" },
watermarkText: 'Select country',
enableFilterSearch: true,
width: '100%'
});
$('#GridCompany').ejDropDownList({
dataSource: companies,
fields: { text: "Name", value: "Id" },
watermarkText: 'Select company',
enableFilterSearch: true,
width: '100%'
});
if (args.requestType == "beginedit") {
var loc = locations.find(c=>c.Id == args.rowData.Country);
var com = companies.find(c=>c.Id == args.rowData.Company);
$('#GridCountry').ejDropDownList("selectItemByValue", com.Id);
$('#GridCompany').ejDropDownList("selectItemByValue", com.Id);
}
}
}
});
});
</script> |