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

html, javascript, jqgrid, jquery

Solution

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.

Problem

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 ?

Original source