JQGrid edit foreign key value using drop down

I have a JQGrid in my .net core 2.0 project for the state class which is having a foreign key reference of Country class. But when I am saving the countryId column always 0.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
</script>
<script src="~/js/grid.locale-en.js"></script>
<script src="~/js/jquery.jqGrid.min.js"></script>

<link href="~/css/ui.jqgrid-bootstrap4.css" rel="stylesheet" />
<link href="~/css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet" />*@
<link href="~/css/jquery-ui.css" rel="stylesheet" />
<link href="~/css/ui.jqgrid.css" rel="stylesheet" />
<table id="list-student" style="color:black !important" class="table table-dark"></table>
<div id="pager"></div>
<script>
var data = $.ajax({
url: '/Admin/GetAllCountries', async: false, success: function (data, result) { if (!result) alert('Failure to retrieve the Alert related lookup data.'); }
}).responseJSON;
var lookupData = data;
var listingCountry = lookupData;
debugger;
var catList = '{';
$(lookupData).each(function () {
debugger;
catList += this.countryid + ':' + this.countryName + ';';
});
catList += '}';

$('#list-student').jqGrid({
url: '/Admin/GetState',
datatype: 'json',
colNames: ['Id', 'Country', 'State', 'Status'],
colModel: [
{ name: 'id', index: 'Id', editable: false, width: 100, key: true, hidden: true },
{ name: 'country.countryName', index: 'country.countryid ', editable: true, width: 100, hidden: false, edittype: "select", type: 'select', editrules: { required: true }, editoptions: { value: catList } },
{ name: 'name', index: 'name', editable: true, width: 300 },
{ name: 'status', index: 'status', editable: false, width: 240, hidden: true }

],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
rowNum: 10,
rowList: [1, 2, 3],
pager: '#pager',
sortname: 'name',
sortorder: 'asc',
footerrow: true,
viewrecords: true,
height: 'auto',
width: 'auto',
sortorder: 'asc',
loadonce: false,
shrinkToFit: true,
emptyrecords: 'No records',
caption: 'List of States',
grouping: true,
loadComplete: function () {

},
//groupingView: { groupField: ['countryId'], groupSummary: [true], groupColumnShow: [true], groupText: ['<b>{0}</b>'], groupCollapse: true, groupOrder: ['asc'] },
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true, closeAfterSearch: true },
{
zIndex: 100,
url: '/Admin/EditState',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{

url: "/Admin/CreateState",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
zIndex: 100,
url: "/Student/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete Student... ? ",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
</script>


The dropdown for the country works fine. Here is the screenshot of the drop down. It is binding the data correctly Country DropDown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.