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

});

score 3 · Accepted Answer · answered Jun 24 '11 at 17:39

3

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

answered Jun 24 '11 at 17:39

Björn

2,638
16
18

make sure the id is correct and exist, simply test it by **alert($row.attr("id"));** before you call **$("#requestTable").jqGrid('saveRow', ...** – WooDzu Jun 24 '11 at 19:35
I needed to do something slightly different but you put me on track so you get the answer. my updated code shows how I got it to work. – twaldron Jun 24 '11 at 19:44

score 1 · Answer 2 · answered Jan 06 '12 at 15:55

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.

jqgrid Save Cell Edit When DatePicker Is Closed

2 Answers2

Linked