How to assign the data dynamically to jqGrid?

Question

Here is my code for creating the jqGrid

$("#ptDataGrid").jqGrid({
                    datatype: 'local',
                    data: arrSpecData,
                    colModel: colmod,
                    rowNum: 10,
                    rowList: [10],
                    pager: '#ptPager',
                    gridview: true,
                    rownumbers: false,
                    viewrecords: true,
                    loadonce:false,
                    hidegrid: false,
                    autowidth: true,
                    caption: 'Crank Pin',
                    height: '100%',
                });

Then i ahve applied some filters on my data and created another array called FilteredData. Now i wanted to assign this new Data source to my grid. I have tried all the approaches i know. But nothing worked. So, How can we assign the new data source to the jqGrid Dynamically? Please suggest some way to assign it.

                dataGrid.setGridParam({ data: filterdData });
                dataGrid[0].refreshIndex();  
                dataGrid.trigger("reloadGrid"); 

Still the same result i am getting :(

Workaround #1:

 $('#divGrid').children().remove();
 $('#divGrid').html(' <table id="ptDataGrid" class="jqgriddata"><tr><td/></tr></table><div id="ptPager"></div> ');  

 createGrid(filterdData,true);

Answer 1

You can first set new data with respect of setGridParam and then call refreshIndex method (see the answer) to update the internally used _index parameter.

UPDATED: Click on the button "Change data" on the demo to verify that the approach work.