Custom delete button in jqGrid

Question

I would like to implement my own delete functions in jqGrid. I am currently using the built-in user interface (select the line, click the trashcan button in the footer, confirm), but I would prefer to have a delete button on each line and implement my own interface for confirmation.

I don't see anything in the API that allows me to disable deletion on the server - just delRowData , which deletes this on the client. It can be done?

(I am using ASP.NET component , FWIW).

Answer 1

@ Eric made me on the right track on this. His solution works, but retains the existing pseudo-modal user interface for the popup I wanted to avoid.

It also does not take advantage of the ASP.NET JqGrid component . The component actually performs all CRUD operations while it is connected to a correctly configured data source (ObjectDataSource, SqlDataSource, etc.).

This missing element for me was the mechanic behind the components of CRUD operations. When I got off Fiddler, I was able to see that it sends the corresponding data to the same page with the ClientID of the JqGrid object in the query string:

  MyPage.aspx? JqGridID = ctl00_ctl00_Content_Content_MyJqGrid 

When deleted, the contents of the POST are the same as @Erik describes:

  oper = del & id = 18 

So, I was able to duplicate the operation myself, in order to maintain full control over the entire 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 2

There is no part of the main jqGrid component that handles server-side deletion - even if you use built-in deletion without deleting the server part for you, you must handle this yourself. But here's how to set it up so that your script gets called when someone clicks a 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 goes through POST at the delete URL

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

Where id is obviously the id that you passed to this function in this case, the value is toDelete .

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

Answer 3

Another solution is to programmatically click the delete icon (if available). The identifier for the delete icon (actually a div) is "del_ [GridId]". This may not be a very solid decision, as they may change this identification name. But you get exactly the same behavior (as well as a more pleasant confirmation of the modality).

Example:

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