title: jqGrid send edited/delete inline information serialized JSON format
body: <p>I'm trying to do an inline edit with a column with <code>formatter: 'actions'</code> and want to send the information to the server in JSON format, but I cant. I already tried many things, but with no results. Still sending information without serializing.</p>
  
  <p>Also tried <code>$.extend($.jgrid.edit, (...));</code> at the initialization <code>$(function(){...});</code> with no result.</p>
  
  <p>My formatoptions looks like this:</p>
  
  <pre><code>formatoptions: {
      keys: true,
      editbutton: true,
      delbutton: true,
      //url: url,
      editOptions: {
          url: url,
          ajaxEditOptions: {
              //url: url,
              contentType: 'application/json;charset=utf-8',
              type: 'POST',
              datatype: 'json'
          }
      },
      delOptions: {
          url: url,
          ajaxDelOptions: {
              //url: url,
              contentType: 'application/json;charset=utf-8',
              type: 'POST',
              datatype: 'json'
          }
      }
  }}
  </code></pre>
  
  <p>But still not working :S I dont know what im doing wrong. 
  I'd appreciate if you help me.</p>
  
  <p>PS: I writted too many url properties, becuase I was checking where I have to write it to do it work. For edit, only works if I put the url out of editOptions, only if I put it in formatoptions. But for delete, it don't cares if I put it in/out <code>delOptions</code>, including <code>ajaxDelOptions</code>. If you could help me with that too, I'd appreciate.
  <br/>
  <br/>
  <br/>
  <strong>UPDATED</strong></p>
  
  <p>Delete works fine with this config, but inline editing save button still not working. I pasted the same config, changing options for editing and still not working.</p>
  
  <pre><code>delOptions: {
      url: url,
      mtype: 'POST',
      reloadAfterSubmit: true,
      ajaxDelOptions: {
          contentType: "application/json"
      },
      serializeDelData: function(postdata) {
          return JSON.stringify(postdata);
      }
  }
  </code></pre>
  
  <p><br/>
  <br/>
  <br/>
  <strong>UPDATED 2</strong></p>
  
  <p>Here is my JS.</p>
  
  <pre><code>$(function() {
      $.mask.definitions['2'] = '[0-2]';
      $.mask.definitions['5'] = '[0-5]';
      $.extend($.jgrid.defaults, {
          ajaxRowOptions: {
              contentType: "application/json",
              dataType: "json",
              success: function() {
  
              },
              error: null
          },
          serializeRowData: function(data) {
              delete data.oper;
              return JSON.stringify(data);
          }
      });
  });
  function loadGrid(identifier) {
      $("#list").jqGrid({
          url: 'foo.html?identifier=' + identifier,
          type: 'GET',
          datatype: 'json',
          repeatitems: false,
          autowidth: true,
          altRows: false,
          hidegrid: false,
          cmTemplate: {
              sortable: false,
              resizable: false
          },
          colNames: ["id", "column1", "column2", "column3", "column4", "column5", "column6", "column7", " "],
          colModel: [
              {name: "id", label: "id", hidden: true},
              {name: "columnData1", label: "columnData1", key: true, hidden: true},
              {name: "columnData2", label: "columnData2", edittype: "select", editable: true,
                  editoptions: {
                      dataUrl: 'foo/bar.html'
                  }},
              {name: "columnData3", label: "columnData3", width: 75, editable: true},
              {name: "columnData4", label: "columnData4", width: 100, edittype: "select", editable: true,
                  editoptions: {
                      dataUrl: 'foo/bar.html'
                  }},
              {name: "columnData5", align: "right", label: "columnData5", width: 55, formatter: 'number',
                  formatOptions: {
                      decimalPlaces: 2
                  }, editable: true},
              {name: "columnData6", align: "right", label: "columnData6", width: 55, formatter: 'number',
                  formatOptions: {
                      decimalPlaces: 2
                  }, editable: true},
              {name: "columnData7", align: "right", label: "columnData7", width: 55, formatter: 'number',
                  formatOptions: {
                      decimalPlaces: 2
                  }},
              {name: "actions", formatter: "actions", width: 35}
          ],
          pager: '#pager',
          rows: '',
          rowList: [],
          pgbuttons: false,
          pgtext: null,
          viewrecords: false,
          gridview: true,
          caption: 'MyCaption',
          subGrid: true,
          subGridRowExpanded: function(subgrid_id, row_id) {
              var subgrid_table_id, pager_id;
              subgrid_table_id = subgrid_id + "_t";
              pager_id = "p_" + subgrid_table_id;
              $("#" + subgrid_id).html("&lt;table id='" + subgrid_table_id + "'&gt;&lt;/table&gt;&lt;div id='" + pager_id + "'&gt;&lt;/div&gt;");
              $("#" + subgrid_table_id).jqGrid({
                  url: 'foo/bar.html?identifier=' + identifier + '&amp;rowId=' + row_id,
                  type: 'GET',
                  datatype: 'json',
                  repeatitems: false,
                  autowidth: true,
                  altRows: false,
                  hidegrid: false,
                  cmTemplate: {
                      sortable: false,
                      resizable: false
                  },
                  colNames: ['column1', 'column2', 'column3', 'column4', 'column5', 'column6', ' '],
                  colModel: [
                      {name: 'columnData1', hidden: true, key: true},
                      {name: 'columnData2', width: 75, formatter: 'date',
                          formatoptions: {
                              srcformat: 'Y-m-d',
                              newformat: 'd/m/Y'
                          },
                          editoptions: {
                              readonly: 'readonly',
                              dataInit: function(elem) {
                                  $(elem).width("75%");
                                  $(elem).datepicker({
                                      dateFormat: "dd/mm/yy",
                                      showOn: "button",
                                      buttonImage: "../css/images/calendar.gif",
                                      buttonText: "Muestra el calendario.",
                                      buttonImageOnly: true
                                  });
                              }}
                          , editable: true},
                      {name: 'columnData3', width: 75,
                          formatter: function(cellval, opts) {
                              if (!/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(cellval)) {
                                  var date = new Date(cellval);
                                  opts = $.extend({}, $.jgrid.formatter.date, opts);
                                  return $.fmatter.util.DateFormat("", date, 'H:i', opts);
                              } else {
                                  var date = new Date();
                                  var time = cellval.split(":");
                                  date.setFullYear(1899);
                                  date.setMonth(12);
                                  date.setDate(30);
                                  date.setHours(time[0]);
                                  date.setMinutes(time[1]);
                                  date.setSeconds(0);
                                  opts = $.extend({}, $.jgrid.formatter.date, opts);
                                  return $.fmatter.util.DateFormat("", date, 'H:i', opts);
                              }
                          },
                          editoptions: {dataInit: function(elem) {
                                  $(elem).mask("29:59");
                              }},
                          editrules: {custom: true, custom_func: function(value) {
                                  if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])/.test(value)) {
                                      return [true, ""];
                                  } else {
                                      return [false, " no es un formato de hora v&amp;aacute;lido.&lt;br/&gt;Por favor, introduzca una hora en un formato &lt;b&gt;hh:mm&lt;/b&gt; v&amp;aacute;lido."];
                                  }
                              }}, editable: true},
                      {name: 'columnData4', width: 80, editable: true},
                      {name: 'columnData5', width: 200, editable: true},
                      {name: 'columnData6', align: 'right', width: 50, editable: true, formatter: 'number',
                          formatoptions: {
                              decimalPlaces: 2
                          }},
                      {name: 'actions', formatter: 'actions', width: 40,
                          formatoptions: {
                              //keys: false,
                              editbutton: true,
                              delbutton: true,
                              url: "foo/bar/edit.html?identifier=" + identifier + "&amp;rowId=" + row_id,
                              editOptions: {
                                  keys: true,
                                  //url: "foo/bar/edit.html?identifier=" + identifier + "&amp;rowId=" + row_id,
                                  mtype: "POST"
                              },
                              delOptions: {
                                  url: "foo/bar/delete.html?identifier=" + identifier + "&amp;rowId=" + row_id,
                                  mtype: 'POST',
                                  reloadAfterSubmit: true,
                                  ajaxDelOptions: {
                                      contentType: "application/json"
                                  },
                                  serializeDelData: function(postdata) {
                                      delete postdata.oper;
                                      return JSON.stringify(postdata);
                                  }
                              }
                          }}
                  ],
                  height: 190,
                  pager: pager_id,
                  rows: '',
                  rowList: [],
                  pgbuttons: false,
                  pgtext: null,
                  viewrecords: false,
                  gridview: true,
                  loadError: function(xhr, status, error) {
                      alert(xhr + " : " + status + " : " + error);
                  },
                  jsonReader: {
                      repeatitems: false
                  },
                  gridComplete: function() {
                      $("div.ui-inline-save").click(function() {
                          var dlgDiv = $("#info_dialog");
                          dlgDiv.width(600);
                          var parentDiv = dlgDiv.parent();
                          var dlgWidth = dlgDiv.width();
                          var parentWidth = parentDiv.width();
                          var dlgHeight = dlgDiv.height();
                          var parentHeight = parentDiv.height();
                          dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                          dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                      });
                      $("div.ui-inline-del").click(function() {
                          var dlgDiv = $("#delmod" + subgrid_table_id);
                          dlgDiv.width(600);
                          var parentDiv = dlgDiv.parent();
                          var dlgWidth = dlgDiv.width();
                          var parentWidth = parentDiv.width();
                          var dlgHeight = dlgDiv.height();
                          var parentHeight = parentDiv.height();
                          dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                          dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                      });
                      $("#gbox_" + subgrid_id + "_t").removeClass('ui-corner-all');
                      $("#" + pager_id).removeClass('ui-corner-bottom');
                      disableSelection(document.getElementById(subgrid_table_id));
                  }
              }).navGrid("#" + pager_id, {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
                      {afterShowForm: function(form) {
                              var dlgDiv = $("#editmod" + subgrid_table_id);
                              dlgDiv.width(600);
                              var parentDiv = dlgDiv.parent();
                              var dlgWidth = dlgDiv.width();
                              var parentWidth = parentDiv.width();
                              var dlgHeight = dlgDiv.height();
                              var parentHeight = parentDiv.height();
                              dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                              dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                          }
                      });
          },
          loadError: function(xhr, status, error) {
              alert(xhr + " : " + status + " : " + error);
          },
          jsonReader: {
              repeatitems: false
          },
          gridComplete: function() {
              $("div.ui-inline-save").click(function() {
                  var dlgDiv = $("#info_dialog");
                  dlgDiv.width(600);
                  var parentDiv = dlgDiv.parent();
                  var dlgWidth = dlgDiv.width();
                  var parentWidth = parentDiv.width();
                  var dlgHeight = dlgDiv.height();
                  var parentHeight = parentDiv.height();
                  dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                  dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
              });
              $("div.ui-inline-del").click(function() {
                  var dlgDiv = $("#delmodlist");
                  dlgDiv.width(600);
                  var parentDiv = dlgDiv.parent();
                  var dlgWidth = dlgDiv.width();
                  var parentWidth = parentDiv.width();
                  var dlgHeight = dlgDiv.height();
                  var parentHeight = parentDiv.height();
                  dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                  dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
              });
              disableSelection(document.getElementById("list"));
          }
      }).navGrid("#pager", {add: true, edit: false, del: false, search: false, view: false, refresh: true}, {},
              {afterShowForm: function(form) {
                      var dlgDiv = $("#editmodlist");
                      dlgDiv.width(600);
                      var parentDiv = dlgDiv.parent();
                      var dlgWidth = dlgDiv.width();
                      var parentWidth = parentDiv.width();
                      var dlgHeight = dlgDiv.height();
                      var parentHeight = parentDiv.height();
                      dlgDiv.css('top', Math.round((parentHeight - dlgHeight) / 2));
                      dlgDiv.css('left', Math.round((parentWidth - dlgWidth) / 2));
                  }
              });
      var height = $("body").height();
      $('.ui-jqgrid-bdiv').height(height);
  }
  </code></pre>
  
  <p>Changed column names, etc. for security (obviusly). This is my JS. I had to use jqGrid in a <code>function</code> and getting <code>identifier</code> as parameter, because I have a JSP that is loaded into a Iframe and that JSP has another Iframe that loads this JS. I needed to send the <code>identifier</code> that I recieve in the JSP to build the grid. The best way I found is that.
  Thats the <code>identifier</code> value.</p>
  
  <p>Also, I need that <code>identifier</code> and the <code>row_id</code> to update data, because I have as 3 primary keys to identify an specific item. I need <code>identifier</code>, parent <code>row_id</code> and actual <code>row_id</code> that I'm editing. Last one I get it from the JS Object in JSON format.</p>
  
  <p>It's like it does not recognize <code>editOptions</code> property, because it does not get <code>keys: true</code>. It didn't let me accept the edit with <code>Enter</code> key.</p>
  
  <p>If you still needing more information, just ask.</p>