Question

I must be missing something because I have another control that is built in the same way, but doesn’t have this problem. I have a jQuery grid control that is registered via .NET’s registerClientScriptInclude. Everything on both grids is working correctly, but I’m calling a function from the Datatables KeyTable library that forces a page change when a user keys through the grid and gets to the very end of the table row, moving them to the next page.

When I register these controls, it looks like this:

var lookupGrid = registerGrid('pageContent_tbl1',...)
var lookupGrid2 = registerGrid('pageContent_tbl2',...)

Code for grid is in a JS file that is an embedded resource:

var registerGrid = function (table, ...) {
  grid = {
    "oTable": $("#" + table).dataTable({
        "bProcessing": true,
         ...
    }),
"focusPostDraw": function (position) {
            var drawCB = function () {
                if (position === 'top') {
                    keys.fnSetPosition($('#' + table + " tbody tr:first td.canEdit:first ")[0].cellIndex, 0);
                    keys.fnRemoveFocus($('#' + table + " tbody tr:last td.canEdit:last "));
                } else if (position === 'bottom') {
                    var oSettings = inlineGrid.oTable.fnSettings();
                    keys.fnSetPosition($('#' + table + " tbody tr:last td.canEdit:last ")[0].cellIndex, oSettings._iDisplayLength - 1);
                    keys.fnRemoveFocus($('#' + table + " tbody tr:first td.canEdit:first "));
                } else {
                    // Do Nothing
                }
                grid.setInlineGridHandler(function () { });
            };
            grid.setInlineGridHandler(drawCB);
        }
    };
return grid;
}

Everything looks great when I call focusPostDraw, but when I call:

grid.setInlineGridHandler(drawCB);

The grid variable is actually pointing at the lookupGrid2 instance of the grid, not the lookupGrid. Strangely, the table variable is set to the ID of the lookupGrid’s table variable. What is going on? Anyone have any idea?

Answer 1

Declare the variable in scope. Your js file should contain:

  var registerGrid = function (table, ...) {
  var grid = {
    "oTable": $("#" + table).dataTable({
        "bProcessing": true,
         ...
    }),
"focusPostDraw": function (position) {
            var drawCB = function () {
                if (position === 'top') {
                    keys.fnSetPosition($('#' + table + " tbody tr:first td.canEdit:first ")[0].cellIndex, 0);
                    keys.fnRemoveFocus($('#' + table + " tbody tr:last td.canEdit:last "));
                } else if (position === 'bottom') {
                    var oSettings = inlineGrid.oTable.fnSettings();
                    keys.fnSetPosition($('#' + table + " tbody tr:last td.canEdit:last ")[0].cellIndex, oSettings._iDisplayLength - 1);
                    keys.fnRemoveFocus($('#' + table + " tbody tr:first td.canEdit:first "));
                } else {
                    // Do Nothing
                }
                grid.setInlineGridHandler(function () { });
            };
            grid.setInlineGridHandler(drawCB);
        }
    };
return grid;
}

Unless you do that, your grid reference will be an undefined document.window-level variable named grid. The second time you run through the function, you’ll be overwriting that variable, and the reference to it.