Please note that I have tried almost all the solutions I could find on various questions already available on Stack Overflow but no solution has worked for me.
So please do not mark this as duplicate or down vote. Kindly assist with the situation given below:
I have a JQGrid which initially loads all the data from some table (SQL Db). There is an option to filter the data by selecting the values from drop down list. Changing the drop down list triggers an ajax call to the server which returns filtered data from the server (MVC Controller). However, when the data is returned from the Controller, the data is correct but it is not reflecting in the JQGrid. I have tried all different methods for triggering the reload of JQGrid but nothing works.
Razor View/JQuery code:
@model IEnumerable<OSMPortalV2.Models.NetworkCertsATC_SP>
<!-- widget content -->
<div class="widget-body fuelux">
<form name="networkCertficates">
<!-- widget div-->
@{
List<SelectListItem> ddlistItems = new List<SelectListItem>();
ddlistItems.Add(new SelectListItem { Text = "All Certificates", Value = "All", Selected = true });
ddlistItems.Add(new SelectListItem { Text = "1 Day", Value = "1Day" });
ddlistItems.Add(new SelectListItem { Text = "5 Days", Value = "5Days" });
ddlistItems.Add(new SelectListItem { Text = "15 Days", Value = "15Days" });
ddlistItems.Add(new SelectListItem { Text = "30 Days", Value = "30Days" });
}
<div style="padding-bottom: 10px;">
Show certificates expiring in: @Html.DropDownList("ddlTimeFrame", new SelectList(ddlistItems, "Value", "Text"))
@*<button type="submit" class="btn btn-sm btn-primary btn-prev" id="btnPrev">
<i class="fa fa-refresh"></i> Reload Grid
</button>*@
</div>
</form>
<div style="width: 100%; overflow: auto;">
<table id="jqgrid"></table>
<div id="pjqgrid"></div>
</div>
<br>
</div>
<!-- end widget content -->
<!-- Style for Grid data load -->
<style type="text/css">
.ui-jqgrid .loading {
background-image: url("../../Content/img/ajax-loader.gif");
border: 2px solid #706457;
background-repeat: no-repeat;
background-color: ghostwhite;
border-radius: 10px;
top: 20%;
min-height: 102px;
min-width: 102px;
}
</style>
<script src="~/Scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
/* Function to Get Profile Count */
$(document).ready(function () {
// Fronend UI Script
pageSetUp();
/* Function to Get Environment Details */
function GetEnvironment(ipAddress) {
}
var timeRange;
// Trigger reload Dropdown selection change event
$("#ddlTimeFrame").change(function () {
timeRange = $("#ddlTimeFrame option:selected").val();
// Callback operation to load filtered data
$.ajax({
type: 'GET',
contentType: "application/json",
url: '/Network/GetCertDetails',
data: {timeframe: timeRange},
success: function (returnedData) {
// This returns correct data but JQ Grid is not updated.
jQuery("#jqGrid").setGridParam({ datatype: 'json', data: returnedData }).trigger('reloadGrid');
var gridData = jQuery("#jqgrid").jqGrid('getRowData');
alert(gridData);
}
});
});
Date.prototype.addDays = function (days) {
this.setDate(this.getDate() + parseInt(days));
return this;
};
$.jgrid.defaults.loadtext = '';
jQuery("#jqgrid").jqGrid({
url: '/Network/GetCertDetails',
postData: {
timeframe: function () { return $("#ddlTimeFrame option:selected").val(); }
},
mtype: 'GET',
datatype: 'json',
height: 'auto',
colNames: ['Common Name', 'Certificate', 'Device', 'Expiry Date',
'Profile', 'Virtual', 'Partition', 'Pool',
'VIP', 'Virtual Port', 'Member Name', 'Member IP Address',
'Member Port', 'Environment', 'ATC Name', 'ATC Email ID'],
colModel: [
{ name: 'Common_Name', index: 'Common_Name', sortable: true, width: 200 },
{ name: 'Certificate', index: 'Certificate', sortable: true, width: 250 },
{ name: 'Device', index: 'Device', sortable: true },
{ name: 'Expiry_Date', index: 'Expiry_Date', formatter: 'date', formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y' }, sortable: true, align: "center"},
{ name: 'Profile', index: 'Profile', align: "left" },
{ name: 'Virtual', index: 'Virtual', align: "left" },
{ name: 'Partition', index: 'Partition', align: "left" },
{ name: 'Pool', index: 'Pool', align: "left" },
{ name: 'VIP', index: 'VIP', align: "left" },
{ name: 'Virtual_Port', index: 'Virtual_Port', align: "center", width: 90 },
{ name: 'Member_Name', index: 'Member_Name', align: "left" },
{ name: 'MemberIPAddress', index: 'MemberIPAddress', align: "left" },
{ name: 'Member_Port', index: 'Member_Port', align: "center", width: 90 },
{
name: 'MemberIPAddress', index: 'Environment', sortable: true, align: "left", formatter: function (cellvalue, options, rowObject) {
var IPAddress = cellvalue;
return GetEnvironment(IPAddress);
}
}, { name: 'ATCName', index: 'ATCName', align: "left" },
{ name: 'ATCEmail', index: 'ATCEmail', align: "left", width: 200 }
],
ajaxGridOptions: { cache: false },
autoencode: true,
autowidth: true,
beforeRefresh: function () {
grid.jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
},
caption: "Certificate Details",
emptyrecords: "No records to view",
gridview: true,
hoverrows: true,
ajaxGridOptions: { cache: false },
loadonce: true,
loadui: 'block',
multiboxonly: true,
multiselect: true,
pager: '#pjqgrid',
rowList: [15, 20, 30, 50],
rowNum: 15,
rownumbers: true,
sortname: 'srno',
sortorder: "asc",
toolbarfilter: true,
viewrecords: true
});
// Add Filter on top of the column
jQuery("#jqgrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
// Adding pagination
jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
edit: false,
add: false,
del: false,
reloadGridOptions: { fromServer: true },
refreshstate: "current"
});
});
$(window).on('resize.jqGrid', function () {
$("#jqgrid").jqGrid('setGridWidth', $("#content").width());
});
</script>
MVC Controller code:
public ActionResult GetCertDetails(string timeframe, string ddlTimeFrame)
{
using (NetworkAutomationContext NAC = new NetworkAutomationContext())
{
List<NetworkCertsATC_SP> results = new List<NetworkCertsATC_SP>();
try
{
if (timeframe != null)
ViewData["TimeFrame"] = timeframe;
else
ViewData["TimeFrame"] = "All";
// Fetch Grid data filtered according to time frame
DateTime ExpiryDate = DateTime.Now.Date;
switch (timeframe)
{
case "All":
results = NAC.NetworkCMDB_Certss.ToList();
break;
case "1Day":
ExpiryDate = ExpiryDate.AddDays(1);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "5Days":
ExpiryDate = ExpiryDate.AddDays(5);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "15Days":
ExpiryDate = ExpiryDate.AddDays(15);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
case "30Days":
ExpiryDate = ExpiryDate.AddDays(30);
results = NAC.NetworkCMDB_Certss.Where(record => record.Expiry_Date < ExpiryDate).ToList();
break;
default:
results = NAC.NetworkCMDB_Certss.ToList();
break;
}
}
catch (Exception ex)
{
var ErrorObject = new NetworkCertsATC_SP
{
Common_Name = "Error",
Certificate = ex.Message,
Device = "NA",
Expiry_Date = DateTime.Now.Date,
Profile = "NA",
Virtual = "NA",
Partition = "NA",
Pool = "NA",
VIP = "NA",
Virtual_Port = 0,
Member_Name = "NA",
MemberIPAddress = "NA",
Member_Port = 0,
ATCEmail = "NA",
ATCName = "NA",
EnvironmentType = "NA"
};
results.Add(ErrorObject);
}
return Json(results, JsonRequestBehavior.AllowGet);
}
}
EDIT 1: Added screen-shot of the new data successfully received from the Controller but not updated in the jqGrid.
EDIT 2: Updated code as suggested by @Oleg. But still facing the same issue. MVC Controller is not called this time. Also, the second break point in JQuery is also not hit:
EDIT 3: Screen-shot of the next error after updating the code.
