understanding jqGrid add method and Ajax request

Question

I have an existing project that I need to maintain, but this is first time I meet the jqGrid...

Mainly, I have a Product, that can have multiple Formules. Each Formule can contain multiple Periods. A Period is described by a DepartureDate and a Price.

This is the code that manages the Period's grid. Specially it adds the grid's navigator with the posibility of add Periods.

When adding a new row in the grid, the user fills-up a form containing 2 fiels: the DepartureDate and a Price corresponding to the newly created Period.

    jQuery("#periode-grid").jqGrid(
        'setGridParam',
        {
            postData: {
                formuleId: rowid // <<< !!!
            },
            datatype: "json"
        })
        .navGrid("#periode-pager",
            {
                "edit": false, "add": true, "del": false,
                "search": true, "addtext": "@Resources.Main.Grid_Add"
            },
            {},
            {
                "url": '@Url.Action("AddAjaxPeriod",
                    new { elementId = @ViewData["ProductId"] })', // <<< !!!
                "closeOnEscape": true, "closeAfterAdd": true,
                "reloadAfterSubmit": true, "width": 500,
                "beforeSubmit": BeforeFormuleSubmit
            });

And this is my AddAjaxPeriod signature, containing 4 parameters, including the date and price:

[HttpPost]
[AjaxRequestOnly]
[Transaction]
public JsonResult AddAjaxPeriod(Guid elementId, Guid formuleId, 
                                DateTime departureDate, double price)
{ ... }

Now everything works fine untill I open the form to add the price and date, fill-in the requested date and price, and click Validate.

I obtain an Error saying that AddAjaxPeriod requests departureDate non-optional parameter and is not filled-in... I could agree, I fill-in the elementId via the anonymous method, the formuleId is set in the postData, but the departureData and price are in the form the the user tries to add. Is there a way to get the values of that "add form" (date and price) and pass them into the AddAjaxPeriod method?

EDIT:

After the Oleg remarks, I found the grid initialization (in occurence in an parent partial view). This is the code:

jQuery("#periode-grid").jqGrid({
    "url": '@Url.Action("PeriodePagedList", new { elementId = ViewData["ProductId"] })',
    "datatype": 'local',
    "mtype": 'POST',
    "width": 400,
    "height": 100,
    "colNames": [
        "@Resources.Catalog_Products.FormulePeriode_DepartureDate",
        "@Resources.Catalog_Products.FormulePeriode_Price",
        "" // Actions
    ],
    "colModel": [
        { "name": 'DepartureDate', "index": 'DepartureDate', "editable": true, "align": 'center', "width": 100, "sorttype": 'date', "datefmt": 'dd/mm/yyyy', "editoptions": { "dataInit": function (element) { jQuery(element).datepicker({ "dateFormat": 'dd/mm/yy', "minDate": 0, "showAnim": '' }) } }, "editrules": { "required": true, "date": true } },
        { "name": 'Price', "index": 'Price', "editable": true, "align": 'center', "editrules": { "required": true }, "width": 100, "formatter": currencyFormatter, "unformat": unformatCurrency },
        { "name": 'Actions', "index": 'Actions', "width": 50, "align": 'center', "search": false, "sortable": false }
    ],
    "sortname": 'DepartureDate',
    "rowNum": 100,
    "loadComplete": OnLoadPeriodeComplete,
    "pager": jQuery('#periode-pager'),
    "pginput": false,
    "pgbuttons": false,
    "viewrecords": false,
    "imgpath": '@Url.Content("~/Content/jqueryui/images")',
    "caption": "@Resources.Catalog_Products.FormulePeriode_GridTitle",
    "shrinkToFit": true,
    "hidegrid": false
});

Answer 1

I'm not sure that I understand all your problems. You don't posted enough details in the text of your question, so I have to guess a little.

First of all one use setGridParam method typically if one need to change multiple times some parameter of jqGrid, after the grid is created. On the other side it's important to understand that one can create the grid (with jQuery("#periode-grid").jqGrid({...});) or add the navigator (with jQuery("#periode-grid").jqGrid("navGrid", ...);) only once. During creating of the grid the initial empty <table id="periode-grid"> will be converted in relatively complex structure of divs and tables (described shortly in the answer for example). So the second attempt to create already created grid will do nothing. In the same way the first call of navGrid will create navigator bar to the grid. The second attempt to call navGrid will just do nothing if the navigator bar already exist.

So I find very suspected combining calls of setGridParam and navGrid because one can be called only once and the another will be called typically multiple times.

If you need to send some additional parameter (like formuleId) to the server I would recommend you to use function form of properties of postData. So you can directly create jqGrid with the following option

jQuery("#periode-grid").jqGrid({
    url: "someUrl",
    postData: {
        formuleId: function () {
            var someValue;
            // evaluate the CURRENT value of parameter which you need to sent
            // you can use someValue=$("#someControl").val(); for example
            ...
            return someValue;
        }
    }

In the way the value of formuleId used during filling of the grid will be always the current one.

During editing jqGrid send id parameter to the server. It's the rowid of editing row of the grid. So you should change the signatire of AddAjaxPeriod method to

public JsonResult AddAjaxPeriod(string id, Guid elementId, Guid formuleId, 
                                DateTime departureDate, double price)

If you prefer to rename id parameter you can use prmNames option of the grid. For example if the option prmNames: { id: "myId" } then you can use

public JsonResult AddAjaxPeriod(string myId, Guid elementId, Guid formuleId, 
                                DateTime departureDate, double price)