ej2 syncfusion doesn't save if I don't edit two times - asp.net-mvc

Question

I have a basic ej2 table structure as you can see the image below.
Table
If I click to edit very first time and save, it doesn't trigger the save button function on backend however If I comment foreign keys like this:
{ field: "IssuerId", headerText: 'Issuer', /* foreignKeyField: "IssuerId", foreignKeyValue: "IssuerName",dataSource: dataManagerIssuer, validationRules: { required: true } */},
it works
GIF Demonstration
GIF
I have been trying to solve this issue for 2 days but I couldn't come to fruition
$(function () {
var dataManager = ej.DataManager({
url: "/api/StockOrder",
adaptor: new ej.WebApiAdaptor(),
offline: true
});
var dataManagerIssuer = ej.DataManager({
url: "/api/Issuer",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerProduct = ej.DataManager({
url: "/api/Product",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerWarehouse = ej.DataManager({
url: "/api/Warehouse",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerStockOrderStatus = ej.DataManager({
url: "/api/StockOrder/GetStockOrderStatus",
adaptor: new ej.WebApiAdaptor()
});
var dataManagerStockOrderType= ej.DataManager({
url: "/api/StockOrder/GetStockOrderType",
adaptor: new ej.WebApiAdaptor()
});
dataManager.ready.done(function (e) {
$("#Grid").ejGrid({
dataSource: ej.DataManager({
json: e.result,
adaptor: new ej.remoteSaveAdaptor(),
insertUrl: "/api/StockOrder/Insert",
updateUrl: "/api/StockOrder/Update",
removeUrl: "/api/StockOrder/Remove",
}),
toolbarSettings: {
showToolbar: true,
toolbarItems: ["add", "edit", "delete", "update", "cancel", "search", "printGrid"]
},
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: false,
showDeleteConfirmDialog: false,
editMode: "dialog",
},
isResponsive: true,
enableResponsiveRow: true,
allowSorting: true,
allowSearching: true,
allowFiltering: true,
filterSettings: {
filterType: "excel",
maxFilterChoices: 100,
enableCaseSensitivity: false
},
allowPaging: true,
pageSettings: { pageSize: 10, printMode: ej.Grid.PrintMode.CurrentPage },
columns: [
{ headerText: 'Detail', template: "<a href='/StockOrder/Detail/{{:StockOrderId}}'>Detail</a>" },
{ field: "StockOrderId", headerText: 'SO Id', isPrimaryKey: true, isIdentity: true, visible: false },
{ field: "StockOrderUniqueId", headerText: 'Unique Id', },
{ field: "StockOrderName", headerText: 'Name',},
{ field: "ToProductId", headerText: 'ToProduct',visible:false},
{ field: "StockOrderTypeId", headerText: 'Stock Type', foreignKeyField: "StockOrderTypeId", foreignKeyValue: "StockOrderTypeName", dataSource: dataManagerStockOrderType , validationRules: { required: true } },
{ field: "IssuerId", headerText: 'Issuer', foreignKeyField: "IssuerId", foreignKeyValue: "IssuerName",dataSource: dataManagerIssuer, validationRules: { required: true } },
{ field: "ProductId", headerText: 'Product', foreignKeyField: "ProductId", foreignKeyValue: "ProductName", dataSource: dataManagerProduct, validationRules: { required: true } },
{ field: "WarehouseId", headerText: 'Warehouse', foreignKeyField: "WarehouseId", foreignKeyValue: "WarehouseName", dataSource: dataManagerWarehouse, validationRules: { required: true } },
{ field: "TotalAmount", headerText: 'Amount',},
{ field: "Remarks", headerText: 'Remarks',},
{ field: "StockOrderStatusId", headerText: 'Stock Status', foreignKeyField: "StockOrderStatusId", foreignKeyValue: "StockOrderStatusName", dataSource: dataManagerStockOrderStatus, validationRules: { required: true } },
],
actionComplete: "complete",
actionBegin: "begin",
});
});
});