jqgrid Save Cell Edit When DatePicker Is Closed

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:开发者_JS百科 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;
    }

});

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

Hi I had different problem. i.e. focusing cell after selecting date from datepicker. I fixed it the from above Answer1, even though this answer was not intended for my problem. Basically, to keep cell focused after selecting date in jQGrid, - fire 'saveCell' event on datepickers onSelect() method as showed in Answer1. - assign saveRow, & saveCol variables in beforeEditCell method.

Thanks to all.