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

问题

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!

回答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.

回答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.

回答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();
        }
    });

来源：https://stackoverflow.com/questions/1127468/dojox-grid-datagrid-in-a-widget-only-renders-on-visible-tab

标签

dojo