JQGrid - OndblClickRow event to select field value by row selected

Question

I'm really struggling with this and can't seem to get this to work.

Basically I have a bookings table, e.g.

id    bookref    account    fare

1     BR1          101      10.00

2     BR2          202      20.00

My Jqgrid shows all this information, what I want to do is get the bookref value by which row is selected. The current function I have is:

    ondblClickRow: function(rowid)
    {
        var grid = $('#bookings');
        var sel_id = grid.jqGrid('getGridParam', 'selrow');
        var myCellData = grid.jqGrid('getCell', sel_id, 'bookref');

        alert(myCellData);

    },

When I double click the first row I get 'BR1' returned which is correct, if I double click any other row I still get 'BR1' when I should get 'BR2' if the second row is clicked.

Can somebody please help me with this? Would massively appreciated it

Answer 1

If you see here in my code, I am also using ondblClickRow in my grid. If you see here, I am getting all row values and making my own changes what ever I want, and finally loading the job details page with document.location.href.
I am able to do this for all rows in the grid.

ondblClickRow: function(rowId) {
    var rowData = jQuery(this).getRowData(rowId); 
    var jobNumber = rowData['jobNumber'];
    var jobName = rowData['description'];
    var jobCustomer = rowData['customerName'];
    var jobStatus = rowData['jobStatus'];
    jobName = jobName.replace(/&/g, "``");
    jobName = jobName.replace(/#/, "__");
    var aQryStr = "jobNumber=" + jobNumber + "&jobName=" + jobName + "&jobCustomer=" + jobCustomer;
    console.log("./jobflow?token=view&" + aQryStr);
    document.location.href = "./jobflow?token=view&" + aQryStr;
},

If you want see my full grid code:

$("#jobsGrid").jqGrid({
        url:'../job_controller',
        datatype: 'JSON',
        mtype: 'POST',
        pager: jQuery('#jobsGridPager'),
        colNames:['Job #','Project','City', 'Rep', 'Status', 'Customer', 'Cust PO #', 'Rep. #'],
        colModel :[
            {name:'jobNumber', index:'jobNumber', align:'left', width:50, editable:true,hidden:false, edittype:'text',
                    editoptions:{size:30,readonly:true},editrules:{edithidden:false,required:false}},
            {name:'description', index:'description', align:'left', width:150,hidden:false, editable:true, 
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}},
            {name:'locationCity', index:'locationCity', align:'', width:90,hidden:false, editable:true,
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}},
            {name:'initials', index:'initials', align:'center', width:30,hidden:false, editable:true,
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}},
            {name:'jobStatus', index:'jobStatus', align:'center', width:60,hidden:false, editable:true,
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}},
            {name:'customerName', index:'customerName', align:'', width:150,hidden:false, editable:true, 
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}},
            {name:'customerPONumber', index:'customerPONumber', align:'center', width:90, hidden:false, editable:true, 
                    editoptions:{}, editrules:{edithidden:true,required:false}},
            {name:'code', index:'code', align:'center', width:40,hidden:false, editable:true,
                    editoptions:{size:20,readonly:false, alignText:'right'},editrules:{edithidden:true,required:true}}
        ],
        rowNum: 50, pgbuttons: true,    
        recordtext: '',
        rowList: [50, 100, 200, 500, 1000],
        viewrecords: true,
        pager: '#jobsGridPager',
        sortname: 'employeeId', sortorder: "asc", imgpath: 'themes/basic/images',   caption: 'Jobs',
        height:547, width: 1140,/*scrollOffset:0,*/ rownumbers:true, altRows: true, altclass:'myAltRowClass', rownumWidth: 45,
        ondblClickRow: function(rowId) {
            var rowData = jQuery(this).getRowData(rowId); 
            var jobNumber = rowData['jobNumber'];
            var jobName = "" + rowData['description'];
            var jobCustomer = rowData['customerName'];
            var jobStatus = rowData['jobStatus'];
            jobName = jobName.replace(/&/g, "``");
            jobName = jobName.replace(/#/, "__");
            var aQryStr = "jobNumber=" + jobNumber + "&jobName=" + jobName + "&jobCustomer=" + jobCustomer;
            console.log("./jobflow?token=view&" + aQryStr);
            document.location.href = "./jobflow?token=view&" + aQryStr;
        },
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "id",
            userdata: "userdata"
        }
    }).navGrid('#jobsGridPager', add:false,edit:false,del:false,refresh:false,search:false}
    );

Answer 2

No use selrow, but this is no the row of the event, with concurrency can fail

Check this:

ondblClickRow: function(rowid)
{   
    var grid = $('#bookings');    
    var myCellData = grid.jqGrid('getCell', rowid, 'bookref');
    alert(myCellData);
}