Having trouble with setup in jqGrid

Having trouble with setup in jqGrid

I am successfully retrieving data from my controller method and want to display data on the jqGrid.

I notice during debugging, that I get an error message that pops up (which I'm not expecting) that says "Element is not a table".

The error occurs on the line trying to set up the onCellSelect event for the grid.
Even after I removed the "onCellSelect" event, I got the same exact error right after the "emptyRecords" property. This definitely tells me that there is something wrong in the format of the way I'm setting up the grid.

Notice that I am populating the grid after this event. This event is for after the grid is populated to pull a value out of a cell.

However, I thought that all events need to be set up on the definition of the grid at design time.

Can someone please inform me what I'm doing wrong here?

Here is my pertinent code: Note that the "Insert Code" button doesn't work, so it's all strung out. Just copy and paste to your code editor and auto format so it will be more readable. 
 
$.ajax({
                            url: '@Url.Action("GetFilteredFuelTicketsAsync")',
                            type: "POST",
                            data: JSON.stringify(HH_FuelTkt_Input),
                            contentType: 'application/json; charset=utf-8',
                            dataType: "json",
                            success: function (data) {
                                $('#fuelTickets').jqGrid({
                                    caption: "Fuel Tickets",
                                    colNames: ["ID", "Ticket", "Vehicle", "Customer", "Date", "Image ID"],
                                    colModel: [
                                                { name: "FuelTkt_ID", viewable: false },
                                                { name: "Ticket_No", width: 30, align: "right" },
                                                { name: "Vehicle_No", width: 50 },
                                                { name: "Customer_Name", width: 100 },
                                                { name: "Trans_Timestamp", width: 100, datefmt: "yyyy-mm-dd" },
                                                { name: "Image_ID", width: 30 }
                                    ],
                                    datatype: "json",
                                    mtype: "GET",
                                    pager: true,
                                    sortname: "Ticket_No",
                                    sortorder: "Asc",
                                    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 grid = $("#fuelTickets");
                                var gridData = JSON.parse(data.d);
                                grid.clearGridData();
                                for (var i = 0; i < gridData.length; i++) {
                                    grid.addRowData(i + 1, gridData[i]);
                                }
                            },
                            error: function (jqXHR, jqXHR, textStatus, errorThrown) {
                                alert("No record found: " + "textStatus: " + textStatus + "\r\n" + "errorThrown: " + errorThrown);
                            }
                        });











































 
 
Here is my HTML for the control:
<div id="fuelTickets">             </div>