Which event gets fired when delete row occurs?

Question

Grid contains after save row event "jqGridInlineAfterSaveRow" which works if you edit or add row.

                //--Bind events...
            console.log('Bind events...');
            $("#jqGrid").bind("jqGridInlineAfterSaveRow",function (e, rowid, jqXhrOrBool, postData, options) {
                console.log('EVENT:jqGridInlineAfterSaveRow');
                var item = $(this).jqGrid('getLocalRow', rowid);
                console.log(item);
                console.log('BEFORE:');
                saveObject(item);
                console.log('AFTER:');
            });

What is name of the event for delete row? i need to bind my JS function for delete row.

UPDATE 1 I am trying following option now, but no luck...

                    }).jqGrid("navGrid", "#jqGridPager", {edit: false, add: false, del: false, refresh: false, view: false,search: false,
                                                      delfunc: function (rowids) {
                                                          console.log(rowids);
                                                      }
                                                     })

UPDATE 2 I think issue is with delete buttons at row level not at footer see the screenshot [enter image description here][1]

                        data:rdata,
                    colModel: [
                        {
                            label: "",
                            name: "",
                            width: 70,
                            formatter: "actions",
                            formatoptions: {
                                keys: true,
                                editOptions: {},
                                addOptions: {},
                                delOptions: {                        delfunc : function (id){
                                    console.log(">>>>>>>>>>>>>>>>1");
                                }}
                            }       
                        },

UPDATE 3 Based on Oleg's input, i have changed the code as following:

                $("#jqGrid").bind("jqGridAfterDelRow",function (e, rowid, jqXhrOrBool, postData, options) {
                console.log('EVENT:jqGridAfterDelRow');
                console.log(rowid);
                var item = $(this).jqGrid('delRowData ', rowid);
                console.log(item);
                console.log('BEFORE:');

                console.log('AFTER:');
            });

But now, i am not getting deleted row object??? Actually, i need to get the some of the fields from deleted row e.g. ID. and above binding function will in turn call server side ajax function.

UPDATE 4 Thanks to Oleg for supporting beyond... Here is the code i have mashup from one of the answers from him.

                        colModel: [
                        {
                            label: "",
                            name: "",
                            width: 70,
                            formatter: "actions",
                            formatoptions: {
                                keys: true,
                                editbutton : true, 
                                delbutton : true, 
                                editOptions: {},
                                addOptions: {},
                                delOptions: {
                                    onclickSubmit: function(options, rowid) {
                                        console.log("delOptions::onclickSubmit"); 
                                        var grid_id = $.jgrid.jqID(grid[0].id);
                                        var grid_p = grid[0].p;
                                        var newPage = grid[0].p.page;
                                        var rowdata = grid.getLocalRow(rowid);

                                        // DELETE GRID LOCAL ROW
                                        grid.delRowData(rowid);
                                        $.jgrid.hideModal("#delmod"+grid_id,
                                                          {gb:"#gbox_"+grid_id,jqm:options.jqModal,onClose:options.onClose});                                            

                                        if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
                                            if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
                                                // if after deliting there are no rows on the current page
                                                // which is the last page of the grid
                                                newPage--; // go to the previous page
                                            }
                                            // reload grid to make the row from the next page visable.
                                            grid.trigger("reloadGrid", [{page:newPage}]);
                                        }

                                        return true;
                                    },
                                    processing:true
                                }
                            }       
                        },

score 0 · Answer 1 · answered Mar 06 '17 at 05:23

0

For deleting row use below code snippet: $('#gridId').jqGrid('delRowData',rowid);

answered Mar 06 '17 at 05:23

Murad

523
4
17

