Struts 2 jQuery Grid reload issue

Question

I have following jqGrid in my page

<sjg:grid           id="reportGrid" 
             gridModel="gridModel" 
             autowidth="true" 
          reloadTopics="refreshGrid" gridview="true"  
  onGridCompleteTopics="gridLoadComplete"           
       onSuccessTopics="dataLoadCompleted"   
             navigator="true" 
                 pager="true" 
       navigatorSearch="true" 
navigatorSearchOptions="{multipleSearch:true}" 
                scroll="true" 
                rowNum="10000" 
             hoverrows="false" 
       groupColumnShow="false" 
            groupField="['field1','field2']" 
                  href="webReport" 
               formIds="myform" 
              dataType="json" 
              loadonce="true" >
    ..........................
    ..........................
    ..........................
</sjg:grid>

and a button

<sj:a button="true" 
  buttonIcon="ui-icon-refresh" 
  buttonText="true"  
     onclick="reloadGridFunc();">
    Submit
</sj:a>

and in JS I have this

function reloadGridFunc()
{
    
    $("#reportGrid").jqGrid('setGridParam',{datatype:'json'});      
    $.publish("refreshGrid");
    
    // $("#reportGrid")
    //  .jqGrid('setGridParam',{url:"userReport",datatype:"json"}).
    trigger("reloadGrid");
        
}

$.subscribe('gridLoadComplete', function(event, data) {
    // $("#reportGrid").jqGrid('clearGridData');    
    // $('#reportGrid').setGridParam({ page: 1, datatype: "json"})
    //    .trigger('reloadGrid');   
    // $("#reportGrid").trigger('reloadGrid');          
});
  
$.subscribe('dataLoadCompleted', function(event, data) { 
    // $("#reportGrid").trigger('reloadGrid');
});

but what I am seeing is that the grid populates with new data but the grouping is not cleared; I have to press the reload button on bottom of the grid to refresh the grid, and after that the data representation looks fine.

I have a form in which a grid , anchor and other HTML elements exists, and according top these I select different criteria and click the button, the grid is populated and when I change the criteria the grid repopulating, but the old grouping is preserved. I have to press the reload button in grid to fix this.

Answer 1

When the grid is completed it checks for the subscribers of the onGridCompleteTopics.

A comma delimited list of topics that published after all the data is loaded into the grid and all other processes are complete.

---

When the grid is succeeded it checks for the subscribers of the onSuccessTopics.

A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided).

---

If no subscribers is found for the topic event, they won't be bound to the grid. So, make sure you subscribe to the grid before it checks for topic's subscribers.

See an example of grid with topics.

The code to reload grid

</sjg:grid>
<script type="text/javascript">
  $(document).ready(function(){
    $("#reportGrid").trigger("reloadGrid");
  });
</script> 

---