Dgrid Resizing within BorderContainer

border-container, dgrid, dijit.layout, dojo

Solution

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

Problem

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?

Original source