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?

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

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.