ListGrid usage in SectionStack: Setting initial height

[ssouthwell]

I've got a SectionStack with three sections. In my last section, I have a ListGrid that I want to have a variable height, corresponding to the current height of the section.

If I don't specify a height on the ListGrid object, then my SectionStack gives my sections equal heights, which I don't want. I want this last grid to start off being 100px high, and let the user expand it if they want to.

But if I set the ListGrid height=100, then that ListGrid stays 100px when I resize that last section by dragging the section header. Resizing by opening or closing other areas in the section stack does correctly resize the grid.

I've tried placing my grid within a layout and placing the layout as in the sectionStack, but nothing seems to do the trick.

What am I doing wrong here?

Sample code:

        var notesBox = isc.Canvas.create({
            width: "100%",
            height: 200
        });
        var ledgerArea = isc.Canvas.create({
            width: "100%",
            height: "*"
        });
        var onHoldGrid = isc.ListGrid.create({
            fields: [{
                name: "A"
            }, {
                name: "B"
            }],
            height: 100
        });
        var sectionStack = isc.SectionStack.create({
            visibilityMode: "multiple",
            width: "100%",
            headerHeight: 20,
            height: 800,
            sections: [
                {    
                    title: "Notes",
                    items: [notesBox],
                    expanded: true
                },
                { 
                    title: "Ledger",
                    items: [ledgerArea],
                    expanded: true
                },
                { 
                    title: "Funds on Hold",
                    items: [onHoldGrid],
                    expanded: true,
                    resizable: true
                }
            ]
        });
        sectionStack.draw();

[aklopp]

canDragResize

You could set canDragResize to true.

http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/widgets/Canvas.html#setCanDragResize(java.lang.Boolean)

[ssouthwell]

Sort of...

You could set canDragResize to true.

Thanks - that does let the user resize the grid manually, but the size doesn't automatically take up the entire sectionStackSection.

[aklopp]

A few ideas

How about setting autoFitData?

http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/widgets/grid/ListGrid.html#setAutoFitData(com.smartgwt.client.types.Autofit)


Or setting autoFitFieldsFillViewport?

http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/widgets/grid/ListGrid.html#setAutoFitFieldsFillViewport(java.lang.Boolean)

[ssouthwell]

Nope

How about setting autoFitData?
...
Or setting autoFitFieldsFillViewport?

Unfortunately neither of those work. Nothing I try seems to tie the size of the grid to the size of the available vertical space in the sectionStackArea.

[ssouthwell]

Maybe some way to catch resizes and have an event resize the grid?

One approach I thought about taking was to somehow hook into an event on resize of the sectionStackSection, and use that to resize the ListGrid.

But there appear to be no events on sectionStackSection, and the ListGrid.parentResized() function is not called when the section is resized.

Another approach I thought about was to set the sizes of all my components in the SectionStack to "*" which pegs them to the size of the sectionStackSection, and then try to programmatically set the section heights after I draw the sectionStack. I can't see any methods to do that either.