CODEWITHSUNDEEP
jqueryjqgrid
Wahab
Wahab

Reputation: 520

Add Custom Button in Edit Form

I have added a custom button in my jqGrid Edit form, created using beforeShowForm event. Onclick of custom button i want to perform ADD operation. below are my code ..

 beforeShowForm: function(form) { 
          //Create Custom ADD Button
          $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>')
            .click(function() {
                var $self = $(this);
               $self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"),
                {
                  editData: {//Function to Add parameters to the status 
                    oper: 'add', //trying to pass parameter to server
                  },
                });
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");

the Code
editData: {//Function to Add parameters to the status oper: 'add', //trying to pass parameter to server },

shows TypeError: a(...)[0].p is undefined error . Any idea how to achieve this??

Add Button

Upvotes: 1

Views: 1264

Answers (1)

Oleg
Oleg

Reputation: 221997

The main error in your code is the place where you use this. Inside of beforeShowForm is this initialized to the DOM of the grid, but inside of click event handler to $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>') it's initialized to <a> element. So you get the error "TypeError: a(...)[0].p is undefined". To fix the code you need just move initializing of $this variable in the outer callback function beforeShowForm:

beforeShowForm: function(form) { 
    var $self = $(this); // !!! place it here !!!

    //Create Custom ADD Button
    $('<a href="#">Add<span class="ui-icon ui-icon-disk"></span></a>')
        .click(function() {
            $self.jqGrid("editGridRow", $self.jqGrid("getGridParam", "selrow"), {
                editData: {//Function to Add parameters to the status 
                    oper: 'add', //trying to pass parameter to server
                },
            });
        }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
          .prependTo("#Act_Buttons>td.EditButton");
}

Upvotes: 2

Related Questions