Reloading JQGrid asynchronously when using Asp.Net MVC and passing search/filter criteria

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.

The code `jQuery("#Grid").jqGrid({...});` *create* jqGrid. In can be executed once only. If you execute it the next time nothing happens. So the code from "UPDATED2" should do nothing. — Oleg, Jun 11 '12 at 14:24

score 2 · Answer 1 · edited May 23 '17 at 10:34

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.

edited May 23 '17 at 10:34

Community

1
1

answered Jun 11 '12 at 12:45

Oleg

220,925
34
403
798

thanks Oleg, yeah that's basically what I'm doing in my example, just trying to pass test data, not hooked to the controls like your example. See update however. – ozz Jun 11 '12 at 13:00
I think the posted data is being held onto and passed through on my call to reload – ozz Jun 11 '12 at 13:06
@Ozz: I don't understand why `someParam` should work and `paramTwo` work. I suggested you don't use `setGridParam` at all. If you will use `getGridParam` and examine `postData` returned value you will see that `postData` **is not empty**. So you should *add* additional property to `postData` instead of replacing `postData`. Alternatively you can use `getGridParam`, `$.extend` and the `setGridParam`. – Oleg Jun 11 '12 at 13:10
thanks again Oleg, I see that now. I've updated my question using your suggestion. The link you provided looks like it sets up the params when creating the JQGrid in HTML, I am using the HTML Helper then trying to set the post data in a button click - does that matter? – ozz Jun 11 '12 at 13:33
@Ozz: Look at the UPDATED part of my answer. I hope it will work. I don't use *commercial* version of jqGrid so I can't suggest you the best way. – Oleg Jun 11 '12 at 13:58
I couldn't get that to work Oleg :-( I just analysed the call using Fiddler. The "SomeParam" is specified twice, witht the second time being the actual value I want. How can I remove the first one? – ozz Jun 11 '12 at 14:17
@Ozz: Could you post more full JavaScipt code which you use to create jqGrid? If you don't use *commercial* version of jqGrid then you should create the grid directly. In the case you should be able just add `postData` as additional parameter. – Oleg Jun 11 '12 at 14:21
thanks Oleg, see my answer I have now posted, finally got it, many thanks for all your help, top StackOverflow'er! – ozz Jun 11 '12 at 14:28
ps. with the MVC dll, you use the code: @Html.Trirand().JQGrid(Model.MyGrid, "Grid") in the view, and set all the options in C# code. – ozz Jun 11 '12 at 14:29
@Ozz: You are welcome! The name "MVC.dll" in context jqGrid say me nothing. I supposed that `@Html.Trirand().JQGrid(Model.MyGrid, "Grid")` is a part of [jqSite](http://www.trirand.net/). If it isn't then you use some other product, but which one I have no idea. What you get the "MVC.dll"? – Oleg Jun 11 '12 at 14:34
Sorry yeah, Trirand.Web.Mvc.dll, it IS part of JQSuite, I should have been clearer. It's basically a helper DLL for doing JQGrid with Asp.Net MVC - guess it is not as powerful as the main JQGrid itself – ozz Jun 11 '12 at 15:06
@Ozz: You should verify that you placed the code which I posted inside of `$(function(){/*the code MUST BE here*/});` handle. – Oleg Jun 11 '12 at 15:08
Oleg, can you please post a new Answer with a full snippet of what you mean, I'm getting a little lost now – ozz Jun 11 '12 at 15:17
@Ozz: I included `$(function(){...}` in the code which I posted. You should read description of [jQuery.ready](http://api.jquery.com/ready/) which is **must to use** in any JavaScript solution. `$(function () {/*the code here*/});` is the short form of `$(document).ready(function () {/*the code here*/});`. – Oleg Jun 11 '12 at 15:25
haha, right I get you..... everything I'm doing is inside a click event as follows: $("#SearchButton").click(function () { I'm not THAT daft!! and the code IS getting called, it hits the action method, but just doesn't pass in this value – ozz Jun 11 '12 at 15:28
@Ozz: You should use `$(function(){/*now we are in document-ready handler */$("#SearchButton").click(function () {/*here is click-event handler*/}); });` – Oleg Jun 11 '12 at 16:02
my answer using serialize grid, is in the click event handler, which is in document ready. As was trying your suggestion. Listen, many thanks for all your help, I got it to work, that's the main thing! – ozz Jun 11 '12 at 16:04

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

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.

edited May 23 '17 at 10:24

Community

1
1

answered Jun 11 '12 at 14:27

ozz

5,098
1
50
73

The way with `serializeGridData` should works exactly like the way with `postData`.I think the problem exist in the part of code which you don't included in the text of your question. In any way good it you find at least one way which work in your project. – Oleg Jun 11 '12 at 14:31
hmmm, maybe. It's C# code, and there is no way to set post data in there though. – ozz Jun 11 '12 at 14:46
jqGrid has no C# line. I still suppose that you use [jqSuite for ASP.NET MVC](http://www.trirand.net/download.aspx). Moreover I am sure that the error are *not in the code which you posted*. The error must be outside. For example if you would place the code, which you posed or the code which I posted you before, in the wrong place. Do you placed the JavaScript code inside of `$(function(){/*the code MUST BE here*/});`? – Oleg Jun 11 '12 at 15:07
Oleg, yes I am using JQSuite, it IS JQGrid though is it not? just a .Net wrapper around JQGrid itself. Can you expand your code suggestion to more than just $(function(){/*the code MUST BE here*/}); ?? – ozz Jun 11 '12 at 15:16

Reloading JQGrid asynchronously when using Asp.Net MVC and passing search/filter criteria

2 Answers2

Linked