Dojo FAQ: Why doesn’t Dijit recognize my dgrid instances?

By on March 5, 2014 8:56 am

DojoFAQ

SitePen’s next-generation grid component, dgrid, is designed to be modular and lightweight, allowing you to only load what you need. It has been designed to work well in Dijit-based UIs, but functionality specific to interacting with Dijit is provided in a module that is not loaded by default. Without this module, two common problems often occur:

  • The dijit/registry module will not find dgrid based on its ID
  • The grid will not size correctly when placed inside a layout container widget, such as dijit/layout/BorderContainer

Both problems stem from the fact that while dgrid’s API is compatible with Dijit, it is not in fact a Dijit widget at its core. Dijit layout containers depend on Dijit’s registry to identify their children, and the Dijit registry is of course designed to locate only Dijit widgets, not arbitrary HTML elements.

You can resolve these problems by mixing the dgrid/extensions/DijitRegistry module into your grid:

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/extensions/DijitRegistry'
], function (declare, OnDemandGrid, DijitRegistry) {
    var grid = new (declare([OnDemandGrid, DijitRegistry]))({
        store: myStore,
        columns: myColumns
    }, 'grid');
});

The dgrid/extensions/DijitRegistry module adds and removes dgrid instances from the Dijit registry upon creation and destruction, and also contains considerations for various Dijit layout widgets, including a special resize implementation.

Learning more

If you’d like to learn more about dgrid, a number of tutorials are available on dgrid.io, and additional information on each of dgrid’s components is available in the project’s wiki. We also cover Dijit and dgrid extensively in our Dojo 201 Workshop.