I am having trouble simply populating the jqGrid with data. I have taken a look at the docs and hope that you can please help me out with this…
I have verified that data is coming back from my server side controller method as below. Sample is just for one for the records from the fto object.
[HttpPost] public async Task<JsonResult> GetFilteredFuelTicketsAsync(HH_FuelTkt_Input id) { try { IEnumerable<HH_FuelTkt_Output> fto = await db.GetFilteredFuelTicketsAsync(id); return Json(fto, JsonRequestBehavior.AllowGet); } catch (Exception ex) { strRemedyTktResponse = IssueRemedyTicket("Class: FuelTktController" + CrLf + "Method: GetFilteredFuelTickets" + CrLf + "Error: " + ex.Message + CrLf + "InnerException: " + ex.InnerException + CrLf + "Source: " + ex.Source + CrLf + "StackTrace: " + ex.StackTrace); LogMessage.WriteEventLog("Class: FuelTktController" + CrLf + "Method: GetFilteredFuelTickets" + CrLf + "Error: " + ex.Message + CrLf + "InnerException: " + ex.InnerException + CrLf + "Source: " + ex.Source + CrLf + "StackTrace: " + ex.StackTrace, "FuelTktController", 1, strRemedyTktResponse); return null; } }
On my client side, I can see the data in my result. What am I missing here in order to populate the grid??? Below is my code for the grid and underneath that is the data coming back:
if (begDte <= endDte) {
$('#fuelTickets').jqGrid({
caption: "Fuel Tickets", colModel: [
{ name: 'FuelTkt_ID', index: 'FuelTkt_ID', label: 'ID', width: 20, align: "right", editable: false },
{ name: 'Ticket_No', index: 'Ticket_No', label: 'Ticket', width: 60, align: "right", editable: false },
{ name: 'Customer_Name', index: 'Customer_Name', label: 'Customer', width: 150, editable: false },
{ name: 'Vehicle_No', index: 'Vehicle_No', label: 'Vehicle', width: 60, editable: false },
{ name: 'Trans_Timestamp', index: 'Trans_Timestamp', label: 'Date', width: 100, editable: false },
{ name: 'Image_ID', index: 'Image_ID', label: 'Image ID', width: 150, editable: false }
],
pager: false,
viewRecords: true,
gridview: true,
autoWidth: true, emptyRecords: "No records found",
onCellSelect: function (rowid, iCol, cellcontent) {
var grid = $('#fuelTickets');
var imageID = grid.jqGrid('getCell', rowid, 'Image_ID');
if (imageID != "")
DisplayReceipt(imageID);
}
})
var HH_FuelTkt_Input = {
Vehicle_No: $('#txtVehicleNbr').val(),
Customer_Name: $('#txtCustomerName').val(),
Trans_Timestamp_Begin: $('#dteBeginDate').val(),
Trans_Timestamp_End: $('#dteEndDate').val()
};
$.ajax({
url: '@Url.Action("GetFilteredFuelTicketsAsync")',
type: 'POST',
data: JSON.stringify(HH_FuelTkt_Input),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
var grid = $("#fuelTickets");
grid.clearGridData();
grid.addRowData(result);
},
error: function (jqXHR, jqXHR, textStatus, errorThrown) {
alert("No record found: " + "textStatus: " + textStatus + "rn" + "errorThrown: " + errorThrown);
}
});
}
Here is the data coming back:
[Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456", more...}, Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456", more...}] 0 Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456″, more…} 1 Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456″, more…}
Here are the individual records:
0 Object { FuelTkt_ID=2, Ticket_No=6460193, Vehicle_No="123456″, more…} Customer_Name "X" FuelTkt_ID 2 Image_ID "12345″ Ticket_No 6460193 Trans_Timestamp "/Date(1395238800000)/" Vehicle_No "123456″
1 Object { FuelTkt_ID=3, Ticket_No=6460194, Vehicle_No="123456″, more…} Customer_Name "X" FuelTkt_ID 3 Image_ID "22856″ Ticket_No 6460194 Trans_Timestamp "/Date(1395246000000)/" Vehicle_No "123456″