Dgrid Resizing within BorderContainer

Question

I have a dgrid within a BorderContainer with "liveSplitters" enabled (using Dojo 1.8). The dgrid comes up nicely, but when I move the splitter between the left column and the "leading" column (that the dgrid is within), the dgrid does not properly resize. However, if I resize the window a tad, then the dgrid snaps back into a proper size (i.e. filling 100% of the "leading" pane of the BorderContainer).

I have dgrid set to 100% width in CSS. Is there some way I need to tell dgrid to refresh its size after the splitter moves?

Stauffer

Answer 1

Look at this example I wrote answering another dgrid related question: http://jsfiddle.net/phusick/VjJBT/

The CSS rule you are looking for is:

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

EDIT: I thought it might have been a problem of dgrid version, so I updated my dgrid to the latest version 0.3.3 and created a test for the issue of yours: http://jsfiddle.net/phusick/5mHTS/.

Well, it was not the issue of versions and both 0.3.1 and 0.3.3 works fine when resizing BorderContainer, but only in Chrome and Firefox. I reproduced the issue in IE9 and Opera 12.10:

The grid needs to invoke grid.resize() to resize properly, which does not happen in IE9/Opera, when resizing BorderContainer, but happens always when you resize the window.

DijitRegistry fixes the issue, because layout components, like BorderContainer and ContentPane, call resize() on all their dijit children when resized.

So either subclass DijitRegistry or dojo/aspect listen for resize on parent ContentPane of the grid and invoke grid::resize():

aspect.after(contentPane, "resize", function() {
    grid.resize();
});

Heeheebiejeebies

Thanks for the tip, @phusick. I added that, but the problem seems to have remained. When I look at Chrome's inspector view of the code in your JSFiddle sample, I notice that the dgrid-header class row does not have a set width. However, in my code, Dojo seems to add a style="width: XXXpx;" to that div tag (it is not hardcoded by me). When the window resizes, this fixed width is updated, but when the splitter is moved, the fixed width is not updated. Any idea why it is setting a fixed width? – Stauffer

Actually, as I look, Dijit (or dojo.parser?) is adding these fixed styles all over the page. And they don't properly resize all the time. Is there some general setting I need to set? If I use !important on .dgrid-header-row in my CSS, I can override the fixed width inline style, but these feels like a hack. – Stauffer

To keep replying to myself, it seems that if I tell dgrid to mix in DijitRegistry, it works better (though I'm unclear why your example didn't mix it in and worked OK -- thoughts?). However, my headline ContentPanel doesn't dynamically resize to the page width, once dgrid is rendered and I can't figure out why. Any suggestions? – Stauffer

Answer 2

As noted in the comments to @phusick's answer, Dgrid resizes properly if I use the DijitRegistry mixin. I had some other resizing problems too, but they had to do with having a set relative width on the element in my css (e.g. 100%). If I remove the size, which wasn't required by ContentPanel anyway, all elements resize OK. The CSS had been carried over from Dojo 1.5, which apparently did not react the same way to a ContentPanel having a size set in the CSS.

Stauffer

It would be nice if you elaborated a bit more than "if I use the DijitRegistry mixin". As Simon suggested, a code sample would be helpful. – Ellata