jqGrid onDelete event handler

Question

I'm using a jqGrid with datatype: 'local'. The data of the grid is being set dynamically via addRowData. I don't use the asynchronous ajax stuff such as url + datatype: json because the grid has to display only client state.

Now I want to use the jqGrid delete row functionality (delbutton: true), which calls the delGridRow function. This removes the row just fine, but of course I need to remove the underlying data. Since all of this is just client, I cannot use the editurl.

What I want, is a onRowDelete or onRowEdited event. But jqGrid does not support such a thing, or at least I haven't found any such thing. Implementing my own delete button would be fine, but I only managed to do this via the toolbar which isn't what I want.

After much, much fiddling I came up with the following solution to add my own event handler to jqGrid:

    var originalDelFunc = $.fn.jqGrid.delGridRow;
    $.fn.jqGrid.delGridRow = function (rowids, oMuligrid) {
        var onPreDeleteRowEventHandler = this.getGridParam('onPreDeleteRow'),
            consumeFlag = false;
        if (typeof onPreDeleteRowEventHandler === 'function') {
            consumeFlag = !!onPreDeleteRowEventHandler(rowids, oMuligrid);
        }

        if (!consumeFlag) {
            originalDelFunc.call(this, rowids, oMuligrid);
        }
    };

usage:

    grid.jqGrid(
        'setGridParam',
        {
            onPreDeleteRow: function(rowids, oMuligrid) {
                // remove client data here
            }
        });

Now, my question is: why is this so complicated? Am I missing something here? Is this solution viable, or is it likely to break with future versions?

Answer 1

You wrote that you use delbutton: true. So I suppose that you use formatter: "actions". The formatter: "actions" calls delGridRow on click on Delete button. I suggest that you use afterComplete or afterSubmit callbacks which second parameter contains the information about deleted row (see the documentation). So I suggest you to add formatoptions: {delOptions: {...}} where delOptions includes afterComplete or afterSubmit callbacks. You should only don't forget to return [true] if you use afterSubmit callback. Such way seems me more simple as subclassing of delGridRow which you do.