Grid won't populate in free-jqgrid - jqgrid

Question

I can't get the grid to populate my data. The correct number of rows shows up, but everything is empty (in my case, 8 empty rows). I am using jqGrid-free 4.15.5, jQueryUI 1.21.1, jQuery 3.5.1.
Is there something simple that I'm doing wrong?
Some things that are important to me:
loadonce: true (so that I get my dataset one time and do client sorting from there)
forceClientSorting: true
Also, I've seen varying solutions to pagers, so I'm not sure if I'm doing that correctly. From what I understand, simply setting pager: true should be sufficient with this version of jqGrid.
Controller Action:
public IActionResult GridData(string sidx, string sord, int page, int rows)
{
int pageIndex = page - 1;
int pageSize = rows;
List<SubCampaignData> subCampaignData = new List<SubCampaignData>();
subCampaignData = database.SubCampaignData
.Include(scd => scd.ContentPriority)
.Include(scd => scd.DataSources)
.Include(scd => scd.DeliveryMethod)
.Include(scd => scd.DeliveryPriority)
.Include(scd => scd.Contacts)
.ThenInclude(c => c.Role)
.ToList();
var sortColumn = typeof(SubCampaignData).GetProperty(sidx);
if (sord.ToUpper() == "ASC")
{
subCampaignData = subCampaignData.OrderBy(scd => sortColumn.GetValue(scd, null)).ToList();
}
else
{
subCampaignData = subCampaignData.OrderByDescending(scd => sortColumn.GetValue(scd, null)).ToList();
}
var gridData = subCampaignData.Select(scd => new
{
Campaign = scd.Campaign,
SubCampaign = scd.SubCampaign,
BulkCampaignName = scd.BulkCampaignName,
DeliveryMethodName = scd.DeliveryMethod.DeliveryMethodName,
AutomationTriggerName = scd.AutomationTriggerName,
MasterDataExtension = scd.MasterDataExtension,
Purpose = scd.Purpose,
Active = scd.Active.ToString(),
FailureContactName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.Name).ToList()),
DeliveryPriorityName = scd.DeliveryPriority.PriorityName,
ContentPriorityName = scd.ContentPriority.PriorityName,
EscalateAfter = scd.EscalateAfter,
ClientName = string.Join(';', scd.DataSources.Select(ds => ds.ClientName).ToList()),
SourceJob = scd.SourceJob,
MainframeFileName = scd.MainframeFileName,
AggregationJob = scd.AggregationJob,
AggregationRunTime = scd.AggregationRunTime,
SendTime = scd.SendTime,
RunFrequency = scd.RunFrequency,
RunDays = scd.RunDays,
RunMonths = scd.RunMonths,
SendPend = scd.SendPend,
SendPendDelay = scd.SendPendDelay,
SendPendReason = scd.SendPendReason,
RegressionScripts = scd.RegressionScripts.ToString(),
ConfirmedActiveDate = FormatNullableDateTime(scd.ConfirmedActiveDate),
StartDate = FormatNullableDateTime(scd.StartDate),
Resend = scd.Resend,
ResendAbility = scd.ResendAbility.ToString(),
RecreateAbility = scd.RecreateAbility.ToString(),
ResendRecreateDetails = scd.ResendRecreateDetails,
BusinessOwnerName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS OWNER").Select(c => c.Name).ToList()),
BusinessSponsorName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.Name).ToList()),
BusinessSponsorEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.EmailAddress).ToList()),
BusinessSponsorConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "BUSINESS SPONSOR").Select(c => c.ConfirmedDate).ToList())),
FailureContactEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.EmailAddress).ToList()),
FailureContactConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "FAILURE CONTACT").Select(c => c.ConfirmedDate).ToList())),
SmeAnalystName = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.Name).ToList()),
SmeAnalystEmailAddress = string.Join(';', scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.EmailAddress).ToList()),
SmeAnalystConfirmedDate = string.Join(';', FormatNullableDateTimes(scd.Contacts.Where(c => c.Role.RoleName.ToUpper() == "SME/ANALYST").Select(c => c.ConfirmedDate).ToList())),
}).ToArray();
return Json(gridData);
}
View (grid function):
$(function () {
"use strict";
var mydata = [
{ id: "10", campaign: "Agent AutoReply Emails", subcampaign: "FAO_Agent_Inhouse_SoldQuote", commdeliverycampaign: "", deliverymethod: "Triggered Send", automationtriggeredsend: "Agent_AutoReply", masterdataextension: "Agent_AutoReply", purpose: "Sent to Agency when PGR has written new business for a customer on the Agency's behalf", active: "true", failurecontact: "", deliverypriority: "Medium", contentpriority: "Medium", escalateafter: "2", datasource: "Probill", sourcejob: "", mainframefile: "", inputfile: "", aggregationjob: "", aggregationruntime: "", sendtime: "Real-time", runfrequency: "Daily", rundays: "SMTWThFSa", runmonths: "JanFebMarAprMayJunJulAugSepOctNovDec", sendpend: "N", sendpenddelay: "", sendpendreason: "", regression: "false", confirmactivedate: "2020-07-22", startdate: "", resend: "", resendability: "false", recreateability: "true", resendcomments: "Can recreate the list of Agencies from a report for the date.", businessowner: "", businesssponsor: "Dan Merk;Patrick D Astolfo", sponsoremail: "Dan_Merk#progressive.com;Patrick_DAstolfo#progressive.com", sponsorconfirmdate: "2020-01-30", failureemail: "", failureconfirmdate: "", smeanalyst: "", smeanalystemail: "", smeanalystconfirmed: "", metadata: "" }
],
initDateEdit = function (elem, options) {
// we need get the value before changing the type
var orgValue = $(elem).val(), newformat,
cm = $(this).jqGrid("getColProp", options.name);
$(elem).attr("type", "date");
if ((Modernizr && !Modernizr.inputtypes.date) || $(elem).prop("type") !== "date") {
// if type="date" is not supported call jQuery UI datepicker
$(elem).css({ width: "8em" }).datepicker({
dateFormat: "yy-mm-dd",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: false
});
} else {
// convert date to ISO
if (orgValue !== "") {
newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
cm.formatoptions.newformat :
$(this).jqGrid("getGridRes", "formatter.date.newformat");
$(elem).val($.jgrid.parseDate.call(this, newformat, orgValue, "yy-mm-dd"));
}
$(elem).css("width", "11em");
}
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "yy-mm-dd",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: false,
showButtonPanel: true
});
}, 50);
},
numberTemplate = {
formatter: "number", align: "right", sorttype: "number",
editrules: { number: true, required: true },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }
};
$("#list").jqGrid({
url: "/Home/GridData",
datatype: "json",
//data: mydata,
mtype: "GET",
colModel: [
{ name: "act", template: "actions", frozen: true },
{ name: "Campaign", label: "Campaign Name", width: 120, editable: false, frozen: true },
{ name: "SubCampaign", label: "SubCampaign Name", width: 141, editable: true, frozen: true },
{
name: "BulkCampaignName", label: "Bulk Campaign", width: 120,
editrules: { edithidden: true }, editable: true, hidden: true
},
{
name: "DeliveryMethodName", label: "Delivery Method", width: 120, formatter: "select",
formatoptions: { value: "Adhoc Bulk, Bulk, Bulk Text Messaging, Triggered Send, Triggered Text Messaging", defaultvalue: "Bulk" },
stype: "select",
searchoptions: { value: ":Any;Adhoc Bulk:Adhoc Bulk;Bulk:Bulk;Bulk Text Messaging:Bulk Text Messaging;Triggered Send:Triggered Send;Triggered Text Messaging:Triggered Text Messaging" },
editable: true
},
{ name: "AutomationTriggerName", label: "Automation/Triggered Send", width: 185, editable: true },
{ name: "MasterDataExtension", label: "Master Data Extension", width: 155, editable: true },
{ name: "Purpose", label: "Purpose", width: 155, editable: true },
{
name: "Active", label: "Active", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "Yes:No", defaultValue: "Yes" }
},
{ name: "FailureContactName", label: "Failure Contact", width: 155, editable: true },
{
name: "DeliveryPriorityName", label: "Delivery Priority", width: 120, formatter: "select",
formatoptions: { value: "Low, Low-Medium, Medium, Medium-High, High", defaultvalue: "Medium" },
editable: true
},
{
name: "ContentPriorityName", label: "Content Priority", width: 120, formatter: "select",
formatoptions: { value: "Low, Low-Medium, Medium, Medium-High, High", defaultvalue: "Medium" },
editable: true
},
{ name: "EscalateAfter", label: "Escalate After (days)", width: 120, editable: true },
{ name: "ClientName", label: "Data Source", width: 100, editable: true },
{ name: "SourceJob", label: "Source Job", width: 120, editable: true },
{ name: "MainframeFileName", label: "Mainframe File", width: 120, editable: true },
{ name: "AggregationJob", label: "AggregationJob", width: 120, editable: true },
{ name: "AggregationRunTime", label: "Aggregation Run Time", width: 120, editable: true },
{ name: "SendTime", label: "Send Time", width: 120, editable: true },
{ name: "RunFrequency", label: "Run Frequency", width: 120, editable: true },
{ name: "RunDays", label: "Run Days", width: 120, editable: true },
{ name: "RunMonths", label: "Run Months", width: 120, editable: true },
{ name: "SendPend", label: "SendPend", width: 120, editable: true },
{ name: "SendPendDelay", label: "SendPend Delay", width: 120, editable: true },
{ name: "SendPendReason", label: "SendPend Reason", width: 120, editable: true },
{
name: "RegressionScripts", label: "Regression Scripts", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{
name: "ConfirmedActiveDate", label: "Last Confirmed Active", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{
name: "StartDate", label: "Start Date", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "Resend", label: "Resend", width: 120, editable: true },
{
name: "ResendAbility", label: "Business Can Resend", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{
name: "RecreateAbility", label: "Business Can Recreate", width: 120, align: "center", formatter: "checkbox",
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" },
editable: true,
edittype: "checkbox", editoptions: { value: "true:false", defaultValue: "false" }
},
{ name: "ResendRecreateDetails", label: "Resend/Recreate Details", width: 120, editable: true },
{ name: "BusinessOwnerName", label: "Business Platform Owner", width: 120, editable: true },
{ name: "BusinessSponsorName", label: "Business Sponsor", width: 120, editable: true },
{ name: "BusinessSponsorEmailAddress", label: "Sponsor Email", width: 120, editable: true },
{
name: "BusinessSponsorConfirmedDate", label: "Sponsor Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "FailureContactEmailAddress", label: "Failure Email", width: 120, editable: true },
{
name: "FailureContactConfirmedDate", label: "Failure Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
},
{ name: "SmeAnalystName", label: "SME/Analyst", width: 120, editable: true },
{ name: "SmeAnalystEmailAddress", label: "SME/Analyst Email", width: 120, editable: true },
{
name: "SmeAnalystConfirmedDate", label: "SME/Analyst Confirmed", width: 120, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "Y-m-d" }, editable: true,
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch }
}
],
loadonce: true,
forceClientSorting: true,
cmTemplate: { autoResizable: true },
autoResizing: { compact: false, adjustGridWidth: false },
shrinkToFit: false,
autowidth: true,
rownumbers: true,
ignoreCase: true,
height: "auto",
sortname: "Campaign",
sortorder: "asc",
threeStateSort: true,
sortable: true,
pager: true,
rowNum: 10,
viewrecords: true,
searching: {
defaultSearch: "cn"
},
multiSort: true,
formEditing: {
onclickSubmit: function (options, postdata, formOper) {
return {};
}
}
}).jqGrid("setFrozenColumns")
.jqGrid("navGrid", { add: true, edit: true, del: true })
.jqGrid("inlineNav", { add: false, edit: false })
.jqGrid("filterToolbar")
.jqGrid("gridResize");
});

Answer 1

return Json(gridData);
Instead of the above code please place the below code.
int totalRecords = gridData.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
var Data = new
{
total = totalPages,
page,
records = totalRecords,
rows = gridData
};
return Json(Data, JsonRequestBehavior.AllowGet);