CODEWITHSUNDEEP
javascriptjqueryjqgrid
pundit
pundit

Reputation: 772

How to add custom buttons to JqGrid add/edit forms?

Is it possible to add custom buttons to a JqGrid add/edit form?

Instead of just submit and cancel, I wanted to have a button that says "Save and New", one that says "Save and Close", and one that says "Cancel".

Is it possible to achieve this?

Upvotes: 3

Views: 16451

Answers (3)

ymakux
ymakux

Reputation: 3495

To add button that clears all input element within modal window:

$.extend($.jgrid.edit, {
    bSubmit: "Save and Close",
    bCancel: "Cancel",
    width: 370,
    recreateForm: true,
    beforeShowForm: function () {
        $('<a href="#">Clear<span class="ui-icon ui-icon-document-b"></span></a>')
            .click(function() {
              $(".ui-jqdialog input").val("");    
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");
    }
});

Upvotes: 0

Oleg
Oleg

Reputation: 222017

jqGrid has some CSS classes which will be used for buttons. You can add new button inside of beforeShowForm callback for example:

$.extend($.jgrid.edit, {
    bSubmit: "Save and Close",
    bCancel: "Cancel",
    width: 370,
    recreateForm: true,
    beforeShowForm: function () {
        $('<a href="#">Save and New<span class="ui-icon ui-icon-disk"></span></a>')
            .click(function() {
                alert("click!");
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");
    }
});

See the demo:

enter image description here

Upvotes: 9

broguyman
broguyman

Reputation: 1426

You may be able to add the button by inserting an ClientSideEvents-AfterAddDialogShown="AddButton"

Then your function AddButton can insert your button html into the table of the Add Dialog Box.

Upvotes: 0

Related Questions