Get column value of a JQgrid table when a row is selected

Question

I want to get values of 2 column in a javascript function when a row is selected(clicked) in jqgrid table.what i want is add a javascript onclick event on each row and javascript function gets the values of col3 and col4 of selected row.my code is

jQuery("#table1").jqGrid({
        url:'petstore.do?q=1&Path='+path,
        datatype: "json",
        colNames:['col1','col2','col3','col4'],
        colModel:[
                  {name:'col1',index:'col1',sortable:true,width:250},
              {name:'col2',index:'col2',sortable:true,width:100},
              {name:'col3',index:'col3', sortable:true,width:100},
              {name:'col4',index:'col4', sortable:true},
        ],
        multiselect: false,
        paging: true,
        rowNum:10,
        rowList:[10,20,30],
        pager: $("#pager")

    }).navGrid('#pager',{edit:false,add:false,del:false});

can any body help me out from this ?

Answer 1

You should handle the onSelectRow event (which is raised immediately after the row has been clicked) and then you can use getRowData method in order to get selected row data as an array:

$('#table1').jqGrid({
    url: 'petstore.do?q=1&Path='+path,
    datatype: 'json',
    colNames: ['col1', 'col2', 'col3', 'col4'],
    colModel: [
               {name:'col1', index:'col1', sortable:true, width:250},
               {name:'col2', index:'col2', sortable:true, width:100},
               {name:'col3', index:'col3', sortable:true, width:100},
               {name:'col4', index:'col4', sortable:true}
    ],
    multiselect: false,
    paging: true,
    rowNum: 10,
    rowList: [10,20,30],
    pager: $('#pager'),
    onSelectRow: function(rowId){ 
        var rowData = $('#table1').jqGrid('getRowData', rowId);
        //You can access the desired columns like this --> rowData['col3']
        ...
    }
}).navGrid('#pager', {edit:false, add:false, del:false});

This should get you what you want.