In Inine edit of jqgrid, unable to cancel out the earlier edit event and switch to new event

Question

When do inline edit in jqgrid row, then it allows to do but, again click on another row then, it is not cancelling earlier row and both will remain in edit mode. I need it to be cancel last one if user has clicked new row to edit as at single time, single row should be open for edit. (if user click on next row to edit then, last row should be cancel out and new row only should open for edit).

Problem is here, it switch to the new row to edit but, "edit" and "cancel" button of last row remain as it is. Hence, simultaneously user can see two two row's edit, cancel buttons.

       $("#SamplesGrdList").jqGrid({
        url: '@Url.Action("ActionName", "Controller")/',
        datatype: "json",
        colNames: ['Category Name','ValueToChange','Edit'],
        colModel: [
            { name: 'CategoryName', index: 'CategoryName', sortable: true, sorttype: 'text', width: 140, classes: 'bStyle' },
            {
                name: 'ValueToChange', index: 'ValueToChange', width: 82, align: "right", editable: true, editrules: { number: true, required: true, custom: true, custom_func: Deductions }, formatter: 'currency',
                formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00', prefix: '$ ' },
                editoptions: {
                    style: 'width:70px;', dataEvents: [
                       {
                           type: 'blur',
                           fn: function (e) {
                               CalculateDeductions($(this).val());// SOme DB Operation

                           }
                       }
                    ]
                }
            },
            {
                name: 'act', index: 'act', width: 60, align: 'center', sortable: false, formatter: 'actions',
                formatoptions: {
                    keys: false,
                    delbutton: false,
                    onEdit: function (rowid) {
                    },
                    onSuccess: function (jqXHR) {
                        $("#SamplesGrdList").trigger('reloadGrid');
                        return true;
                    },
                    onError: function (rowid, jqXHR, textStatus) {

                    },
                    afterSave: function (rowid) {
                    },
                    afterRestore: function (rowid) {
                        $("#SamplesGrdList").trigger('reloadGrid');   
                    }
                }
            }
        ],
        rowNum: 10, rowList: [10, 20, 30],
        sortname: 'CategoryName',
        shrinkToFit: true,
        sortable: true,
        viewrecords: true,
        sortorder: "desc",
        footerrow: true,
        width: '780',
        height: '100%',
        jsonReader:
            {
                root: 'List',
                page: 'Page',
                total: 'TotalPages',
                records: 'TotalCount',
                repeatitems: false,
                id: 'Id'
            },

        editurl: '@Url.Action("ActionName", "ControllerName")'
    });

Please guide how to resolve this so, at a time, single row is avaialble for edit/save/cancel.

NOTE: jqgrid version is Jquery.jqgrid-4.1.2.min.js

Thanks

score 0 · Answer 1 · answered Mar 13 '15 at 10:32

I think that the only problem which you have: the usage of very old version jqGrid 4.1.2. I recommend you update to jqGrid 4.7 or free jqGrid 4.8.

Just try the demo for example. It uses formatter: "actions" which you need. You can verify that it works like you need.

In Inine edit of jqgrid, unable to cancel out the earlier edit event and switch to new event

1 Answers1