title: jqGrid's inline-editing with REST Api (POST,PUT,DELETE http request)
body: <p><strong>jqGrid Version:</strong> Guriddo jqGrid JS - v5.0.2</p>
  
  <p><strong>What is my Target ?</strong>
  I want to create a inline jqGrid. Here the Add will be done using a POST request, Edit will be done using a PUT request and delete will be done using a DELETE request.</p>
  
  <p><strong>What I have done so far ?</strong>
  I can do inline edit and delete using RESTful webService(by http PUT and DELETE request).</p>
  
  <p>Here is the code - </p>
  
  <pre><code>var lastSel,
  cancelEditing = function(myGrid) {
      var lrid;
      if (typeof lastSel !== "undefined") {
          myGrid.jqGrid('restoreRow', lastSel);
          lrid = $.jgrid.jqID(lastSel);
          $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
          $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
      }
  };
  $.extend($.jgrid.defaults, {
  ajaxRowOptions: {
      contentType: "application/json",
      async: true,type:"PUT",
      beforeSend: function(jqXHR, settings) {
          jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
          jqXHR.setRequestHeader("If-Match", '*');
      },
      complete: function(res, stat) {
          if (res.status == 200 || res.status == 204) {
              $("#jqGrid").trigger("reloadGrid");
          } else {
              return [false, res.responseText];
          }
      }
  },
  serializeRowData: function(data) {
      var propertyName, propertyValue, dataToSend = {};
      for (propertyName in data) {
          if (data.hasOwnProperty(propertyName)) {
              propertyValue = data[propertyName];
              if ($.isFunction(propertyValue)) {
                  dataToSend[propertyName] = propertyValue();
              } else {
                  dataToSend[propertyName] = propertyValue;
              }
          }
      }
      return JSON.stringify(dataToSend);
  }
  });
  
  var thisGrid = $("#jqGrid").jqGrid({
  datatype: "json",
  url: 'https://localhost/MyWebService/academic/classroom/all',
  editurl: 'https://localhost/MyWebService/academic/classroom',
  loadBeforeSend: function(jqXHR) {
      jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
  },
  jsonReader: {
      repeatitems: false
  },
  colModel: [{
          label: 'Room Id',
          name: 'id',
          width: 10,
          hidden: true,
          key: true
      }, {
          label: 'Room Number',
          name: 'roomNo',
          editable: true,
          width: 100
      }, {
          label: "Edit Actions",
          name: "actions",
          width: 100,
          formatter: "actions",
          formatoptions: {
              keys: true,
              editOptions: {},
              addOptions: {
                  mtype: 'POST'
              },
              delOptions: {
                  mtype: 'DELETE',
                  onclickSubmit: function(rp_ge) {
                      var selrow_id = thisGrid.getGridParam('selrow');
                      var rowdata = thisGrid.getRowData(selrow_id);
                      rp_ge.url = "https://localhost/MyWebService/academic/classroom" + '/' + selrow_id;
                  },
                  ajaxDelOptions: {
                      contentType: "application/json",
                      beforeSend: function(jqXHR) {
                          jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
                      }
                  },
                  serializeDelData: function(postdata) {
                      return JSON.stringify(postdata);
                  }
              },
              onEdit: function(id) {
                  if (typeof(lastSel) !== "undefined" &amp;&amp; id !== lastSel) {
                      cancelEditing(thisGrid);
                  }
                  lastSel = id;
                  $("#jqGrid").setGridParam({
                      editurl: "https://localhost/MyWebService/academic/classroom/" + encodeURIComponent(id)
                  });
              }
  
          }
      }
  ],
  sortname: 'id',
  loadonce: true,
  autowidth: true,
  pager: "#jqGridPager",
  rownumbers: true,
  height: 500,
  
  rowList: [], // disable page size dropdown
  pgbuttons: false, // disable page control like next, back button
  pgtext: null,
  
  ondblClickRow: function(id, ri, ci, e) {
      if (typeof(lastSel) !== "undefined" &amp;&amp; id !== lastSel) {
          cancelEditing($(this));
      }
      lastSel = id;
      var lrid = $.jgrid.jqID(lastSel);
      if (!e) e = window.event; // get browser independent object
      var element = e.target || e.srcElement;
  
  
      $("#jqGrid").jqGrid('editRow', id, true, function() {
          var colModel = jQuery("#jqGrid").jqGrid('getGridParam', 'colModel');
          var colName = colModel[ci].name;
          var input = $('#' + id + '_' + colName);
          console.log(input)
          setTimeout(function() {
              input.get(0).focus();
          }, 300);
      }, null, "https://localhost/MyWebService/academic/classroom/" + encodeURIComponent(id));
      $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").hide();
      $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").show();
  }
  });
  var addOptions = {
  keys: true,
  type: "POST",
  url: "https://localhost/MyWebService/academic/classroom/",
  successfunc: function() {
      var $self = $(this);
      setTimeout(function() {
          $self.trigger("reloadGrid");
      }, 50);
      }
  };
  $("#jqGrid").jqGrid("inlineNav", "#jqGridPager", {
  addParams: {
      position: "last",
      addRowParams: addOptions
      }
  });
  </code></pre>
  
  <p><strong>Problem</strong> : When I'm trying to save a newly created record I got the http request type PUT not POST. And I know the reason of it. Below code is responsible for that -</p>
  
  <pre><code>$.extend($.jgrid.defaults, {
      ajaxRowOptions: { contentType: "application/json", async: true,type:"PUT",
  </code></pre>
  
  <p>I can't override this  type:"PUT" settings to type:"POST" during creating a new row.</p>
  
  <p>There are some other cosmetic observation . I have provided that comment in the attached image file.</p>
  
  <p><a href="https://i.stack.imgur.com/un5Et.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/un5Et.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Edit 1</strong>
  Here is my Updated Code :</p>
  
  <pre><code>  $.jgrid.defaults.responsive = true;
    $.jgrid.defaults.styleUI = 'Bootstrap';
    $.extend($.jgrid.inlineEdit, { restoreAfterError: false });
  
     var lastSel,
    cancelEditing = function(myGrid) {
      var lrid;
      if (typeof lastSel !== "undefined") {
        myGrid.jqGrid('restoreRow',lastSel);
        lrid = $.jgrid.jqID(lastSel);
        $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").show();
        $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
      }
    };
    $.extend($.jgrid.defaults, {
      ajaxRowOptions: { contentType: "application/json", async: true,
        beforeSend: function (jqXHR, settings) {
          jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
          jqXHR.setRequestHeader("If-Match", '*');
        },
        complete: function(res, stat) {
          if (res.status==200 || res.status==204) {
            $("#jqGrid").trigger("reloadGrid");
          } else {
            return [false, res.responseText ];
          }
        }
      },
      serializeRowData: function (data) {
        var propertyName, propertyValue, dataToSend = {};
        for (propertyName in data) {
          if (data.hasOwnProperty(propertyName)) {
            propertyValue = data[propertyName];
            if ($.isFunction(propertyValue)) {
              dataToSend[propertyName] = propertyValue();
            } else {
              dataToSend[propertyName] = propertyValue;
            }
          }
        }
        return JSON.stringify(dataToSend);
      }
    });
  
    var thisGrid =$("#jqGrid").jqGrid({
      datatype: "json",
      url: 'https://localhost/ums-webservice-common/academic/classroom/all',
      editurl:'https://localhost/ums-webservice-common/academic/classroom',
      loadBeforeSend: function(jqXHR) {
        jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
      },
      jsonReader: { repeatitems: false },
      colModel: [
        {
          label: 'Room Id',
          name: 'id',
          width: 10,
          hidden:true,
          key: true
        },
        {
          label: 'Room Number',
          name: 'roomNo',
          editable: true,
          width: 100
        },
        {
          label: 'Description',
          name: 'description',
          editable: true,
          width: 200
        },
        {
          label : 'Row',
          name: 'totalRow',
          width: 50,
          editable: true
        },
        {
          label: 'Column',
          name: 'totalColumn',
          width: 50,
          editable: true
        },
        {
          label: 'Capacity',
          name: 'capacity',
          width: 50,
          editable: true
        },
        {
          label: 'Room Type',
          name: 'roomType',
          editable: true,
          width: 100, align: 'center', formatter: 'select',
          edittype: 'select',
          editoptions: {
            value: '1:Theory;2:Sessional;0:Others',
            defaultValue: 'Theory'
          },
          stype: 'select',
          searchoptions: {
            sopt: ['eq', 'ne'],
            value: '1:Theory;2:Sessional;0:Others'
          }},
  
  
        {
          label: 'Dept./School',
          name: 'capacity',
          width: 100,
          editable: true
        },
        {
          label: 'Seat Plan',
          name: 'examSeatPlan',
          editable: true,
          width: 80, align: 'center', formatter: 'checkbox',
          edittype: 'checkbox', editoptions: {value: '1:0', defaultValue: '1'},
          stype: 'select',
          searchoptions: {
            sopt: ['eq', 'ne'],
            value: '1:Yes;0:No'
          }
  
  
        },
        {
          label: "Edit Actions",
          name: "actions",
          width: 100,
          formatter: "actions",
          formatoptions: {
            keys: true,
            editOptions: {
              mtype: 'PUT'
            },
            addOptions: {
              mtype: 'POST'
            },
            delOptions: {
              mtype: 'DELETE',
              onclickSubmit: function(rp_ge) {
                var selrow_id = thisGrid.getGridParam('selrow');
                var rowdata = thisGrid.getRowData(selrow_id);
                rp_ge.url = "https://localhost/ums-webservice-common/academic/classroom" + '/' + selrow_id ;
              },
              ajaxDelOptions: {
                contentType: "application/json",
                beforeSend: function(jqXHR) {
                  jqXHR.setRequestHeader("Authorization", 'Basic ZHByZWdpc3RyYXI6MTIzNDU=');
                }
              },
              serializeDelData: function(postdata) {
                return JSON.stringify(postdata);
              }
            },
            onEdit: function (id) {
              if (typeof (lastSel) !== "undefined" &amp;&amp; id !== lastSel) {
                cancelEditing(thisGrid);
              }
              lastSel = id;
              $("#jqGrid").setGridParam({ editurl: "https://localhost/ums-webservice-common/academic/classroom/" + encodeURIComponent(id)});
            }
  
          }
        }
      ],
      sortname: 'id',
      loadonce: true,
      autowidth: true,
      pager: "#jqGridPager",
      rownumbers: true,
      height:500,
  
      rowList: [],        // disable page size dropdown
      pgbuttons: false,     // disable page control like next, back button
      pgtext: null,
  
      ondblClickRow: function(id, ri, ci,e) {
        if (typeof (lastSel) !== "undefined" &amp;&amp; id !== lastSel) {
          cancelEditing($(this));
        }
        lastSel = id;
        var lrid = $.jgrid.jqID(lastSel);
        if (!e) e = window.event; // get browser independent object
        var element = e.target || e.srcElement;
  
  
        $("#jqGrid").jqGrid('editRow',id,true,function() {
          var colModel = jQuery("#jqGrid").jqGrid ('getGridParam', 'colModel');
          var colName = colModel[ci].name;
          var input = $('#' + id + '_' + colName);
          console.log(input)
          setTimeout(function(){  input.get(0).focus(); }, 300);
        },null,"https://localhost/ums-webservice-common/academic/classroom/"+ encodeURIComponent(id));
        $("tr#" + lrid + " div.ui-inline-edit, " + "tr#" + lrid + " div.ui-inline-del").hide();
        $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").show();
      }
  
  
      });
  
  
    var addOptions = {
      keys: true,
      mtype: "POST",
      url: "AddUser",
      successfunc: function () {
        var $self = $(this);
        setTimeout(function () {
          $self.trigger("reloadGrid");
        }, 50);
      }
    };
    $("#jqGrid").jqGrid("inlineNav", "#jqGridPager", {
      addParams: {
        position: "last",
        addRowParams: addOptions
      }
    });
  
  }
  </code></pre>