Removing event listeners for Dojo dGrids

Question

I"m creating dGrids programmatically and adding listeners for event such as the ".dgrid-row:click", mouseUtil.enterRow, and mouseUtil.leaveRow. If I'm doing this for a single grid, it would be easy to do something like this to create the listener and remove it when I'm finished with the grid.

var clickEvent = dataGrid.on(".dgrid-row:click", gridSelect);
//code
clickEvent.remove();

However, I'm creating several dGrids in a loop.

for (result in results) {
    var dataGrid = new (declare([Grid, Selection, DijitRegistry, ColumnHider]))({
        id: "dgrid_" + result.name,
        bufferRows: Infinity,
        columns: result.columns,
        selectionMode: "single",
        "class": "resultsGrid"
    });

    dataGrid.on(".dgrid-row:click", gridSelect);
    dataGrid.on(mouseUtil.enterRow, gridEnter);
    dataGrid.on(mouseUtil.enterRow, gridEnter);

    dataGrid.renderArray(result.data);
}

The grids are being added to a TabContainer. What is the best way to remove all the listeners when I get rid of the TabContainer?

Answer 1

Since you're using the grid's own on method, it will automatically remove these listeners when the grid's destroy method is called (particularly in old IE; newer browsers should be able to properly GC by themselves).

Since you're mixing in DijitRegistry, your TabContainer should automatically destroy the grids when respective tabs are closed or the container itself is destroyed.