jQuery(document).ready(function(){
    jQuery("#trlist").jqGrid({
        datatype: 'clientSide',
        colNames:['Actions','Row','Date', 'Acc to Dr','Acc to Cr','Reference','Amount','Tax','Description'],
        colModel :[
           {name:'act',index:'act', width:50,sortable:false},
           {name:'id',index:'id', key:true, width:55, sorttype:'int'},
           {name:'ddate',index:'ddate', width:90, sorttype:'date', datefmt:'d-m-Y'},
           {name:'acc2dr',index:'acc2dr', width:180,sortable:false},
           {name:'acc2cr',index:'acc2cr', width:180,sortable:false},
           {name:'ref',index:'ref', width:70},
           {name:'amount',index:'amount', width:60,align:'right',sortable:false},
           {name:'tax',index:'tax', width:60,align:'right', sortable:false},
           {name:'descript',index:'descript', width:180, sortable:false}
        ],
        pager: jQuery('#trpager'),
        rowNum:10,
        viewrecords: true,
        imgpath: '../includes/jqgrid/themes/coffee/images'
        
    });
});

Code here populates the required variables, then:-

    l_id++;
    var be = '<img src="../images/edit.png" title="Edit" onclick="javascript:edittr('+l_id+')" >';
    var se = '<img src="../images/delete.png" title="Delete" onclick="javascript:deltr('+l_id+')" >';

    var line2add = {
        act: be+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+se,    
        id: l_id,
        ddate: ddate,
        acc2dr: a2dr,  
        acc2cr: a2cr,  
        ref: reference,
        amount: amount,
        tax: tax,
        descript: description}
        
    jQuery("#trlist").addRowData(l_id,line2add,"first");

The rest of each row in the grid looks fine. I would appreciate any assistance on this.