I know how to get id of object, i am looking for which event fires after delete row? – dev.sforce Mar 06 '17 at 05:26
Possible you faced with same problem: http://stackoverflow.com/questions/9760839/jqgrid-form-editing-questions-about-actions-after-deleting-a-row – Murad Mar 06 '17 at 05:43
wow that was 2012! ... still do not have support for firing "delete row" event on the grid?? :( – dev.sforce Mar 06 '17 at 05:52

score 0 · Accepted Answer · answered Mar 06 '17 at 06:16

0

You can use "jqGridAddEditAfterComplete" event, which will be triggered after deleting of rows by delGridRow, or you can use "jqGridAfterDelRow" alternatively, because delGridRow calls delRowData internally and jqGridAfterDelRow will be triggered by delRowData.

answered Mar 06 '17 at 06:16

Oleg

220,925
34
403
798

thanks!! worked strange that documentation on wiki is not up to date :( – dev.sforce Mar 06 '17 at 06:21
@dev.sforce: You are welcome! Look at the size of the file [free-jqgrid.d.ts](https://github.com/free-jqgrid/jqGrid/blob/master/ts/free-jqgrid.d.ts) (with more as 2000 rows). The file is short declaration of the methods, options and events. You should imagine how many time it would take to write full documentation of all the options, methods and events. Don't forget that you get the product "free jqGrid" for free and I develop it in my free time. – Oleg Mar 06 '17 at 06:26
Oops! now *delRowData* returns *false* instead of row object? – dev.sforce Mar 06 '17 at 06:27
I think reference to *free-jqgrid.d.ts* itself is very valuable for developer. Thanks! – dev.sforce Mar 06 '17 at 06:29
@dev.sforce: I can't follow you. Were is your current JavaScript code? `navGrid` don't call `delRowData` directly. The `delRowData` never return object. It returns `false` in case of calling with wrong parameter (wrong `rowid`) and `true` in case of successful deleting. – Oleg Mar 06 '17 at 06:33
how to get the row object similar to *jqGrid('getLocalRow', rowid);* Basically, i need the row data or ID, so that i can forward the call to Server. – dev.sforce Mar 06 '17 at 07:16
@dev.sforce: I don't understand you because you don't post any JavaScript code and you don't describe *the context*, where you need to get the row object. The `rowid` is typically the parameter of every callback or event. You can use `getLocalRow` without any problem if you know the rowid and `datatype` of the grid is `"local"` – Oleg Mar 06 '17 at 07:30
I have attached annotated screenshot of the code and logic. Basically, i need to have data ID in order to delete from the server by ajax call. Please see attached UPDATE 4. – dev.sforce Mar 06 '17 at 20:48
@dev.sforce: Sorry, but you use either the wrong event. I suppose that you try to use some methods in the wrong way. The method `navGrid` calls `delGridRow`, **which can make Ajax call to the server**. The `delGridRow` has many callbacks, which allows you to customize the behavior. After `delGridRow` makes the call to the server and the server confirms that deleting of data on the server was successful, jqGrid delete *local* data. After the data not more exist locally it trigger `jqGridAfterDelRow`. Thus getting of already deleted data is not possible inside of `jqGridAfterDelRow` handler. – Oleg Mar 06 '17 at 20:58
So instead of binding 'jqGridAfterDelRow ' i need to supply callback function for 'delGridRow' that will provide me row object that is being deleted? – dev.sforce Mar 06 '17 at 22:26
@dev.sforce: Yes. If I understand you correctly, that you should use `url` parameter of `formDeleting` to force that `delGridRow` make Ajax request to your server instead of just deleting local data. You can use `onclickSubmit` to extend the data to use `url` defined as callback function, use `serializeDelData` or `ajaxDelOptions` for other customization of the Ajax request. One can make practically any Ajax request in the way. – Oleg Mar 06 '17 at 23:12
would you mind providing me handy sample code that uses 'delGridRow'? also, i do not have url access. The access to server objects are highly protected through api (Salesforce Lightning). – dev.sforce Mar 07 '17 at 00:31
Oleg, Thank you for all support! I found your posting related to this requirement. I will update my question with update 4. – dev.sforce Mar 07 '17 at 01:27

score 0 · Answer 3 · answered Sep 25 '21 at 10:58

 $("#yourGridTable").jqGrid(
    "navGrid",
    "#yourGridTablePager",
    {
      del: true
    },
    {},
    {},
    {
      // This event is fired when delete button is pressed in pager 
      //
      beforeSubmit:function(){
          console.log("After delete button of pager is clicked");
      }
    }
);

Which event gets fired when delete row occurs?

3 Answers3