CODEWITHSUNDEEP
jqueryasp.net-mvcjqgrid
LSU.Net
LSU.Net

Reputation: 849

jqGrid: Additional Edit Parameters not being posted to server

I'm using the Lib.Web.MVC helper so my initial jqGrid JS is generated by that object. After the call to @grid.GetJavaScript, I then issue a separate call to modify the editData collection as specified below. Here is the effective JS that I'm using. The values of AreaId and AreaItemId don't ever get submitted to the controller action. 

$(document).ready(function () {
    $('#GetAreaItemDetails').jqGrid({
        colNames: ['Code', 'Name', 'Description', 'Has Addl Comments'],
        colModel: [
            { editable: true, editoptions: { "maxlength": 16 }, editrules: { required: true },
                name: 'AreaItemDetailCode'
            },
            { editable: true, editoptions: { "maxlength": 32 }, editrules: { required: true },
                name: 'AreaItemDetailName'
            },
            { editable: true, editoptions: { "maxlength": 128 }, editrules: { required: true },
                name: 'AreaItemDetailDescription'
            },
            { editable: true, edittype: 'checkbox', editrules: { required: true },
                name: 'HasAdditionalComments'
            }],
        caption: 'Area Item Details',
        url: '/Admin/GetAreaItemDetails',
        datatype: 'json',
        footerrow: true,
        jsonReader: { repeatitems: false, id: 'Id', subgrid: { repeatitems: false} },
        mtype: 'POST',
        pager: '#GetAreaItemDetailsPager',
        prmNames: { npage: 'npage' },
        rowList: [10, 20, 30, 40, 50],
        rowNum: 10,
        sortname: 'AreaItemDetailId',
        viewrecords: true,
        height: '100%'
    }).jqGrid('navGrid', '#GetAreaItemDetailsPager',
        { search: false },
        { height: 175, url: '/Admin/UpdateAreaItemDetail', width: 400, recreateForm: true,
            closeAfterEdit: true
        },
        { height: 175, url: '/Admin/InsertAreaItemDetail', width: 400, recreateForm: true,
            closeAfterAdd: true
        });

    $("#GetAreaItemDetails").jqGrid('navGrid', '#GetAreaItemDetailsPager',
        {/*navGrid options*/},
        {
            editData: {
                AreaItemId: function () {
                    return $('#ddlAreaItems').val();
                },
                AreaId: function () {
                    return $('#ddlAreas').val();
                }
            }
        },
        {
            editData: {
                AreaItemId: function () {
                    return $('#ddlAreaItems').val();
                },
                AreaId: function () {
                    return $('#ddlAreas').val();
                }
            }
        });
});

Upvotes: 0

Views: 1746

Answers (1)

Oleg
Oleg

Reputation: 222017

I suppose that the reason of your problem are two calls of navGrid which you do instead of one. The navGrid method creates the navigator bar. You can create only one navigator bar in the grid.

How you can see from the line of code of navGrid the function test existence of nav property which will be crated by the method (see the line which just assign this.nav = true;). So the code

if(this.nav) {return;}

will be used just to skip the second execution of the method.

So to solve your problem you should just combine two calls in one:

...
}).jqGrid('navGrid', '#GetAreaItemDetailsPager',
    { search: false },
    { height: 175, url: '/Admin/UpdateAreaItemDetail', width: 400, recreateForm: true,
        closeAfterEdit: true,
        editData: {
            AreaItemId: function () {
                return $('#ddlAreaItems').val();
            },
            AreaId: function () {
                return $('#ddlAreas').val();
            }
        }
    },
    { height: 175, url: '/Admin/InsertAreaItemDetail', width: 400, recreateForm: true,
        closeAfterAdd: true,
        editData: {
            AreaItemId: function () {
                return $('#ddlAreaItems').val();
            },
            AreaId: function () {
                return $('#ddlAreas').val();
            }
        }
    });

You can reduce the code if you would set common Add and Edit settings as default settings (on the page) for form editing 

$.extend($.jgrid.edit, {
    height: 175,
    url: '/Admin/InsertAreaItemDetail',
    width: 400,
    recreateForm: true,
    closeAfterAdd: true,
    closeAfterEdit: true,
    editData: {
        AreaItemId: function () {
            return $('#ddlAreaItems').val();
        },
        AreaId: function () {
            return $('#ddlAreas').val();
        }
    }
});

before calling of navGrid. In the case the call itself can be reduced to

...
}).jqGrid('navGrid', '#GetAreaItemDetailsPager', { search: false });

Upvotes: 2

Related Questions