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

@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");
};