100% Height in dGrid

Question

How is it possible to make a dGrid instance take up 100% of the height of its container? I can use CSS to make the ".dgrid" classed div a specific height but when I set it to 100% it doesn't display.

Laine

Answer 1

Got it.

.dgrid {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
}

(With position absolute/relative on container, of course)

Laine

Some additional details: Dgrid Resizing within BorderContainer ;) – Hintz

Answer 2

I think the supported way to do this is with the .dgrid-autoheight css class.

        require([
            "dgrid/List",
            "dgrid/OnDemandGrid",
            "dgrid/Selection",
            "dgrid/Keyboard",
            "dojo/_base/declare",
            "dgrid/test/data/createAsyncStore",
            "dgrid/test/data/smallColorData",
            "dojo/domReady!"
        ], function(List, Grid, Selection, Keyboard, declare, createAsyncStore, smallColorData){
                window.grid = new (declare([Grid, Selection, Keyboard]))({
                    className: "dgrid-autoheight",
                    collection: createAsyncStore({ data: smallColorData }),
                    columns: {
                        col1: "Color",
                        col5: "R",
                        col6: "G",
                        col7: "B"
                    }
                }, "grid");
            });

This is from the test examples.

Jazzy

dgrid-auroheight resize grid to content not to container – Carboni

Answer 3

@voidstate's answer is good. Another way to do it is like this:

HTML:

<div class="containsDGrid">
    <div data-dojo-attach-point="dgrid"></div>
</div>

CSS:

.containsDGrid {
    height: 500px;
    width: 500px;
}

.dgrid {
    height: 100%;
    width: 100%;
}

The key is that if you set the height of the dgrid to 100%, the dgrid's parent must have its hight set. For example if we don't set the height of the .containsDGrid div then it will look like this (notice the height of 2px):

For another example see Dojo Dgrid - Use remaining space in block

Flintlock