jqGrid: Adding a Delete button to the Edit form

Question

I'm a jqGrid newbie. I need to add a Delete button to the Edit form. I'm able to add the button, and it shows up as expected, including the confirmation dialog, but once pressed I'm not sure how to refer to the original row id:

// Add a Delete button in Edit form:
    $.extend($.jgrid.edit, {
        bSubmit: "Submit",
        bCancel: "Cancel",
        width: 370,
        recreateForm: true,
        beforeShowForm: function () {
            $('<a href="#">Delete<span class="ui-icon ui-icon-circle-close"></span></a>')
                .click(function() {
                    if(confirm("Are you sure you want to delete this record?")) {
                        $("#projectList").jqGrid('delGridRow', row_id);
                    }
                }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
                  .prependTo("#Act_Buttons>td.EditButton");
        }
    });

row_id in the code above is not defined .. How can I refer to the id of the currently selected row from this place in the code? The function above is currently parallel to the other main jqGrid functions, such as $("#projectList").jqGrid({ .. }). Or better, how can I hook into the default jqGrid delete function from here? Thank you!

score 0 · Accepted Answer · answered Jun 09 '13 at 12:25

0

To get rowid of the editing row inside of beforeShowForm you can use the fact that editing form have some hidden rows with information which could be helpful for you. Add/Edit dialog has input field in the hidden row with the id="id_g". The input field contains the id of editing row. Add dialog contains _empty string in the field.

So you can modify beforeShowForm callback to

beforeShowForm: function () {
    var row_id = $("#id_g").val();
    ...
}

or to the following

beforeShowForm: function ($form) {
    var row_id = $("#id_g", $form).val(), $self = $(this);
    ...
    $self.jqGrid('delGridRow', row_id);
    ...
}

answered Jun 09 '13 at 12:25

Oleg

220,925
34
403
798

It works, thank you very much Oleg! One minor problem though: the confirmation dialog now appears BEHIND the form dialog. How can I change this? beforeShowForm: function () { var row_id = $("#id_g").val(); $('Delete') .click(function() { $("#projectList").jqGrid('delGridRow', row_id, {mtype:"DELETE"}); }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left") .prependTo("#Act_Buttons>td.EditButton"); } – Pablo Jun 09 '13 at 16:02
@user2309409: I am not sure which confirmation dialog you mean. In general you can use [zIndex](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#properties) option to change position of Edit form. You can also change the value of `zIndex` property of `$.jgrid.jqModal` or use `alertzIndex` option of `navGrid` which you can set per `$.jgrid.nav` too. – Oleg Jun 09 '13 at 16:12
zIndex did the trick :) Thank you very much Oleg. You're doing an incredible job at supporting the jqGrid community! – Pablo Jun 10 '13 at 01:22

jqGrid: Adding a Delete button to the Edit form

1 Answers1

Linked