jQuery Grid Plugin - jqGrid

using 3.5 beta. unfortunately cant post a link; but heres the sample JSON data

{"page":"1","total":275,"records":"137","rows":[{"id":"1283","cell":["1283","2009-10-31 00:00:00","payment","250.98","payment","out","BUCURR"]},{"id":"1123","cell":["1123","2009-03-17 00:00:00","ticket","33.00","ticket","out","BCC"]},{"id":"1119","cell":["1119","2009-03-17 00:00:00","Lunch","4.65","Lunch","out","CASH"]},{"id":"1120","cell":["1120","2009-03-17 00:00:00","food","3.75","food","out","MCC"]},{"id":"1121","cell":["1121","2009-03-17 00:00:00","gas","20.00","gas","out","MCC"]}]}

heres the javascript for the data.

jQuery("#listtrns").jqGrid({
    loadui:'block',
    height:690,
       url:'trn.php?q=1',
       colNames:['Id','Date', 'Trn', 'Amount','Tags','Type', 'Code'],
       colModel:[
           {name:'t.id',index:'t.id', width:50, editable:false, editoptions:{readonly:true,size:10}},
           {name:'t.trnDate',index:'t.trnDate', width:130, formatter:'date', editable:true,
            searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});}},
            editoptions:{size:12, dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});}} },
           {name:'t.trn',index:'t.trn', width:190, editable:true,editoptions:{size:30} },
        {name:'t.amount',index:'t.amount', width:80, formatter:'currency', editable:true, editoptions:{size:10}},
        {name:'t.tags',index:'t.tags', width:180, sortable: false, editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"30"}},
        {name:'t.type',index:'t.type', width:80, editable:true, edittype:"select",editoptions:{value:"OUT:OUT;IN:IN"}},
        {name:'b.accountCode',index:'b.accountCode', width:80, searchable:false, editable:false,
         edittype:"select",
         editoptions:{value:{5:"Cash",
                              1:"Current",
                              2:"Saving",
                             3:"CRD",
                             4:"NRO"}}}
       ],
       pager: jQuery('#pagertrns'),
       sortname: 't.trnDate',
    sortorder: "desc",
    editurl:"trn.php?q=2",
    caption: "trns"
});
jQuery("#listtrns").navGrid("#pagertrns",
        {edit: true, add: true, del: true,search:true,refresh:true},
        {height:280,reloadAfterSubmit:false}, // edit options
        {height:280,reloadAfterSubmit:false}, // add options
        {height:280,reloadAfterSubmit:false}, //del options
        {multipleSearch:true});

PS: i am also setting jgrid.defaults hence some of the setting are missing in the code above

i also have another problem. if you see the code above for trnDate i use dataInit function to initialize a dateficker for the add/edit form.

the problem is now when i open the form the datepicker initializes automatically and opens up ( i think its to do with the field receiving focus )

another problem is, when i load the grid for the first time, the 'add form opens automatically by default without hitting add button in the navigator.

heres what i am doing to add a new row using editorGrid()

jQuery(”#listtrns”).jqGrid({
    loadui:'block',
    height:690,
       url:'trn.php?q=1',
       colNames:['Id','Date', 'Trn', 'Amount','Tags','Type', 'Code'],
       colModel:[
           {name:'t.id',index:'t.id', width:50, editable:false, editoptions:{readonly:true,size:10}},
           {name:'t.trnDate',index:'t.trnDate', width:130, formatter:'date', editable:true,
            searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});}},
            editoptions:{size:12, dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});}} },
           {name:'t.trn',index:'t.trn', width:190, editable:true,editoptions:{size:30} },
        {name:'t.amount',index:'t.amount', width:80, formatter:'currency', editable:true, editoptions:{size:10}},
        {name:'t.tags',index:'t.tags', width:180, sortable: false, editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"30"}},
        {name:'t.type',index:'t.type', width:80, editable:true, edittype:"select",editoptions:{value:"OUT:OUT;IN:IN"}},
        {name:'b.accountCode',index:'b.accountCode', width:80, searchable:false, editable:false,
         edittype:"select",
         editoptions:{value:{5:"Cash",
                              1:"Current",
                              2:"Saving",
                             3:"CRD",
                             4:"NRO"}}}
       ],
       pager: jQuery('#pagertrns'),
       sortname: 't.trnDate',
    sortorder: “desc”,
    editurl:”trn.php?q=2″,
    caption: “trns”
});

//think the problem is here.
jQuery(”#listTransactions”).editGridRow(”new”);    jQuery(”#listtrns”).navGrid(”#pagertrns”,
        {edit: true, add: true, del: true,search:true,refresh:true},
        {height:280,reloadAfterSubmit:false}, // edit options
        {height:280,reloadAfterSubmit:false}, // add options
        {height:280,reloadAfterSubmit:false}, //del options
        {multipleSearch:true})

i will try using without the doted notation, but then that would give a problem in a complex query where i join 2 or more tables, isnt it?

where do i find the css for searchFilter?

i am using ui.jqgrid.css in theme folder with redmond theme