Reloading JQGrid asynchronously when using Asp.Net

Question

I am using the JQSuite's Trirand.Web.MVC dll for my integration of JQGrid into my MVC 3 application.

I am using the HTML helper for JQGrid, so in my View I have the following:

@Html.Trirand().JQGrid(Model.MyGrid, "Grid")

I know I can reload my grid on a button click by using the following code:

$("#Grid").trigger("reloadGrid");

This WILL reload the grid, calling the Action method I specified in my contoller code for setting up the JQGrid.

I have other controls on the page that I use for searching/filtering, these get passed to the action method fine.

I found the setGridParam method, which seems to indicate you can do something like:

$("#Grid").setGridParam({ someParam: 'blah' }).trigger("reloadGrid");

or this:

$("#Grid").jqGrid('setGridParam', { postData: { someParam: 'somevalue'} }).trigger("reloadGrid");

but my someParam parameter on my action method does not get filled with either method

How can I set these on the JQGrid so that they are picked up by Action method when doing the reload?

UPDATE: I have now tried this method for another parameter and it DOES work!

So now I have:

$("#Grid").jqGrid('setGridParam', { postData: {
            someParam: 'somevalue', 
            paramTwo: ' some value',
            paramThree: 'some other value'
        } }).trigger("reloadGrid");

someParam does not work, but paramTwo and ParamThree DO work.

strange!

What could stop one parameter from working?

UPDATE2: Using Oleg's suggestion as follows:

var myGrid = jQuery("#Grid").jqGrid({                
                postData: {
                    someParam: function () { return $("#txtBox1").val(); },
                    paramTwo: function () { return $("#txtBox2").val(); },
                    paramThree: function () { return $("#txtBox3").val(); }
                }
            });

        myGrid.trigger('reloadGrid'); 

...NONE of the values get sent through. I have validated the JQuery returns the correct values before it does the reload.

Answer 1

Right, many thanks to OLEG for his help as it led me to an answer!

The issue was "SomeParam" was already specified in the post data so I had to extend the existing data using this form:

('#grid').jqGrid({                 
                serializeGridData: function(postData) { 
                  var newPostData = $.extend(postData, {
                      someParam: return $("#txtBox1").val(), 
                      paramTwo: return $("#txtBox1").val(),
                      paramThree: return $("#txtBox1").val(),
                  }); 

                  return $.param(newPostData); 
                } 
            }).trigger("reloadGrid");

this post helped me out with this, Oleg also posting over there too.

Answer 2

If I understand you correct you can use postData parameter to send additional parameters to the server. The most simple will be to use postData having methods (properties as functions):

postData: {
    myCustomParam: function () { return $("#myInputFiled").val(); }
}

You can find more information here. In the case the current value will be read at any request to the action and the value will be send as additional parameter with the name myCustomParam.

If you need to get the values of all control from the form you can use $.serializeArray function and send all results as one additional parameter.

You can get reference to postData parameter using getGridParam and set/change new additional property. Because getGridParam return the reference to it's internal parameters if you ask for object parameters you will don't need to use setGridParam.

UPDATED: I don't know where your code are executed before the grid is created or after that. You can try the following code

<script type="text/javascript">
    $(function () {
        var $grid = $("#<%= JQGrid1.ClientID %>");
        if ($grid.length > 0 && $grid[0].grid !== undefined) {
            var postData = $grid.jqGrid("getGridParam", "postData");
            postData.myParam = function () {
                return "test data";
            };
        } else {
            $.extend($.jgrid.defaults, {
                postData: {
                    myParam: function () {
                        return "test data";
                    }
                }
            });
        }
    });
</script>

I hope it will work in both cases.