AdvancedDataGrid horizontal/vertical scroll bar problems. (Flex)

Question

So, I have an AdvancedDataGrid that needs to live inside a Canvas. My problem is that when you do something like this you get two sets of scroll bars. Also, the horizontal scroll bar for the AdvancedDataGrid changes size as you scroll right to left and will not let you scroll ALL the way to the right, which seems odd.

I've turned horizontal scrolling off on the AdvancedDataGrid and let only the Canvas handle it. When I do that, however, the columns don't allow themselves to be resizable. Ugh.

My current "best" solution is to have the AdvancedDataGrid handle the vertical scrolling and the Canvas handle the horizontal scrolling, but this just seems insane, not to mention I get the problem I mentioned above where I can no longer resize columns.

Any help is greatly appreciated! Thanks!

Answer 1

The AdvancedDataGrid's horizontal scrolling is somewhat peculiar, in that it sizes its horizontal scroll thumb based on the width of the visible columns. You actually can drag the thumb to the end, but it might take a couple of tries. (I know, I know ...)

Remember that in the AdvancedDataGrid there is nothing actually rendered outside the viewport, so any sizing is just an educated (well, somewhat educated) guess. Adobe does this so that huge grids don't bog down to a crawl (imagine running measure methods on 15,000 cells' itemRenderers every time you resized the window).

My advice is to turn off both vertical and horizontal scroll policies in the Canvas and allow the scrolling to be handled in the ADG. It's ugly, but it beats the alternative. The ADG is a cumbersome, cantankerous contraption anyway, which may be why Adobe has open-sourced it. I have sworn many times I would never use it again. I've been able to keep that vow only until the next time I needed its features. Which is about every week.

Answer 2

Is the AdvancedDataGrid the only thing in your canvas?

I would size the AdvancedDataGrid to it's full height and width and let the Canvas handle scrolling.

In the canvas, override the updateDisplayList method and do something like this:

protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number):void{
 super.updateDisplayList, unscaledHeight);
 this.myAdvancedDataGrid.setActualSize(this.myAdvancedDataGrid.measuredHeight, this.myAdvancedDataGrid.measuredWidth );
}

This way the AdvancedDataGrid should have no scroll bars. However, if it stretches to far down, or too far right the scroll bars will appear in the canvas.

You might benefit from reading up on the Flex Coordinate System. The AdvancedDataGrid is your "Content" while the Canvas would be your local.

---

I'm adding a full running code sample to demo my suggestion.

This is the canvas component with an AdvancedDataGrid inside it: com.flextras.stackOverflow.CanvasWithGrid

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                this.myADG.setActualSize(this.myADG.measuredWidth, this.myADG.measuredWidth );
            }

            [Bindable]
            private var dpFlat:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                {Region:"Southwest", Territory:"Nevada", 
                    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
            ]);

        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG" 

                         initialize="gc.refresh();"> <!--  width="100%" height="100%"  -->       
        <mx:dataProvider>
            <mx:GroupingCollection id="gc" source="{dpFlat}">
                <mx:grouping>
                    <mx:Grouping>
                        <mx:GroupingField name="Region"/>
                        <mx:GroupingField name="Territory"/>
                    </mx:Grouping>
                </mx:grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>        

        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                       headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</mx:Canvas>

This is the main application file:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:stackOverflow="com.flextras.stackOverflow.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <stackOverflow:CanvasWithGrid width="200" height="200" />


</s:Application>