Custom delete button in jqGrid

Question

I'd like to implement my own delete functionality in jqGrid. I'm currently using the built-in UI (select row, press trashcan button in footer, confirm) but I'd prefer to have a delete button in each row and implement my own UI for confirmation.

I don't see anything in the API that allows me to fire off a delete to the server - just delRowData, which deletes it on the client. Can this be done?

(I'm using the ASP.NET component, FWIW).

Answer 1

There is no part of the basic jqGrid component that handles the server side deletion - even if you use the built in delete, its not removing it server side for you, you have to handle that yourself. But here's how to set it up so your script is called when someone clicks your custom delete button:

// your custom button is #bDelete
$("#bDelete").click(function(){ 

    // Get the currently selected row
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow');

    // You'll get a pop-up confirmation dialog, and if you say yes,
    // it will call "delete.php" on your server.
    $("#mygrid").jqGrid(
        'delGridRow',
        toDelete,
          { url: 'delete.php', 
            reloadAfterSubmit:false}
    );
});

The following information is past via POST to your delete URL

Array
(
    [oper] => del
    [id] => 88
)

Where id is obviously the id you passed into the function in this case, the value of toDelete.

I actually just did this for my own project, in response to your question - although I had a vague idea of how to do it before I saw the question. So ... thanks for making me get to it!

Answer 2

@Erik got me on the right path on this one. His solution works, but preserves the existing pseudo-modal popup confirmation UI, which I wanted to avoid.

It also doesn't capitalize on the services the JqGrid ASP.NET component provides. The component actually takes care of all CRUD operations as long as it's wired up to a properly configured data source (ObjectDataSource, SqlDataSource, etc).

This missing piece for me was the mechanics behind the component's CRUD operations. By poking around with Fiddler I was able to see that it POSTs the relevant data to the same page, with the ClientID of the JqGrid object in the querystring:

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

For deleting, the contents of the POST are as @Erik describes:

oper=del&id=18

So I've been able to duplicate the operation on my own so that I retain complete control of the whole process:

$(".DeleteButton", grid).click(function(e) {
    var rowID = getRowID(this);
    $(grid).setSelection(rowID, false);
    if (confirm('Are you sure you want to delete this row?')) {
        var url = window.location + '?jqGridID=' + grid[0].id;
        var data = { oper: 'del', id: rowID };
        $.post(url, data, function(data, textStatus, XMLHttpRequest) {
            $(grid).trigger("reloadGrid");
        });
    } else {
        $(grid).resetSelection();
    } // if
}); // click

getRowID = function(el) {
    return $(el).parents("tr").attr("id");
};

Answer 3

Another solution is to programmatically click on the delete icon (if present). The id for the delete icon (actually a div) is "del_[GridId]". This may not be a totally solid solution since they may change that id naming. But you get exactly the same behaviour (and also the nicer confirm modal).

Example:

$('#MyButton').click(function() { $('#del_' + gridId).click(); });