assertTrue is the professional blog of Luke Bayes and Ali Mills

Flex Builder 2.0.1 DataGrid Woes...

Posted by Luke Bayes Sat, 13 Jan 2007 01:11:00 GMT

Ali and I were just working on our super-secret project that’s written using Flex 2 and we came across a pretty surprising problem.

We have a DataGrid that slides out of the way and back again. If the application is compiled on his machine, the DataGrid header disappears after being collapsed to less than 2 pixels of width, while it works fine when compiled on my machine.

We finally figured out that he has installed Flex Builder 2.0.1 while I’m still on the good old Flex Builder 2.0… Looks like some kind of fun injection!

Essentially the rule is that if you’re using the latest Flex Builder build (2.0.1), don’t ever let your DataGrids get smaller than 2 pixels wide.

The following example was compiled on my machine in Flex Builder 2.0. You’ll notice that you can close the DataGrid to any width – including zero.

This one was compiled on Ali’s machine in Flex Builder 2.0.1. If you close the DataGrid to less than 2 pixels, you notice that the header is gone. We added a reset button that removes and reattaches the instance so you can do it again and again and again. It’s really fun!

After posting this, is appears there are other problems as Ali’s swf throws up scrollbars that we can’t seem to get rid of!

Yaaaay!

Here’s the source for this one: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            public function reset():void {
                container.removeChild(dataGrid);
                dataGrid = new DataGrid();
                dataGrid.id = "dataGrid";
                dataGrid.columns = [new DataGridColumn("Header - Don't lose me!")];
                dataGrid.percentWidth = 100;
                dataGrid.percentHeight = 100;
                container.addChildAt(dataGrid, 0);
            }
        ]]>
    </mx:Script>
    <mx:VBox id="container" width="100%" height="100%">
        <mx:DataGrid id="dataGrid" width="100%" height="100%" rowHeight="20">
            <mx:columns>
                <mx:DataGridColumn headerText="Header - Don't lose me!" />
            </mx:columns>
        </mx:DataGrid>
        <mx:HBox width="100%" horizontalAlign="center">
            <mx:TextInput id="textInput" text="2"/>
            <mx:Button click="{dataGrid.width = Number(textInput.text)}" label="close" />
            <mx:Button click="dataGrid.percentWidth = 100" label="open" />           
            <mx:Button click="{reset()}" label="reset" />           
        </mx:HBox>
    </mx:VBox>
</mx:Application>

Tags , , ,  | 7 comments

Comments

Leave a response

  1. Ted Patrick replied: Avatar I am wondering why you would make the datagrid < 2 px wide in order to hide it. There are several ways to solve the hiding issue you are seeing other than resizing the DataGrid. 1. Wrap it in a container, make the width=0 or height=0, poof gone! 2. Flip the 'visible' boolean value on the DataGrid. Most likely in your example the modification of width and percentWidth is the issue. Try setting percentage width to null when setting width and vice versa. The measurement and layout will get all confused depending on the order of operations especially if the two are set with values. Which width do I use? Also scrollbars on the parent vbox container. Use verticalScrollPolicy and horizontalScrollPolicy to adjust. Cheers, Ted :)
    Posted: about 16 hours later.
  2. Luke Bayes commented: Avatar Thanks for the response Ted! Basically, we need to adjust width in our app because we're animating the grid horizontally out of sight. I'll try the suggestion of putting it in a container and resizing that - this sounds like an especially good suggestion because we are also getting intermittent strange behaviors with the column widths after a resize. Regarding the use of width vs. percentWidth, I have been under the impression that the layout framework usually does quite well with accepting whatever was last used, has this changed in 2.0.1, or was I just getting lucky in the past? I'm sure we could get rid of the scrollbars in the second example with scroll policy adjustments, but the concerning thing is that these are identical applications - the only difference is the minor revision number of Flex Builder. It's mainly this concern that prompted the blog post. Has anyone else seen new / different behaviors in the new release?
    Posted: about 21 hours later.
  3. Anthony McClure replied: Avatar If you are animating, why not use states to represent the open and closed versions and then transitions for the animation? Simple to create and the animation is a no brainer with transitions.
    Posted: about 23 hours later.
  4. Jon Valliere commented: Avatar It seemed both of the examples worked the same on my machine ( in Safari ).
    Posted: 14 days later.
  5. Jeffry Houser replied: Avatar Both examples look the same on my machine to. ( Firefox 2 )
    Posted: 27 days later.
  6. Travis Woolworth commented: Avatar To the two people who posted and said it looked the same. You have to manually set it to close to 1px by default of hitting the close button it goes to 2px and when you hit open the header will still be showing. However once you change the 2.0.1 instance to 1px the header disappears. Luke Bayes: I have found something strange with use the close event. I created my own Panel that was based off the TitleWindow component idea with how it gets a close button. In 2.0 this worked because the panel had a close event you just couldn't get the close button to show. Now after updating to 2.0.1 about 20 minutes ago I no longer have the option to choose close=eventHandler(). I'm still researching but I have yet to find anything in release notes / google about the update changing close events on components. If anyone has any ideas I'd much appreciate it.
    Posted: 46 days later.
  7. bill replied: Avatar Well, I hate to tell you, we are resetting the number to 2 or less and trying it, trust us. I tried it on 0 and they both worked the same. I cant get the header to disappear.
    Posted: 71 days later.

RSS feed for this post trackback uri

Your Reply

Comment Form.

Fields denoted with an "*" are required.