jqGrid get multiple selected row cells value

Question

My jqGrid Script:

<script>
jQuery("#task-grid").jqGrid({
    datatype: "json",
    height: 'auto',
    rowNum: 20,
    rowList: [20,30],
    colNames:['ID','RESOURCE','ROLE','SITE', 'ALLOC. TYPE', 'UNIT (%)','HOURS'],
    colModel:[
        {name:'ID',key:true,index:'ID', width:50, align:'center',search:false,hidden: true},
        {name:'RESOURCE',index:'RESOURCE', width:150, sorttype:"text",align:'center',search:true},
        {name:'ROLE',index:'ROLE',width:120 ,align:'center',search:false},
        {name:'SITE',index:'SITE', width:120, align:'center',search:false},
        {name:'ALLOC. TYPE',index:'ALLOCATION_TYPE', align:'center',width:120,search:false },
        {name:'UNIT',index:'UNIT',align:'center',search:false},     
        {name:'HOURS',index:'HOURS', search:false, align:'center',sortable:false,editable:true}
    ],
    pager: "#page",
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    sortname: 'RESOURCE',
        sortorder: "asc",
        multiselect: true,
        cellEdit: true,
        cellsubmit : 'clientArray',
    caption: "Resource List"
}).navGrid('#page',{ edit:true,add:false,del:false,search:false,cloneToTop:true,refresh:false},
            {

             },{
             //add options

             },{

                        //msg: "do you really want delete this keyword? This delete affect on Eqms filter"

                });


                jQuery("#task-grid").jqGrid('filterToolbar', { autosearch: true  });
        var topPagerDiv = $('#grid_toppager')[0]; 
        jQuery("#grid_toppager_center", topPagerDiv).remove(); 
</script>

Below function is appending rowId value to in hidden input

 $("#addid").click(function(){
                var Ids = jQuery("#task-grid").jqGrid('getGridParam','selarrrow');
                var empIds = $("input[type=hidden][name=user_id]").val(Ids);
});

Hidden Input

<input type="hidden" name="user_id" value=""/>

Now I need to fetch the cell value inserted and for that I am using below function

var myGrid = $('#task-grid'),
selRowId = myGrid.jqGrid ('getGridParam', 'selrow'),
celValue = myGrid.jqGrid ('getCell', selRowId, 'HOURS');

The console log does show me the rowId selected but not its corresponding cell value. Also I am able to pass multiple rowIds checked in hidden input but not able to do for cell value.

Thanks.

Solution

First of all jQuery("#task-grid").jqGrid('getGridParam','selarrrow'); returns array of items. You can't assign the array as the value of some <input>. You can use comma separated list of items instead: .val(Ids.join(",")) or you can use JSON.stringify alternatively. .val(JSON.stringify(Ids)).

To place values from some columns instead of ids you can define first an empty array and then fill it with the required values using push method. At the end you can use .join(",") or JSON.stringify to convert the array of items to the string which you can assign to <input>

var $grid = $("#task-grid"), selIds = $grid.jqGrid("getGridParam", "selarrrow"), i, n,
    cellValues = [];
for (i = 0, n = selIds.length; i < n; i++) {
    cellValues.push($grid.jqGrid("getCell", selIds[i], "HOURS"));
}
alert(cellValues.join(","));

I recommend you additionally to use gridview: true option in the grid to improve the performance and to fix name:'ALLOC. TYPE'. If you need to read some exotic formatted input elements the you should use jsonmap, but to hold the name property so that it have no spaces, dots and other meta-characters. I recommend you to use all index the same as the name. In the case you can remove index properties at all from colModel. If you use mostly align:'center', search:false then I recommend you to change defaults for colModel items by usage cmTemplate: {align: 'center', search: false}. It allows you to remove many properties from colModel and makes it more readable and better to maintain.