jquery - jqgrid Save Cell Edit When DatePicker Is Closed

Question

I have the following JQGrid

    $("#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%"

});

});

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!

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.

 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;
    }

});

Answer 1

You should be able to use the onSelect() event from the datePicker in combination with the saveRow() from jqGrid. Something like:

   $(element).datepicker({
      onSelect: function(dateText, inst) { 
          var $input = inst.input; // the datepicker input
          var $row = $input.parents("tr"); 
          $("#requestTable").jqGrid('saveRow',$row.attr("id"), false); // this would probably need some work, I have no experience with jqGrid
   });