Inline JqGrid save button click issue

问题

I was brainstorming almost a day on how to invoke my MVC controller action with inline edit jQgrid save button. Please see the below screenshot

I have tried the following configuration for jqGrid

$("#tbl-items").CreateGrid({
                url: '@Url.Action("ItemList", "Item")',
                editurl: '@Url.Action("Create", "Item")',
                jsonReader: { id: "ItemID" },
                prmNames: { id: "ItemID" },
                colNames: ['Item ID', Item Name],
                colModel: [{ name: 'ItemID', index: 'ItemID', sorttype: 'integer', hidden: true, key: true },
                   { name: 'ItemName', index: 'ItemName', sortable: true, autowidth: true, shrinkToFit: true, searchoptions: { sopt: ['cn'] }, editable: true }],
                gridCompleteCallback: function () {
                    //Code to bind my custom edit and delete button as per the requirement
                },
                container: "#container-item",
                server: true,
                pagerID: "#itempager",
                sortName: 'ItemName',
                sortorder: 'asc',
                loadingText: 'Loading please wait',
                noRecordText: 'Not records found'
            });

In order to override the save event I have tried the following script

 function saveItem(action) {
                return {
                    url: '@Url.Action("Create", "Item")', // Url to my MVC controller
                    onclickSubmit: function (params) {
                        var list = $("#tbl-items");
                        var selectedRow = list.getGridParam("selrow");
                        // Code 
                    }
                };
            }

$("#tbl-items").jqGrid('navGrid', '#itempager',
            {
                //add: false,
                edit: false,
                del: false
            },
            saveItem('PUT')
        );
        $("#tbl-items").jqGrid('inlineNav', '#itempager',
            {
                edit: false,
                add: true, 
            });

I know I have done something wrong in my jqGrid configuration. Can anyone correct me in fixing my issue. Thanks in advance

回答1:

To use Add button of the form editing you don't need to use inlineNav at all. You need use only navGrid with the corresponding parameters. The method navGrid adds some buttons and it calls the corresponding jqGrid method on click on the corresponding button of navigator bar. The full list of parameters of navGrid described in the documentation and it looks as

$("#tbl-items").jqGrid("navGrid", "#itempager", navGridOptions,
    prmEdit, prmAdd, prmDel, prmSearch, prmView);

navGridOptions will be used to specify the options of navGrid itself, like {edit: false, del: false}, which you use. The next parameter (you use saveItem('PUT')) specify the options of editGridRow method which will be called on click on Edit button of navigator bar. You use edit: false option of navGrid and the parameter will be ignored. The next parameter specify the options of editGridRow called on click on Add button. You don't specified any options so the default options will be used. jqGrid will uses editurl as the option.

To save the new row one need to press on Submit button of form editing. No Save button is needed. It will be used only for inline editing in the user first clicks on Add/Edit buttons added by inlineNav and then the user need to click on Save button for saving the changes. Because you wrote that you "need to set just the add form editing button", you should remove inlineNav, which will remove unneeded Save button from the navigator bar.

UPDATED: If you do need to use inline editing and no form editing then you should use navGrid in the form which add no Add button and then use inlineNav which add Add button and which specify url option in both editParams and addParams.addRowParams options. The usage of both options is required because you use old jqGrid 4.5.1, which contains buggy inlineNav. Nevertheless I hope that the below code will work:

$("#tbl-items").jqGrid('navGrid', '#itempager',
    {
        add: false,
        edit: false,
        del: false
    }
);
$("#tbl-items").jqGrid('inlineNav', '#itempager',
    {
        edit: false,
        add: true, 
        editParams: {
            keys: true,
            url: '@Url.Action("Create", "Item")'
        },
        addParams: {
            addRowParams: {
                keys: true,
                url: '@Url.Action("Create", "Item")'
            }
        }
    }
);

I added keys: true which allows to save the row by pressing Enter key. I recommend you to update to free jqGrid to have less problems and to be able to use simplified options for inline editing described in the wiki article.

来源：https://stackoverflow.com/questions/33383724/inline-jqgrid-save-button-click-issue