onCellselect, events not firing in jqgrid using default settings

I've setup jqgrid using all the latest files and it works beautifully but I can't get even basic ev开发者_运维问答ents to fire using the internal methods. Am I missing something ?

These are the includes

<link href="style.css" rel="stylesheet" type="text/css" />
<link href="scripts/css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="scripts/css/ui.jqgrid.css" />
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
<script src="scripts/jqgrid/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>

And this builds the grid

$("#tasklist").jqGrid({
                            url:'gettaskdoc.php',
                            datatype: "json",
                            height:"auto",
                            autowidth:true,
                            gridview:true,
                            sortable:true,
                            colNames:['Id','Done By', 'Project', 'Type','Details','StartDate','EndDate','Time Taken','MthlyHrsLeft','StoredHrsLeft'],
                            colModel:[
                                {name:'idno',index:'idno', width:20},
                                {name:'doneby',index:'doneby', width:80, classes: 'sltuser'},
                                {name:'project',index:'project', width:120, classes: 'sltproject'},
                                {name:'type',index:'type', width:80},
                                {name:'details',index:'details', width:200},        
                                {name:'startdate',index:'startdate', width:70}, 
                                {name:'enddate',index:'enddate', width:70},
                                {name:'timetaken',index:'timetaken', width:50},
                                {name:'mthlyhrsleft',index:'mthlyhrsleft', width:50},
                                {name:'storedhrsleft',index:'storedhrsleft', width:50}
                            ],
                            rowNum:20,
                            rowList:[20,40,60],
                            pager: '#taskpager',
                            sortname: 'idno',
                            viewrecords: true,
                            sortorder: "asc",
                            caption:"Combined Taskdoc",
                            onCellSelect :  function(rowid, index, contents, event) {
                                alert('test');
                                }
                        });
                        $("#tasklist").jqGrid('navGrid','#taskpager',{edit:true,add:false,del:false});

Error log on chrome everytime I click the grid.

122Uncaught TypeError: Cannot call method 'indexOf' of undefined b.jgrid.extend.setSelectionjquery.jqGrid.min.js:122 e.extend.eachjquery-1.6.4.min.js:2 e.fn.e.eachjquery-1.6.4.min.js:2 b.jgrid.extend.setSelectionjquery.jqGrid.min.js:121 b.fn.jqGridjquery.jqGrid.min.js:29 b.fn.jqGrid.each.b.before.click.bind.a.p.datatypejquery.jqGrid.min.js:105 f.event.handlejquery-1.6.4.min.js:3 f.event.add.i.handle.k

Ah it seems I'm lacking definitions for the jsonReader.. strange it isn't in all the json demos for the jqgrid site.

jsonReader : {
    root: "rows",
    page: "page",
    total: "total",
    records: "records",
    repeatitems: true,
    cell: "cell",
    id: "id"
}