jQuery datepicker issue: Uncaught TypeError

See more:

jQuery

JQGrid

I have a jqgrid, in which I have to provide tab navigation in the cells. I have encountered a strange error which I have failed to comprehend so far.

I have multiple date cells in the grid, which selected, should display a jquery default datepicker. I also happen to apply my own textboxstyle class to the cell which is selected.

This is the code that I am using to detect tab navigation:

afterEditCell: function (id, name, val, iRow, iCol) {
    var e = window.event;
    var charCode = e.which || e.keyCode;
    if (charCode == 9) {
        e.preventDefault();
        var $row = $grid.find('.jqgrow#' + id);
        var $columns = $row.find('td');
        $td = $($columns[iCol]);

        if (isAnyDate(iCol)) {
           $td.find('input').addClass('textBoxStyle').datepicker();  //if it is a date field then apply a datepicker
        }
        else {
            $td.find('input').addClass('textBoxStyle');
        }
   }

Problem: The error that I keep on getting is:

<pre lang="Javascript">Uncaught TypeError: Cannot read property 'dpDiv' of undefined jquery-ui-1.8.19.custom.min.js:65
$.extend._doKeyDown jquery-ui-1.8.19.custom.min.js:65
f.event.dispatch jquery-1.7.1.min.js:4
f.event.add.h.handle.i

The strange part: When I navigate through cells using mouse, and repeat the same procedure, it works like a charm...no error at that time..help?