How to pass JQ Grid hidden table data to controller while deleting

How to pass JQ Grid hidden table data to controller while deleting

I am new to JQ grid i just started exploring it. I tried with the below
stuff's and I was stuck while deleting the records. I have hided the
application ID column and if I press delete button in navGrid I need to
pass AppID as the parameter to Controller. I tried but I am getting null
value. I logged the postdata in that i am getting value for id(id=10)
only. Instead of id i need to pass the AppID. Any help would be
appreciated.
View Page:
<div id="JqGridExampleContainer">
<table id="ApplicationDetailsTable">
</table>
<div id="JQGridPaging"></div>
</div>
Script:
function showJQGrid() {
$("#ApplicationDetailsTable").jqGrid({
width: 800,
height: '100%',
url: '@Url.Action("AppListDetails", "JQGridHome")',
datatype: 'json',
mtype: "GET",
colNames: ["Application ID", "TenantId", "Application Name",
"Actions","Inbuild Actions"],
colModel: [
{ name: 'AppId', index: 'AppId', hidden: true },
{ name: 'TenantId', index: 'TenantId', resizable: true, align:
'center', title: false, sortable: true, searchoptions: { sopt:
['eq', 'ne', 'le', 'lt', 'gt', 'ge'] }, searchtype: "number"
},
{ name: 'AppName', index: 'AppName', sortable: true },
{ name: 'Actions', sortable: false, search: false, fixed:
true,align:'center',
formatter: function () {
return "<img src='../../Images/edit-icon.png'
alt='Edit' id='editID'
style='margin-left:12px;height:18px;width:18px;cursor:pointer;'
/><img src='../../Images/Trash-can-icon.png'
alt='Edit'
id='deleteID'style='margin-left:12px;height:18px;width:18px;cursor:pointer;'
onclick='deleteApplication()' />";
}
},
{ name: 'myac', width: 80, fixed: true, resizable: false,
sortable: false, search: false, resize: false, formatter:
'actions',
formatoptions: { keys: true}
},
],
rowNum: 10,
rowList: [5, 10, 20, 30],
pager: '#JQGridPaging',
viewrecords: true,
caption: "Application List Details",
sortname: "TenantId",
sortorder: "asc",
altRows: true,
altclass: 'jqgaltrow',
hoverrows: true,
loadonce: true,
gridview: false,
rownumWidth: 40,
rownumbers: true,
multiSort: true,
hidegrid: true,
toppager: false,
pgbuttons: true,
jsonReader: {
root: 'AllApplicationList',
},
shrinkToFit: true,
emptyrecords: "No records to view",
loadtext:'Loading Data please wait ...'
});
jQuery("#ApplicationDetailsTable").jqGrid('filterToolbar', {
searchOperators: false,searchOnEnter: false, });
$("#ApplicationDetailsTable").jqGrid('navGrid', '#JQGridPaging',
{
refresh: false, add: false, edit: false, del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete",
deltitle: "Delete Application",
refreshtext: "Refresh",
position: 'left'
},
{},
{},
{
mtype: "POST",
reloadAfterSubmit: true,
url: '@Url.Action("DeleteApplicationDetails",
"JQGridHome")',
resize: false,
closeOnEscape: true,
drag: false,
ajaxDelOptions: { contentType: 'application/json;
charset=utf-8' },
serializeDelData: function (postdata) {
alert(postdata);
console.log(postdata);
return JSON.stringify({ AppId: postdata.id });
}
},
{ sopt: ['eq', 'cn', 'lt', 'le', 'bw', 'bn', 'in'],
closeOnEscape: true, multipleSearch: true, overlay: true,
width: 460, closeAfterSearch: true }
);
}
$(document).ready(function () {
showJQGrid();
});
JSON Response From Server Side:
{"AllApplicationList":[{"AppId":1004,"TenantId":1,"AppName":"Sensiple IT
Help Desk"}, {"AppId":2000,"TenantId":1,"AppName":"HR Help Desk"},
{"AppId":3000,"TenantId":1,"AppName":"Admin Desk"},
{"AppId":4000,"TenantId":1,"AppName":"Transport Facility"},
{"AppId":5000,"TenantId":2,"AppName":"Security Services"},
{"AppId":6000,"TenantId":5,"AppName":"Premises"},{"AppId":6001,"TenantId":8,"AppName":"Head
Office"},{"AppId":6002,"TenantId":14,"AppName":"Ticket Incident"},
{"AppId":6003,"TenantId":14,"AppName":"Food Service"},
{"AppId":6005,"TenantId":14,"AppName":"Cleaning Service"}]}
Image: