Help with dynamically changing the height of a grid

I'm having some trouble dynamically changing the height of a grid. I have some sort of a widget (in this case just a plain vanilla HTML button) that will increase or decrease the height of a DIV element which contains a Grid widget.

How would I get the Grid to adapt its height any time the height of the containing DIV element changes?

I've tried examples on this site as well as those in the test directories of Dojo yet can't get it to work. If I try to assign the Grid DIV element to a variable (not shown in the code below) and then try to access functions like update or attributes like fastScroll, I get a Javascript error that says that the object doesn't support them.

Can someone tell me what I'm doing wrong? Thanks.

<html>
    <head>
        <style type="text/css">
            @import "dojo/dojox/grid/_grid/tundraGrid.css";
            @import "dojo/dijit/themes/tundra/tundra.css";
            @import "dojo/dojo/resources/dojo.css";
        </style>
        <script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dojox.grid.Grid");
            dojo.require("dojox.grid._data.model");
            
            var view1 = {
                noscroll: "true",
                cells: [
                    [
                        { name: "ID", field: "id", cellStyles: "text-align: right;", headerStyles: "text-align: center;" }
                    ]
                ]
            };
            var view2 = {
                cells: [
                    [
                        { name: "Start Date", field: "start", cellStyles: "text-align: center;", headerStyles: "text-align: center;" },
                        { name: "End Date", field: "end", cellStyles: "text-align: center;", headerStyles: "text-align: center;" },
                        { name: "Quantity", field: "quantity", cellStyles: "text-align: right;", headerStyles: "text-align: center;" },
                        { name: "Unit Cost", field: "unitcost", cellStyles: "text-align: right;", headerStyles: "text-align: center;" },
                        { name: "Total", field: "total", cellStyles: "text-align: right;", headerStyles: "text-align: center;" }
                    ]
                ]
            };
            
            var layout = [ view1, view2 ];
            
            function makeGridTaller() {
                document.getElementById("summaryPanel").style.height = "500px";
            }
        </script>
        <script type="text/javascript" language="javascript1.2" src="prototype.js"></script>
    </head>
    <body class="tundra">
        <div><input type="button" value="Taller" onclick="makeGridTaller();"/></div>
        <div id="summaryPanel" style="top: 80px; width: 300px; height: 300px; border: solid 1px red;">
            <div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore1" url="gridContentsLIs.txt"></div>
            <div dojoType="dojox.grid.data.DojoData" jsId="model1" rowsPerPage="20" store="jsonStore1" query="{ id: '*' }"></div>
            <div id="grid1" dojoType="dojox.Grid" model="model1" structure="layout"></div>
        </div>
    </body>
</html>

Search

Help with dynamically changing the height of a grid

grid.resize()