jquery – jqgrid : Custom delete handler

It may possible you are face off the problem to synchronize some other items in your GUI when you delete a row in your jqgrid.

You can use this tip to do it :

var myDelOptions = {
    onclickSubmit: function(options, rowid) {
          var grid_id = $.jgrid.jqID($( "#tip" )[0].id),
             grid_p = $( "#tip" )[0].p,
             newPage = grid_p.page;

          // reset the value of processing option which could be modified
          options.processing = true;

          // delete the row
          $( "#tip" ).delRowData(rowid);
          $.ajax({
                url: 'backend/ip.php',
                type: 'POST',
                data : 'oper=del&id=' + rowid,
                dataType: "text",
                success: function(data, status, xr) {
                         $( "#troute" ).trigger("reloadGrid");
                         $( "#tip" ).trigger("reloadGrid");
                },
                error: function(e) {
                         //called when there is an error
                         //console.log(e.message);
                }
           });
           
           $.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.
                     $( "#tip" ).trigger("reloadGrid", [{page:newPage}]);
            }

            return true;
     },
     processing:true
}; // fin variable

 $("#tip").jqGrid({
     url: "backend/ip.php",
     datatype: "xml",
     mtype: "GET",
     colNames: [" ", "Prefix", "Longueur", "Device"],
     colModel: [
                { name: 'myac', width:80, fixed:true, sortable:false, resize:false,
                  formatter:'actions', formatoptions:{editbutton: false, onedit:null,
                  delbutton:true, delOptions: myDelOptions}},
                { name: "prefix", width: 125, align: "center" },
                { name: "longueur", width: 100, align: "center" },
                { name: "device", width: 75, align: "center" }
      ],
      [...]
      caption: "Affectation IP / Intf"
});

[...]

The great thing is that you are able to make some data / gui treatment. Here I make a data update by means of a jquery ajax call and update jqgrids by means of two trigger(“reloadGrid”) calls.

Hope this can help