Geek Answers Handbook

Dojox.grid.DataGrid - in widgets - displayed only on the visible tab

I am using a widget containing a DataGrid object. The widget works great when included in the first tab (this is the "Visible" tab), but not when I use the same code in the second tab.

The code is the same as I did a few checks to make sure there are no other problems - and that the Grid code doesn’t work fine - only the grid that has the problem. I tried to set the height and width manually, and this leads to a big gray rectangle in the second tab.

Do I need to tell Grid to update it somehow - or is this a property for TabContainer?

Help - it drives me crazy!

+4
source share
3 answers

Yes, this is a big grid problem. If you use it declaratively in a tab container, it will not display correctly on invisible tabs. It should calculate the height / width (even if you specified them) ... as you saw.

The way I got around this is to create grids programmatically when choosing a tab. I posted my solution on the dojo forum. My sample code is completed on github. It is too large to be published here. Let me know if you want to, and I will edit my answer.

It also discusses nabble with another solution.

+5
source

"resize" works like a charm! I searched for it for a long time (I didn’t know what I needed to look for), thanks.

I use this routine to dynamically determine if a tab has more than one datagrid, because I may not know the identifier of one grid, maybe someone else can use it:

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 this part if you want to search the entire DOM) for the div with an id starting with "gridNode_" and apply the "resize" to these widgets.

+1
source

An alternative approach is to resize the grid when selecting a tab element. Code example

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(); } });
0
source

More articles:


All Articles