jQuery Grid Plugin - jqGrid

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.

    Customer_Name = "X"     FuelTkt_ID = 2     Image_ID = "12345"     Ticket_No = 6460193     Trans_Timestamp = {3/19/2014 10:20:00 AM}     Vehicle_No = "123456"

[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 + "\r\n" + "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"