jQuery Grid Plugin - jqGrid

I created a very simple grid

jQuery(document).ready(function() {

var bid = jQuery("#bids");



var  properties = {

width: 500,

datatype:

"json",

mtype:

"GET",

colModel: [

{ name:

"BidID",index:"BidID", label: "Bid ID" },

{ name:

"CustomerID", index:"CustomerID",label: "Customer ID" },

{ name:

"Description",index:"Description", label: "Description" },

{ name:

"BidNumber",index:"BidNumber", label: "Bid Number" },

{ name:

"BidStatusID",index:"BidStatusID", label: "Bid Status ID" }

],

pager: $(

"#pager"),

rowNum: 5,

rowList: [5, 10],

jsonReader: { root:

"rows", page: "page", total: "total", records: "records", repeatitems: false },

imgpath:

"Scripts/themes/redmond/images",

viewrecords:

true,

caption:

"Bids",

url:

"/Bid/GridData1",

gridComplete:

function() {

var x = jQuery("#bids").getRowData(1);

alert(x.BidID);

}

};

bid.jqGrid(properties).navGrid(pager, { edit:

false, add: false, del: false, search: false });

I am referencing all the grid js files

The Controller is returning data, here is the data from Fiddler

{"total":2,"page":1,"records":6,"rows":"[{\\"BidID\\":1,\\"CustomerID\\":1,\\"BidNumber\\":\\"123456\\",\\"Description\\":\\"Descriptionn\\",\\"BidStatusID\\":1},{\\"BidID\\":2,\\"CustomerID\\":2,\\"BidNumber\\":\\"123456\\",\\"Description\\":\\"Description2\\",\\"BidStatusID\\":2},{\\"BidID\\":3,\\"CustomerID\\":3,\\"BidNumber\\":\\"1234567\\",\\"Description\\":\\"Description description\\",\\"BidStatusID\\":1},{\\"BidID\\":4,\\"CustomerID\\":1,\\"BidNumber\\":\\"2324231\\",\\"Description\\":\\"Descrc DFSd\\",\\"BidStatusID\\":1},{\\"BidID\\":5,\\"CustomerID\\":1,\\"BidNumber\\":\\"ws2345\\",\\"Description\\":\\"wewqw qwe qweqw \\",\\"BidStatusID\\":2}]","userdata":null}

However the grid displays 5 rows but no data in the rows.

Any suggestions as to what might cause this to occur, also the alert in grid complete returns nothing.