Where can i find an example of jqGrid being used as part of form for posting?

Question

I have a form where I have a bunch of textbox and dropdowns. I now need to add another array of sub objects and include that as part of the my form post.

I was going to hand roll this as an html table but i thought that i could leverage jqGrid. What is the best way I can use jqGrid locally to add data and then have that included in the form post? The reason that i need jqGrid to act locally is that these are subrecords as part of the larger form so I can't post the jqGrid rows until the larger form is posted (so i have an Id to join these rows with)

So for example, if my post was an Order screen (with textboxes for date, instructions, etc) and now i want to have a grid that you can add products into the order. You can have as many rows as you want . .)

my backend is asp.net-mvc if that helps with any suggestions.

score 2 · Answer 1 · answered Apr 14 '13 at 08:23

2

If you use form editing you can extend the postdata in many ways. The most simple one is the usage of onclickSubmit callback:

onclickSubmit: function (options, postData) {
    return {foo: "bar"};
}

If you use the above callback then the data which will be post to the server will be extended with the parameter foo with the string value "bar".

Another possibility is the usage of editData option of editGridRow. The best way is to use properties of editData defined as function. In the way the funcion will be called every time before posting of data.

For example the following code

$("#grid").jqGrid("navGrid", "#pager", {}, {
    editData: {
        foo: function () {
            return "bar";
        }
    },
    onclickSubmit: function (options, postData) {
        return {test: 123};
    }
});

will add foo=bar and test=123 to the parameters which will be send to the server.

The next possibility will be to use serializeEditData. The callback gives you full control on the data which will be sent to the server.

answered Apr 14 '13 at 08:23

Oleg

220,925
34
403
798

but i don't want to send to the server on the specific jqGrid actions . . I want to just store them locally and when i click "Submit" on the larger form, i want to include the jqGrid data . .does that make sense? – leora Apr 14 '13 at 12:58
@leora: It would more clear what you want if you included some code or some screenshorts which shows how you use jqGrid. Some people for example starts inline editing of all rows and think that everybody do the same. In the case the grid has textboxes and other controls. Another kind of usage jqGrid means the usage of local cell editing or local inline editing. Later after the user edited *and saved* the rows/cells of grid one want to send modified grid to the server. Access to the grid data in both cases are different. How you use jqGrid? – Oleg Apr 14 '13 at 14:14
I don't see why those are different. In either case all jqGrid editing is "local" and the only time anything goes to the server is when i click my form submit (again, which in addition to the grid data also had a bunch of other textboxes, etc) – leora Apr 14 '13 at 14:25
@leora: believe me that there are difference. One can use `$("#grid").jqGrid("getRowData")`, `$("#grid").jqGrid("getGridParem", data)` for example. Dependent of how you use jqGrid locally (local paging, usage of formatters and so on) you can have different results. If rows are in editing mode then `$("#grid").jqGrid("getRowData")` will don't work (see [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods)) and `$("#grid").jqGrid("getGridParem", data)` can provide wrong data. So the information which I ask in my previous comment is really important. – Oleg Apr 14 '13 at 14:32
ok . . lets keep it simple as a start, assume no inline editing and I have to bring up the form to edit a row. again when i add a row or edit a row nothing is hitting the server . . when i hit form submit I want to model bind to an array of objects on the server like this: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx – leora Apr 14 '13 at 15:18
@leora: The old article which you referenced don't shows *how you use jqGrid* and don't shows *how you submit the form*. Classical submitting of the form oriented on form elements only. If you use `jQuery.click` event handler on `sumbit` button you can of you can use `jQuery.serializeArray()` for example, then you can extend the information with any custom information like with array from `$("#grid").jqGrid("getRowData")` or from `$("#grid").jqGrid("getGridParem", "data")` and you can use finally `jQuery.ajax` or `jQuery.post` to send the data. Is it what you need? What is your real problem? – Oleg Apr 14 '13 at 16:48
i think $("#grid").jqGrid("getGridParem", "data") is what i need but i will give it a try to confirm. Do you know of any example of grabbing data from $("#grid").jqGrid("getGridParem", "data") and using as part of a form post (i agree that i will have to do my own custom post instead of a regular submit given that these are not part of an input – leora Apr 14 '13 at 18:15
@leora: there are many other old answers which are close to what you need. The main difference is the requirements of backend for the data. You don't post any code which you use. Look at [here](http://stackoverflow.com/a/6800440/315935), [here](http://stackoverflow.com/a/8568113/315935). Probably you can do something like `$("#myFormId").serialize() + "+" + $param({gridData: $("#grid").jqGrid("getGridParem", "data")})` and later use the resulting string as `data` for `$.ajax`. Probably something like `$.extend(true, $("#myFormId").serializeArray(), $("#grid").jqGrid("getGridParem", "data"))`. – Oleg Apr 14 '13 at 18:33

Sharun · Answer 2 · 2013-04-15T10:48:32.933

I am using the method of serialization as Oleg suggested.

view

  $( "#Save" ).click( function ( e )
            {
                e.preventDefault();


                  var griddata= $( "#list" ).getRowData();
                    var model = {
                        grid: griddata
                    };

                    var gridVal = JSON.stringify( model );
                   //Now set this value to a hiddenfield in the form and submit
                   $('#hiddenGridDta').val(gridVal );
                  $( 'form' ).submit();

});

And in the controller, deserialize the values using Newtonsoft.json.jsonconvert().

 public ActionResult SaveTest(TestClass test)
        {

       testViewModel myGrid = JsonConvert.DeserializeObject<testViewModel>(test.hiddenGridDta);
................

}

testViewModel class

  public class testViewModel 
    {
        public IEnumerable<TestGrid> grid { get; set; }
    }

TestGrid class

 public class profileGrid
    {
//fields in the jqgrid (should use the same name as used in *colModel:* of jqgrid)

        public int x
        {
            get;
            set;
        }
        public int y
        {
            get;
            set;
        }
          .......


    }

Where can i find an example of jqGrid being used as part of form for posting?

2 Answers2