CODEWITHSUNDEEP
dojodgrid
perl2012
perl2012

Reputation: 149

Why will the headings in my dojo dgrid not appear unless I resize the browser?

I've got a dgrid with headings that will not appear unless I resize the browser window. As soon as I resize the browser window, the headings appear. How can I get the headings to show up without resizing the browser?

Am I not calling startup() correctly? Is there an event I can fire to make the dgrid think the browser has been resized?

Upvotes: 1

Views: 532

Answers (3)

perl2012
perl2012

Reputation: 149

So I added an onShow event handler to the ContentPane that held my grid, and whenever it fires, it calls grid.resize(). Simple, but it works.

Upvotes: 0

SupaFil
SupaFil

Reputation: 21

Just solved issue. So, my problem was: I programmatically add dgrid into dijit/layout/ContentPane . Across other browsers its work fine except IE 6. It didn't show dgrid unti I resize browsers' window. I have used many solutions from the StackOverflow and other sites. Until I didn't replace css rule for my grid (found in one Stacks' solution).

Somewhere I found the next css rule:

#dataGrid {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: auto;
}

Its ok, but not in IE6. I was changed to:

#dataGrid {
width: 100%;
height:100%;
}

And its ok now across all my testing browsers. Hope I help you :) Totally adding working dgrid (Dojo 1.9):

HTML (my container):
<div class="centerPanel" id="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" ></div> 

JS (I skipped reuires):
grid = new (declare([OnDemandGrid, DijitRegistry, ColumnResizer,Keyboard, Selection]))({
  columns: docListLayout,id:"dataGrid"
});
registry.byId("centerPanel").addChild(grid);

CSS:
#dataGrid {
width: 100%;
height:100%;
}

Also I removed CSS for my centerPanel with width/height declarations.

CU.

Upvotes: 0

KyJoHo
KyJoHo

Reputation: 66

Put add the DijitRegistry to the grid as shown here:

https://github.com/SitePen/dgrid/wiki/DijitRegistry

Put a dijit Container in your content pane (if the pane is necessary) and add the grid as a child of the container. The container will call startup on its children which resizes them also.

Upvotes: 1

Related Questions