jQuery Grid Plugin - jqGrid

Hi All,

I am trying to display some data in a jqGrid but I get the following error: Unable to get property '0' of undefined or null reference

The data looks like this:

{"total":2,"page":0,"records":27,"rows":[{"DeletedFlag":"N","Filename":"\\\\mypath\\myfile.txt","VideoId":"12345"},{"DeletedFlag":"Y","Filename":"\\\\mypath\\otherfile.txt","VideoId":"88888"}]}

 And here is the grid definition:

function displayGrid() {

jQuery("#grid").jqGrid({

url: '@Url.Action("GetGrids", "Home")',

datatype: "json",

beforeRequest: function () {

alert("Going to get data");

},

gridComplete: function () {

alert("all done");

},

mtype: 'POST',

colNames: ['VideoId', 'Filename', 'DeletedFlag'],

colModel: [

{ name: 'VideoId', index: 'VideoId',jsonmap: 'VideoId', width: 200, sortable: false, editable: false, editoptions: { readonly: true, size: 10} },

{ name: 'Filename', index: 'Filename', jsonmap: 'FileName', width: 600, editable: false },

{ name: 'DeletedFlag', index: 'DeletedFlag', jsonmap: 'DeletedFlag', width: 100, editable: true }

],

jsonReader: {

root: "rows",

page: "page",

total: "total",

records: "records",

repeatitems: true

},

rowNum: 10,

rowList: [10, 20, 30],

pager: jQuery('#gridpager'),

sortname: 'VideoId',

viewrecords: true,

sortorder: "asc",

caption: "Orphans",

editurl: '@Url.Action("UpdateGridItem")'

}).navGrid('#gridpager');

}

 
Any help will be great.