Having trouble with onCellSelect setup in jqGrid

Question

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. It appears that it's trying to read data in a grid that is not yet populated.

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:

$.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);
                            }
                        });

EDIT AFTER PLACING JQGRID IN TABLE ELEMENT (which fixed the immediate problem): It was because I didn't have the jqGrid defined in a table element...

However, another thing popped up here.

I get two records back in the variable "data".

When I try and process this line, nothing happens. The browser just hangs. Do I need to bind the data to the grid a different way? It's obvioulsy having problems parsing the data, maybe with the timestamp. Could you suggest what I might be able to do to resolve this?

Thanks so much. var gridData = JSON.parse(data.d);

The json data looks like this:

data [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...}

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"

Answer 1

jqGrid requires the element you attach it to to be a table:

<table id="fuelTickets"> </table>