jqGrid: How to invoke 'reloadGrid' to refresh the grid from external filters

Question

I have filters outside of jqGrid that should trigger a grid reload. This entry gave me some good insight into how to implement it, using the postData option: How to filter the jqGrid data NOT using the built in search/filter box Unfortunately the code snippets are fragments, and I cannot figure out what the overall sequence of calls should be. Here's a condensed view of my current approach:

<script>
  $(document).ready(function() {
    $("#submit").click(function(e) {
      e.preventDefault();
      myGrid.trigger('reloadGrid');
    }); 
  });

var url="${servicesUrl}/projects";

var myGrid = $("#projectList").jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',  
    // ...
});
</script>

How should I structure the code so that every click of the Submit button will trigger a grid reload? Once I have that sorted out, I'm sure I'll be able to add the posData part, my problem is mostly with the overall sequence of calls. I'm not sure which calls should be inside of the ready() function, and how to call 'reloadGrid' properly. Any help greatly appreciated.

Lithuanian

Answer 1

This is what has worked for me: I set a callback on the beforeRequest event which updates the postData property before each request is made.

Note that you will want to put all your jqGrid init code inside the $(document).ready(function(){}); function, otherwise the your table element may not be in the DOM yet

var url="${servicesUrl}/projects";

$(document).ready(function() {
    var $table = $("#projectList");

    $table.jqGrid({
        url: url,
        datatype: 'json',
        mtype: 'GET',  

        beforeRequest: function() {
            var postData = $table.getGridParam('postData');
            //add parameters to postData here
        }
        // ...
    });

    $("#submit").click(function(e) {
        e.preventDefault();
        $table.trigger('reloadGrid');
    }); 
});

Edmon

thank you! I just had to follow the sequence of calls you provided, and it worked perfectly. In fact, I didn't need to use 'beforeRequest', I just added this to my grid options: postData: { brandId: function() { return jQuery("#brandsDropdown option:selected").val(); }, }, – Lithuanian

@Lithuanian Ah... nice, I didn't know you could use functions for the postData! Thanks! – Edmon