jqGrid set focus to clicked cell AND implement datepicker in IE and Firefox

Question

Apologies if this has been answered already. There are a number of questions around this but I can't quite get what I'm after.

I have a jqGrid. The first cell has a datepicker attached (on the fly when the cell is edited, not in the initial grid definition).

When I double click on a cell in the middle of the grid, I want it to go into edit mode, sets focus to that clicked cell and not fire the datepicker (as I didn't double click in it)

With the code below I have achieved what I want in Firefox. This is based on Olegs (and others) excellent posts on the topic.

Howevever, in IE9, although it sets focus as required, it also fires the datepicker in the first cell.

I understand that by default the jqGrid automatically moves to the first cell, therefore firing the datepicker if it exists, regardless of whether I double clicked it. Maybe as a workaround I will need to create some kind of tiny dummy cell in the first position, but first I would like to take this opportunity to learn more.

Here is some abbreviated jqGrid code, you will recognise bits and pieces from Oleg and other peoples posts. Sorry I cannot give you the exact version of jqGrid at this point, suffice to say I downloaded it early October 2012.

I'll just say I don't fully understand the event order that is gong on - on first glance it appears that the datepicker is being attached(?) before the clicked field is getting focus anyway.

As an aside this is inside a MVC ASP.Net project. I find it amusing and ironic that the only way I can get a useful grid control in MVC / ASP.Net is to start learning Javascript.

$(document).ready(
    function () {
        var lastsel;
        $("#ts").jqGrid({
            //=============
            // Grid Setup
            url: 'Timesheet/GridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Date', 'Customer', 'Project', 'Description', 'Hours', '$'],
            colModel: [
              { name: 'tsdate', index: 'tsdate', width: 80, editable: true },
              { name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/CustomerList'} },
              { name: 'Project', index: 'Project', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/ProjectList'} },
              { name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },
              { name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },
              { name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }
            ],
            //=============
            // Grid Events
            // when selecting, undo anything else
            onSelectRow: function (rowid, iRow, iCol, e) {
                if (rowid && rowid !== lastsel) {
                    $('#ts').jqGrid('restoreRow', lastsel);
                    lastsel = rowid;
                }
            },
            // double click to edit
            ondblClickRow: function (rowid, iRow, iCol, e) {
                // Go into edit mode (automatically moves focus to first field)
                $('#ts').jqGrid('editRow', rowid, true, onGridEdit);
                // Now set focus on selected field
                if (!e) e = window.event; // get browser independent object
                var element = e.target || e.srcElement
                $("input, select", element).focus();
            },
            postData:
                {
                    startDate: function () { return $('#startDate').val(); }
                }
        }); // END jQuery("#ts").jqGrid

        // This is called when the row is double clicked
        function onGridEdit(RowID) {
            // onGridEdit is attached as the 'edit function' in the call to .jqGrid('editRow' above
            // Attach the datepicker to the tsdate field. For some reason this needs to be in the edit function
            // And does not work in IE 9. In IE9 it fires the datepicker. In Firefox it only fires when the field
            // gets the focus
            $("#" + RowID + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
        }

    });           // END $(document).ready

SOLUTION when comparing debugging between Firefox and IE9 it appeared that the firefox events ran sequentially and the the IE9 ones did not.

Regardless, the final solution as suggested by Oleg was to wrap the oneditfunc function in a setTimeout function:

            ondblClickRow: function (rowid, iRow, iCol, e) {
                if (!e) e = window.event; //evt evaluates to window.event or inexplicit e object, depending on which one is defined
                var element = e.target || e.srcElement

                // Go into edit mode (automatically moves focus to first field)
                $(this).jqGrid(
                    'editRow',
                    rowid,
                    {
                        keys: true,
                        oneditfunc: function (rowId) {
                            setTimeout(function () {
                                $("input, select", element).focus();
                                $("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
                            }, 50);
                        }
                    }
                ); // end jqGrid call

            },  // end ondblClickRow event handler

Oleg Oleg · Accepted Answer · 2012-10-31T07:17:05

I suppose that the problem with focus can be solved by moving call of jQuery.focus inside of oneditfunc callback. If you would implement the callback as anonymous function (instead of onGridEdit) the implementation will be the mostly easy:

ondblClickRow: function (rowid, iRow, iCol, e) {
    if (!e) e = window.event; // get browser independent object
    var element = e.target || e.srcElement;

    // Go into edit mode (automatically moves focus to first field)
    $(this).jqGrid('editRow', rowid, {
        keys: true,
        oneditfunc: function (rowId) {
            $("input, select", element).focus(); // Now set focus on selected field
            $("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
        }
    });
}

How you can see I used additionally $(this) instead of $('#ts') inside of callback functions. It make the code easy to maintain and a little bit quickly. The same changes you can make in all jqGrid callbacks (for example inside of onSelectRow). Moreover I prefer to use object style of calling editRow. It makes the code more readable in my opinion because one uses named parameters.

jqGrid set focus to clicked cell AND implement datepicker in IE and Firefox

1 Answers