Jqgrid:Display selected row data to another grid

Question

I have two jqgrid shown below.

I want to pass selected rows from $("#grid") to $("#cmehoursgrid").

I have written the code for data to take in array for first grid. The array is arrID.

But.. how to pass it to second grid on button click?

First grid is $("#grid").

$("#grid").jqGrid({ //set your grid id
                    url: 'getSearchedUserDetails', //insert data from the data object we created above
                    datatype: 'json',
                    multiselect: true,
                    height :'auto',
                    colNames:['ID','First Name','Last Name','Email','Address','City','State','Zip','Phone','Licence State','Degree title','NPI','Total Credits Completed','Total Credits Required','%Completed','Course Expiration'], //define column names
                    colModel:[
                    {name:'id', index:'id', key: true,width: 80},
                    {name:'firstName', index:'first_name',key: true},
                    {name:'lastName', index:'last_name', key: true},
                    {name:'email', index:'email', key: true,width: 260},
                    {name:'address', index:'address', key: true,width: 260},
                    {name:'city', index:'city', key: true},
                    {name:'state', index:'state', key: true},
                    {name:'zip', index:'zip', key: true},
                    {name:'phone', index:'phone', key: true},
                    {name:'license_state', index:'license_state', key: true},
                    {name:'degree_title', index:'degree', key: true},
                    {name:'npi', index:'npi', key: true},
                    {name:'tcc', index:'id', key: true},
                    {name:'tcr', index:'id', key: true},
                    {name:'Completed', index:'id', key: true},
                    {name:'coursExpiration', index:'id', key: true}
                    ], //define column models
                    pager: '#pager', //set your pager div id
                    sortname: 'id', //the column according to which data is to be sorted; optional
                    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
                    sortorder: "asc", //sort order; optional
                    rowNum: 20,
                    caption:"Searched Participants", //title of grid
                    onSelectRow: function (rowid, e) {         //onSelectRow event

                        $('.cbox').each(function(){
                            if($(this).attr('checked') == 'checked'){                    
                                var name = $(this).attr('id');
                                var id = $('#'+name).closest('tr.jqgrow').attr('id');   
                                var id = $('#'+name).closest('tr.jqgrow').attr('id');   
                                var strFirstName = $("#grid").getCell(id,"firstName"); 
                                var strLastName = $("#grid").getCell(id,"lastName"); 
                                var intNpi = $("#grid").getCell(id,"npi"); 
                                //alert(firstName);
                                arrID.push({
                                    id : id,
                                    firstName : strFirstName,
                                    lastName : strLastName,
                                    npi : intNpi
                                });                    
                            }
                        });
                        if(arrID.length == 1) {
                            $('.editProfile').removeAttr('disabled');
                            $('.addCmeHours').attr('disabled', false);
                            $('.messageUser').attr('disabled',false);
                        }
                        if(arrID.length > 1) {
                            $('.editProfile').attr('disabled', true);
                            $('.addCmeHours').attr('disabled', false);
                            $('.messageUser').attr('disabled',false);
                        }
                        //alert(arrID.toSource());
                        $('#selectedUser').val(arrID);
                    },
});

and second grid is $("#cmehoursgrid"):

$("#cmehoursgrid").jqGrid({ //set your grid id
                  //  url: 'getSearchedUserDetails', //insert data from the data object we created above
                    datatype: 'local',
                    multiselect: true,
                    colNames:['ID','First Name','Last Name','NPI'], //define column names
                    colModel:[
                    {name:'id', index:'id', key: true,width:50},
                    {name:'firstName', index:'fName',key: true,width:50},
                    {name:'lastName', index:'lName', key: true,width:50},
                    {name:'npi', index:'npi', key: true,width:50},
                    ], //define column models 
                    pager: '#cmehourspager', //set your pager div id
                    multiSort:true,
                    sortable:true,
                    loadonce :true,
                    rownum:5,
                    width:710,
                    height:300,
                    scrollOffset: 1,
                    shrinkToFit:true,
                    sortname: 'id', //the column according to which data is to be sorted; optional
                    viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
                    gridview: true,
                    sortorder: "desc", //sort order; optional
                    caption:"Update CME Hours" //title of grid      
});

Answer 1

Looking on jqGrid demos we can find an example of what you want:

for(var i=0;i<=arrID.length;i++)
    jQuery("#cmehoursgrid").jqGrid('addRowData',i+1,arrID[i]);