jQuery Grid Plugin - jqGrid

Considering the switching on of inline cell editing looks so easy for some reason I am having a problem getting it to work. When I click on a cell nothing happens and the fields don't switch to edit mode. But sometimes It switches to edit mode. I have reduced my code to the minimum, is there something obvious I have missed?

jQuery('#list4').jqGrid({
            datatype: "local",
            height: 150,
            colNames:['SR No', 'Property', 'Value'],
            colModel:[ {name:'propId',index:'propId', width:50, sorttype:"int"},
                       {name:'propName',index:'propName', width:300},
                       {name:'value',index:'value', width:300, editable:true},
                      ],
            caption: "Property Sheet",
                forceFit : true,
                cellEdit: true,
                cellsubmit: 'clientArray',
                afterEditCell: function (id,name,val,iRow,iCol)
                            {},
                afterSaveCell : function(rowid,name,val,iRow,iCol)
                            {
                                    alert("saved");

                            }
        });
        
        var rowsNum = jQuery('#list4').jqGrid('getGridParam','rowNum');
        for(var j=1;j<=rowsNum;j++)                                      
            jQuery('#list4').jqGrid('delRowData',j);
        
           //alert("till this OK");
        for(var i=0;i<=res.propertyDetails.length;i++)                  
            jQuery('#list4').jqGrid('addRowData',i+1,res.propertyDetails[i]);

Please let me know what is problem.

Thanks in advance.