title: jqgrid Save Cell Edit When DatePicker Is Closed
body: <p>I have the following JQGrid</p>
  
  <pre><code>    $("#requestTable").jqGrid({
      url: url,
      datatype: 'json',
      mtype: 'GET',
      altRows: 'true',
      colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],
  
      colModel: [
                  { name: 'Id', index: 'Id', hidden: true },
                  { name: 'RequestDate', index: 'RequestDate', width: 100 },
                  { name: 'FullName', index: 'FullName', width: 125, sortable: false },
                  { name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
                  { name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
                  { name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
                       editoptions:{
                            dataInit:function(element){
                                $(element).datepicker();
                            }
                       }
  
                   },
                  { name: 'Email', index: 'Email', width: 110, sortable: false }
  
              ],
      cellEdit:true,
      cellurl:cellurl,
      pager: '#pager',
      rowNum: 50,
      rowList: [ 25, 50, 75, 100],
      sortname: 'id',
      sortorder: "desc",
      viewrecords: true,
      height: "100%"
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>As you can see, the DealerContactDate Cell is editable using a datepicker.
  Is there anyway to have jqgrid save the data as soon as a date is selected in the datepicker and it closes?
  right now the use has to select a date from the datepicker. then select that textbox again and hit enter, which is just too complicated.
  Thanks!</p>
  
  <p>Update:
  I created two variables for row and cell outside of jqrid, then on the grids afterEditCell event set these variables. then on the datepickers onSelect event passed these to the saveCell function and it seems to work.</p>
  
  <pre><code> var saverow = 0;
  
  var savecol = 0;
  $("#requestTable").jqGrid({
      url: url,
      datatype: 'json',
      mtype: 'GET',
      altRows: 'true',
      colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date', 'Email'],
  
      colModel: [
                  { name: 'Id', index: 'Id', hidden: true },
                  { name: 'RequestDate', index: 'RequestDate', width: 100 },
                  { name: 'FullName', index: 'FullName', width: 125, sortable: false },
                  { name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
                  { name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
                  { name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
                      editoptions: {
                          dataInit: function (element) {
                              $(element).datepicker({
                                  onSelect: function () {
                                      $("#requestTable").jqGrid("saveCell", saverow, savecol);
                                  }
                              });
                          }
                      }
  
                  },
                  { name: 'Email', index: 'Email', width: 110, sortable: false }
  
              ],
      cellEdit: true,
      pager: '#pager',
      rowNum: 50,
      rowList: [25, 50, 75, 100],
      sortname: 'id',
      sortorder: "desc",
      viewrecords: true,
      height: "100%",
      cellurl: cellurl,
      afterEditCell: function (id, name, val, IRow, ICol) {
          saverow = IRow;
          savecol = ICol;
      }
  
  });
  </code></pre>