CODEWITHSUNDEEP
javascriptjqueryjqgrid
user3428422
user3428422

Reputation: 4560

jqGrid using your own delete style button

Am new to jqGrid for about 2 hours now,

I had added deleting from a row successfully. so i.e.

colModel: [

 .....

name: 'actions', index: 'actions', width: 105, editable:false, formatter: 'actions',
formatoptions: {
    keys: true,
    editbutton: false,
    delOptions: { url: getURL('Action') + 'method?f='+$('#id').val()}
   }

],

This shows a general trash can, but I wondering if its possible to show your own button?

This http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_buttons looks quite promising,

But I do not think it would work with the code I have pasted above and I don't really want to change it as the functionality from JS to C# is working OK.

Thanks

Upvotes: 1

Views: 238

Answers (1)

Oleg
Oleg

Reputation: 221997

What the formatter "actions" do is nothing special. It places just an icon in the column and calls the method delGridRow if the button clicked. formatoptions.delOptions value will be just used as th eoption of delGridRow. The icon is nothing more as <span class='ui-icon ui-icon-trash'></span>. So you can place any other icon in the column using custom formatter. The custom formatter is just a callback function which will be called during constructing the cell content (the content of <td>). The returned value have to be string which contains HTML fragment. jqGrid will just place the content in the grid column.

So if you would create the column with your custom icon you will do the half of the job. To call delGridRow with the options which you need you can use beforeSelectRow or onCellSelect callback. jqGrid register common (one) event handler for the whole grid and the event handler will be called because of the event bubbling. So the e parameter of beforeSelectRow or onCellSelect is the Event object from the click event which were fired. The property e.target is the cell or some subelement which was clicked. It hold all the information which you could require.

I hope that you can created the solution yourself based on the above information and demos from the answer, this one (with the demo), the demo from the answer and some other.

Upvotes: 1

Related Questions