4 Replies Latest reply on Jul 25, 2007 5:37 AM by mitchgrrt

    How to make DataGrid full width of Tab

    kiwibloke
      I have a DataGrid inside a Component.

      The component is part of a ViewStack that is controlled using a TabBar.

      Even though the DataGrid width is set to 100%, it never fills out to the full width of the TabBar. So, for example, the TabBar fills out to the full width of the browser (1024px) but the DataGrid only appears to be 200px wide.

      How do you ensure that a DataGrid fills the full width of the screen if that is what space is available?

      How do you detect the Stage.Width property or similar in Flex 2 ?

      Thanks,
      Martyn
        • 1. Re: How to make DataGrid full width of Tab
          connectricity
          With most mxml components you just need to set the width property to 100% to make it the full width of it's parent.

          If you have a small gap on either side, try setting the borderSize of the parent to 0.
          • 2. How to make DataGrid full width of Tab
            kiwibloke Level 1
            I agree that this should work, however, it does not for the following case:

            The Flex Project is set up as follows:

            project / main.mxml
            project / com / Tabs.mxml
            project / com / view / One.mxml
            project / com / view / Two.mxml
            project / com / view / Three.mxml

            The files are as defined below:

            main.mxml
            ============================
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*" xmlns:view="com.view.*" >

            <mx:states>
            <mx:State name="ShowTabs">
            <mx:AddChild position="lastChild">
            <com:Tabs horizontalCenter="0" y="0" width="100%" />
            </mx:AddChild>
            <mx:RemoveChild target="{One}"/>
            </mx:State>
            </mx:states>
            <view:One horizontalCenter="0" verticalCenter="0" id="One"/>

            </mx:Application>

            ============================

            Tabs.mxml
            ============================
            <?xml version="1.0"?>

            <mx:VBox
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns:view="com.view.*">

            <mx:HBox width="100%" height="100%">
            <mx:Panel title="Something" height="100%" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

            <mx:TabBar dataProvider="pages" width="100%" tabHeight="30" />
            <mx:ViewStack id="pages" resizeToContent="true" >
            <view:Two height="100%" width="100%" label="Two" id="two" />
            <view:Three height="100%" width="100%" label="Three" id="three" />
            </mx:ViewStack>

            </mx:Panel>
            </mx:HBox>

            </mx:VBox>
            ============================

            One.mxml
            ============================
            <?xml version="1.0" encoding="utf-8"?>

            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" >
            <mx:Button id="login" label="Login" click="parent['currentState'] = 'ShowTabs';" />
            </mx:VBox>
            ============================

            Two.mxml
            ============================
            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
            <mx:Label text="Content goes here" />
            </mx:VBox>
            ============================

            Three.mxml
            ============================
            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%" height="100%">

            <mx:Script>
            <![CDATA[
            [Bindable]
            public var selectedItem:Object;
            ]]>
            </mx:Script>

            <mx:XMLList id="employees">
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            </mx:XMLList>

            <mx:Panel title="People" height="100%" width="100%" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

            <mx:Label text="Select a person to see their properties."/>

            <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}" paddingLeft="10" paddingRight="10" >
            <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name"/>
            <mx:DataGridColumn dataField="phone" headerText="Phone"/>
            <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
            </mx:DataGrid>

            </mx:Panel>
            </mx:VBox>
            ============================

            As far as I am aware, everything is set to a width of 100%. If anyone has any idea how to make the datagrid go full width, I would be very grateful.

            Thanks,
            Martyn
            • 3. How to make DataGrid full width of Tab
              kiwibloke Level 1
              Found the solution. Needed to set the width of the ViewStack itself to 100% as well. It was resizeToContent="true" only without the width being set. Now it works when width="100%", as per the example below. Note that you still need resizeToContent="true" as well as width=100% so that it resizes vertically to accommodate the height of the DataGrid.

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:com="com.*" xmlns:view="com.view.*" >

              <mx:Script>
              <![CDATA[
              [Bindable]
              public var selectedItem:Object;
              ]]>
              </mx:Script>

              <mx:XMLList id="employees">
              <employee>
              <name>Christina Coenraets</name>
              <phone>555-219-2270</phone>
              <email>ccoenraets@fictitious.com</email>
              <active>true</active>
              </employee>
              </mx:XMLList>

              <mx:VBox
              xmlns:mx=" http://www.adobe.com/2006/mxml"
              xmlns:view="com.view.*"
              width="100%">

              <mx:HBox width="100%" height="100%">
              <mx:Panel title="Something" height="100%" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

              <mx:TabBar dataProvider="pages" width="100%" tabHeight="30" />
              <mx:ViewStack id="pages" width="100%" resizeToContent="true">
              <mx:Panel title="A" label="Apple">
              <mx:Text text="Hello" />
              </mx:Panel>
              <mx:Panel title="B" label="Banana">
              <mx:Text text="Gidday" />
              </mx:Panel>
              <mx:Panel title="People" label="Carrot" height="100%" width="100%" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

              <mx:Label text="Select a person to see their properties."/>

              <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}" paddingLeft="10" paddingRight="10" >
              <mx:columns>
              <mx:DataGridColumn dataField="name" headerText="Name"/>
              <mx:DataGridColumn dataField="phone" headerText="Phone"/>
              <mx:DataGridColumn dataField="email" headerText="Email"/>
              </mx:columns>
              </mx:DataGrid>

              </mx:Panel>

              </mx:ViewStack>

              </mx:Panel>
              </mx:HBox>

              </mx:VBox>

              </mx:Application>
              • 4. Re: How to make DataGrid full width of Tab
                mitchgrrt Level 1
                100% sets the width of the datagrid to 100% of the size of its parent's width. I haven't read through your example but probably the parent (or parent of the parent, etc) is not wide enough.