Dojox.grid.DataGrid - in a widget - only renders on visible tab

Question

I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.

The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.

Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?

Help - this is driving me mad!

Answer 1

Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.

The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.

There's also a discussion on nabble with a different solution.

Answer 2

"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.

I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:

  dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
    dijit.byId(node.id).resize();
  });

This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.

Answer 3

An alternate approach is to resize the grid upon tab element selection. Sample code

dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){

        // if second tab (could be any...) selected
        if(child.id == 'mySecondTabId'){
            var myGrid = dijit.byId('myGridInsideTabId');
            if(myGrid != null) myGrid.resize();
        }
    });