3

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?

pundit
  • 772
  • 3
  • 18
  • 31

3 Answers3

9

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

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • In terms of functionality for save and close, Do I need to include the closeAfterEdit for save and close? How would I get save and new functionality? – pundit Apr 26 '12 at 13:50
  • @pundit: Sorry, but I don't understand what functionality you need under "Save and New" and "Save and Close". I understood your question just as "How to add custom buttons to JqGrid add/edit forms?". What the button do on clicking you can define yourself. – Oleg Apr 26 '12 at 13:56
  • I'm sure if you're be able to help me here. But is there a way to pass additional data using JqGrid? – pundit Apr 26 '12 at 14:40
  • @pundit: I can only repeat, that I don't understand what you want to implement. If you'll explain me detailed what you need, which "additional data" you want "to pass" I could try to help you. What do you mean under "save and new functionality"? – Oleg Apr 26 '12 at 14:48
  • yes. beforeShowForm: function () { $('Save').click(function() { $.post('', $('#FrmGrid_list2').serialize() , function(data){ $('#list2').trigger("reloadGrid"); }); }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left") .prependTo("#Act_Buttons>td.EditButton"); } – pundit Apr 26 '12 at 14:52
  • in the code there, where i use onclick function, I'm posting the form to the server. I however, need to add an additional parameter (id) in the post array. the question, Is there anyway in which i could send additional data (id) for my custom post? – pundit Apr 26 '12 at 14:55
  • 1
    @pundit: You can use for example [jQuery.serializeArray()](http://api.jquery.com/serializeArray/) instead of `jQuery.serialize`. Alternatively you can just append the `$('#FrmGrid_list2').serialize()` with additional information. For example `$('#FrmGrid_list2').serialize() + "&" + $.param({id: myid})`. In [the answer](http://stackoverflow.com/a/10050428/315935) can find code fragment which shows how to get id of the row. The way uses jqGrid internally. – Oleg Apr 26 '12 at 15:06
0

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.

broguyman
  • 1,386
  • 4
  • 19
  • 36
0

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");
    }
});
ymakux
  • 3,415
  • 1
  • 34
  • 43