jqgrid EditActionIconsColumn Events

Question

I have a jqgrid with EditActionsIconsColumn available to me in the grid but I am trying to get a hold of the click events on the Edit, Del and Submit. Thanks

Answer 1

The formatter:'actions' is not yet good documented. The current version of jqGrid 3.8.2 support some options which you need. In lines 394-466 of the jquery.fmatter.js of the current version you can see more.

What you need are onEdit, afterSave (on "Submit") and delOptions.onclickSubmit parameters.

To tell the truth I didn't use the 'actions' formatter before and to understand it myself write the demo which solve also on all your questions. To make other easier to find the example in include the most important part of the code here:

var grid = $("#list");
grid.jqGrid({
    datatype: "local",
    data: mydata,           // init local data which will be edited
    editurl: 'clientArray', // we will use local editing
    colNames:['Actions', ... ],
    colModel:[
        {name:'act',index:'act',width:55,align:'center',sortable:false,formatter:'actions',
         formatoptions:{
             keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
             onEdit:function(rowid) {
                 alert("in onEdit: rowid="+rowid+"\nWe don't need return anything");
             },
             onSuccess:function(jqXHR) {
                 // the function will be used as "succesfunc" parameter of editRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                 alert("in onSuccess used only for remote editing:"+
                       "\nresponseText="+jqXHR.responseText+
                       "\n\nWe can verify the server response and return false in case of"+
                       " error response. return true confirm that the response is successful");
                 // we can verify the server response and interpret it do as an error
                 // in the case we should return false. In the case onError will be called
                 return true;
             },
             onError:function(rowid, jqXHR, textStatus) {
                 // the function will be used as "errorfunc" parameter of editRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
                 // and saveRow function
                 // (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
                 alert("in onError used only for remote editing:"+
                       "\nresponseText="+jqXHR.responseText+
                       "\nstatus="+jqXHR.status+
                       "\nstatusText"+jqXHR.statusText+
                       "\n\nWe don't need return anything");
             },
             afterSave:function(rowid) {
                 alert("in afterSave (Submit): rowid="+rowid+"\nWe don't need return anything");
             },
             afterRestore:function(rowid) {
                 alert("in afterRestore (Cancel): rowid="+rowid+"\nWe don't need return anything");
             },
             delOptions: {
                 // because I use "local" data I don't want to send the changes to the server
                 // so I use "processing:true" setting and delete the row manually in onclickSubmit
                 onclickSubmit: function(rp_ge, rowid) {
                     // we can use onclickSubmit function as "onclick" on "Delete" button
                     alert("The row with rowid="+rowid+" will be deleted");

                     // reset processing which could be modified
                     rp_ge.processing = true;

                     // delete row
                     grid.delRowData(rowid);
                     $("#delmod"+grid[0].id).hide();

                     if (grid[0].p.lastpage > 1) {
                         // reload grid to make the row from the next page visable.
                         // TODO: deleting the last row from the last page which number is higher as 1
                         grid.trigger("reloadGrid", [{page:grid[0].p.page}]);
                     }

                     return true;
                 },
                 processing:true // !!! the most important step for the "local" editing
                                 //     skip ajax request to the server
             }
         }},
        ...
    ],
    ...
});