How to pass form data and jqGrid (editUrl) data to Controller at same time

Question

I have an asp.net MVC3 app with various bits of form data and a jqGrid.

When I edit a row in the jqGrid I need to post the grid data as well as some of the form pieces to the editUrl controller.

I can post the jqGrid edited data to my controller through the editUrl just fine.

Is there a way to do this?

Im not sure how to send the other form elements and how to receive them in my controller.

Any help will be greatly appreciated.

Below is my jqGrid:

    $("#jqTable").jqGrid({
        // Ajax related configurations
        url: '@Url.Action("_CustomBinding")',
        datatype: "json",
        mtype: "POST",
        postData: {
            programID: function () { return $("#ProgramID option:selected").val(); },
            buildID: function () { return $('#Builds option:selected').val(); }
        },

        // Specify the column names
        colNames: ["Actions", "Assembly ID", "Assembly Name", "Assembly Type", "Cost", "Order", "Budget Report", "Partner Request", "Display"],

        // Configure the columns
        colModel: [
        { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true} },
        { name: "AssemblyID", key: true, index: "AssemblyID", width: 40, align: "left", editable: false },
        { name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: true, edittype: 'select',
            editoptions: {
                dataUrl: '@Url.Action("_Assemblies")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        },
        { name: "AssemblyTypeName", index: "AssemblyTypeName", width: 100, align: "left", editable: false, edittype: 'select' },
        { name: "AssemblyCost", index: "AssemblyCost", width: 50, align: "left", formatter: "currency", editable: true },
        { name: "AssemblyOrder", index: "AssemblyOrder", width: 50, align: "left", editable: true },
        { name: "AddToBudgetReport", index: "AddToBudgetReport", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 100, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox' },
        { name: "Show", index: "Show", width: 50, align: "center", formatter: "checkbox", editable: true, edittype: 'checkbox'}],

        // Grid total width and height and formatting
        //width: 650,
        //height: 220,
        altrows: true,

        // Paging
        //toppager: true,
        pager: $("#jqTablePager"),
        rowNum: 10,
        rowList: [10, 20, 30],
        viewrecords: true, // Specify if "total number of records" is displayed
        emptyrecords: 'No records to display',

        // Default sorting
        sortname: "AssemblyID",
        sortorder: "asc",

        // Grid caption
        caption: "Build Template",

        // grid command functionality
        editurl: '@Url.Action("_AjaxUpdate")',
        onSelectRow: function (AssemblyID) {
            if (AssemblyID && AssemblyID !== lastsel) {
                $('#jqTable').jqGrid('restoreRow', lastsel);
                $("#jqTable").jqGrid('editRow', AssemblyID, true);
                lastsel = AssemblyID;
            }
        }
    }).navGrid("#jqTablePager",
        { refresh: false, add: false, edit: false, del: false },
            {}, // settings for edit
            {}, // settings for add
            {}, // settings for delete
            {sopt: ["cn"]} // Search options. Some options can be set on column level
     );

Solution 1

I see you use already programID and buildID properties defined as functions. The functions will be called during every request to get the data for the grid. In the same way you can use inlineData or extraparam parameter of the editRow which you call explicitly inside of your onSelectRow callback.

Try to call the demo which has the following jqGrid options:

inlineData: {
    myParam: function () {
        alert("inlineData is calling!!!");
        return "OK";
    }
},
onSelectRow: function (id) {
    if (id && id !== lastSel) {
        $(this).jqGrid('restoreRow', lastSel);
        $(this).jqGrid('editRow', id, true, null, null, null, {
            myNextParam: function () {
                alert("extraparam of 'editRow' is calling!!!");
                return "Fine";
            }
        });
        lastSel = id;
    }
}

You will see two alerts if you would save the data of the editing row. In my demo I used editurl: 'myDummyUrl' which has no code on the server side and you will see an error at the end, but if you examine the HTTP traffic (with respect of Fiddler or Firebug) you will see that the following additional parameters will be send to the editurl:

myParam=OK&myNextParam=Fine

I think it is what you need.

inlineData:{}

is working fine for getting work before goes to controller while editing. But in case of delete how to get event like before to pass control to controller to make json , after click on delete.

Solution 2

You can customize what is being sent to the server using onclickSubmit option:

.navGrid("#jqTablePager",
    { refresh: false, add: false, edit: false, del: false },
        { // settings for edit
            onclickSubmit: function(params, postdata)
            {
                postdata.extraParam = 'value'
            }
        },
        {}, // settings for add
        {}, // settings for delete
        {sopt: ["cn"]} // Search options. Some options can be set on column level
 );

The controller will receive a JSON object containing all edited properties + extraParam. It is up to you how you handle this on the server side.

Comments

[Squeal]

Thank you for your response Oleg. I would up using a mixture of your answer and Tomasz' answer.