How to dynamically assign jqGrid data?

Question

Here is my code for creating 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 applied some filters to my data and created another array called FilteredData strong>. Now I wanted to assign this new data source to my grid. I have tried all the approaches that I know. But nothing happened. So how can you assign a new data source to jqGrid dynamically? Please suggest some way to assign it.

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

However, the same result that I get: (

Workaround No. 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 the new data with respect to setGridParam and then call the refreshIndex method (see answer ) to update the internally used _index .

UPDATED . Click the "Edit Data" button on the demo to make sure this approach works.