9 Replies Latest reply on Aug 8, 2009 8:14 AM by aterground

    resizeToContent for DataGrids?

    marcbc
      I'm trying to use a DataGrid... and I'm not sure about how to size it!
      I want it to be inside a Box, which should grow when the DataGrid grows in number of rows. That's why I made both, the Box and the DataGrid inside it 100% in height. The initial rowcount of the DataGrid, but it just displays 3 rows or so... and a vertical scroll bar.
      Has the DataGrid some kind of behavior like the resizeToContent from Accordions or something?

      thanks,

      Marc
        • 1. Re: resizeToContent for DataGrids?
          Peter deHaan Level 4
          You can set the rowCount property if you want your DataGrid to be a certain number of rows tall.

          For example, you could try something like the following:

          <mx:DataGrid id="dataGrid" width="200" dataProvider="{arrColl}" rowCount="{arrColl.length}" maxHeight="400" />

          That should set your DataGrid to have the same number of rows as your data provider (in this case an ArrayCollection). Also, i set a maxHeight in case you randomly get 300 rows of data, you wouldn't want your data grid to be 6000 rows.

          Peter
          • 2. Re: resizeToContent for DataGrids?
            marcbc Level 1
            Thanks for your response Peter, but it is not working for me...

            Imagine the DataGrid inside a Panel. Both, DataGrid and Panel have a percentHeight of 100, so I expect both to grow with the content of the datagrid. So, if the rowCount of the dataGrid is 15, I expect them to grow until the 15 rows are visible, and if the Panel has no enought room for that, show a VerticalScrollbar to scroll. But instead, the ScrollBar appears in the DataGrid, and the Panel keeps its size.

            Why the DataGrid doesn't push the Panel to make it grow?

            For example...


            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300">
            <mx:XMLList id="employees">
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
            </employee>
            <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
            </employee>
            <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
            </employee>
            <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
            </employee>
            <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
            </employee>
            </mx:XMLList>

            <mx:Panel height="100%" width="100%">
            <mx:DataGrid id="dg" width="100%" height="100%" rowCount="15" dataProvider="{employees}">
            <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:Application>




            Thnaks in advance,

            Marc



            • 3. Re: resizeToContent for DataGrids?
              P Steven
              Hi there

              Did you ever find a solution? I have exactly the same problem.

              Please let me know if you found a solution.

              Many thanks

              Paul
              • 4. Re: resizeToContent for DataGrids?
                marcbc Level 1
                Hi Paul,
                not really... I ended calculating fixed heights given the row number of the datagrids :-(

                if you find anything better post please!

                Marc
                • 5. Re: resizeToContent for DataGrids?
                  P Steven Level 1
                  Thanks for the reply Marc. I have tried using the rowCount but even that doesn't seem to behave properly especially when some lines of text word wrap.

                  I will let you know if I find a solution.

                  Cheers

                  Paul
                  • 6. Re: resizeToContent for DataGrids?
                    Sreenivas R Adobe Employee
                    Hi,

                    here is some code which seems to behave according to your expecation. You may have to tweak the addtion of 10 in GrowingDG measure() to some style value. I didn't spend time on figuring out why some additional space is required.

                    Achieving the same result for variableRowHeight case is difficult.

                    //main app file.
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="600"
                    height="300" xmlns:local="*">
                    <mx:XMLList id="employees">
                    <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>ccoenraets@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>jwall@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                    </employee>
                    <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>ccoenraets@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>jwall@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                    </employee>
                    <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>ccoenraets@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>jwall@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                    </employee>
                    <employee>
                    <name>Mary Jones</name>
                    <phone>555-219-2000</phone>
                    <email>mjones@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Christina Coenraets</name>
                    <phone>555-219-2270</phone>
                    <email>ccoenraets@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Joanne Wall</name>
                    <phone>555-219-2012</phone>
                    <email>jwall@fictitious.com</email>
                    <active>true</active>
                    </employee>
                    <employee>
                    <name>Maurice Smith</name>
                    <phone>555-219-2012</phone>
                    <email>maurice@fictitious.com</email>
                    <active>false</active>
                    </employee>
                    </mx:XMLList>

                    <mx:Panel height="300" width="500">
                    <local:GrowingDG id="dg" width="400" dataProvider="{employees}">
                    <local:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name"/>
                    <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                    <mx:DataGridColumn dataField="email" headerText="Email"/>
                    </local:columns>
                    </local:GrowingDG>

                    </mx:Panel>
                    </mx:Application>

                    //GrowingDG.as file
                    package
                    {
                    import mx.controls.DataGrid;

                    public class GrowingDG extends DataGrid
                    {
                    public function GrowingDG()
                    {
                    super();
                    }

                    override protected function measure():void
                    {
                    super.measure();
                    measuredMinHeight = measuredHeight =
                    rowHeight * dataProvider.length + headerHeight + 10;
                    }

                    }
                    }

                    Let me know when this fails :)

                    • 7. Re: resizeToContent for DataGrids?
                      P Steven Level 1
                      Thanks - I will give it a go though my datagrid is variable height.

                      Here is a screenshot displaying a section of my repeated custom component

                      http://www.mediakitchen.co.uk/datagrid.jpg

                      Essentially my custom component comprises a title text element and a datagrid

                      Here is my custom component code:

                      [code]

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="600">
                      <mx:DataGrid x="20" y="36" showHeaders="false" width="525" id="markSheetSectionDG" wordWrap="true" rowCount="{markSheet10DGDataAC.length}" variableRowHeight="true" editable="true" dataProvider="{markSheet10DGDataAC}" height="100%">
                      <mx:columns>

                      <mx:DataGridColumn headerText="" dataField="blockTitle" editable="false" />

                      <mx:DataGridColumn dataField="blockMark"
                      itemRenderer="mx.controls.CheckBox"
                      rendererIsEditor="true"
                      editorDataField="selected" headerText="" editable="true" width="50" />

                      </mx:columns>
                      </mx:DataGrid>
                      <mx:Text text="{_xmlItem.subTitle}" x="20" y="10" id="subTitle" fontWeight="bold"/>

                      <mx:Script>


                      <![CDATA[

                      import mdm.*;
                      import bin.uk.co.ultravioletdesign.utils.*;
                      import mx.controls.Alert;
                      import mx.collections.ArrayCollection;

                      [Bindable]
                      public var _xmlItem:XML;



                      [Bindable]
                      public var markSheet10DGData:XMLList;

                      [Bindable]
                      public var markSheet10DGDataAC:ArrayCollection;

                      [Bindable]
                      public var rowCountValue:uint;

                      /** Setter function */
                      public function set xmlItem(xml:XML):void
                      {

                      _xmlItem = xml;

                      markSheet10DGData = _xmlItem.block;

                      var howManyBlocks:uint = markSheet10DGData.length();

                      rowCountValue = howManyBlocks;

                      markSheet10DGDataAC = new ArrayCollection();

                      for (var i:uint = 0; i < howManyBlocks; i++) {

                      markSheet10DGDataAC.addItem({blockTitle: markSheet10DGData .blockTitle, blockMark: Boolean(Number(markSheet10DGData.blockMark))});


                      }


                      }



                      /** Getter function */
                      public function get xmlItem():XML
                      {
                      return _xmlItem;
                      }


                      ]]>
                      </mx:Script>






                      </mx:Canvas>


                      [/code]


                      • 8. Re: resizeToContent for DataGrids?
                        marcbc Level 1
                        Hey Sreenivas!
                        great advice, does the trick for me! The +10 seems to work well in my case also...

                        thanks,

                        Marc
                        • 9. Re: resizeToContent for DataGrids?
                          aterground

                          Are there another approach for case with variable row height?

                          I use 3.4 stable SDK, and there are empty row in grid, and rowCount do nothing with it. Know anyman how resolve this situation?