7 Replies Latest reply on Nov 16, 2009 1:01 PM by JabbyPandaUA

    Set rowCount of datagrid not working?

    Handycam Level 1

      I have a datagrid, which I'd like to have only enough rows to store the data in it.  So I set the rowCount to be the length of the collection:

      <mx:DataGrid id="ingredientDG" dataProvider="{completeIngredients}" borderVisible="true" rowCount="{completeIngredients.length}"
            selectable="false" wordWrap="true" styleName="recipeGrid" width="610" 
            verticalScrollPolicy="off"  variableRowHeight="true" showHeaders="false">
           <mx:columns>
                <mx:DataGridColumn dataField="@qty" headerText="Amount" labelFunction="formatAsFraction" width="60" />
                <mx:DataGridColumn dataField="@units" headerText="Units" width="60" />
                <mx:DataGridColumn dataField="@ln2" headerText="Ingredient" />
           </mx:columns>
      </mx:DataGrid>
      

      But it's always the same height.  It's still the same height even if I explicity set rowCount="4".

       

      If I turn off variableRowHeight, I get 4 rows, but still the same huge height.

      Screen shot 2009-10-28 at 10.08.49 PM.png

       

      Why?

        • 1. Re: Set rowCount of datagrid not working?
          Peter deHaan Level 4

          Seems to work for me (in my weird test case and Flex SDK 4.0.0.11250):

           

          <?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/halo">
              <s:layout>
                  <s:VerticalLayout paddingLeft="20" paddingTop="20" />
              </s:layout>
              <s:controlBarContent>
                  <s:Button click="button1_clickHandler(event);" />
              </s:controlBarContent>
          
              <fx:Script>
                  <![CDATA[
                      protected function button1_clickHandler(evt:MouseEvent):void {
                          completeIngredients.addItem(<ingredient qty={new Date().seconds} units='Tbsp' ln2='Somethings' />);
                      }
                  ]]>
              </fx:Script>
              
              <fx:Declarations>
                  <s:XMLListCollection id="completeIngredients">
                      <s:source>
                          <fx:XMLList xmlns="">
                              <ingredient qty="3" units="Tbsp" ln2="Pineapples" />
                              <ingredient qty="5" units="inches" ln2="Water" />
                              <ingredient qty="2" units="whole" ln2="Raw chickens" />
                              <ingredient qty="1" units="tsp" ln2="bread crumbs" />
                              <ingredient qty="11" units="" ln2="Fresh ginger" />
                              <ingredient qty="9" units="oz" ln2="Jalapeno chiles" />
                          </fx:XMLList>
                      </s:source>
                  </s:XMLListCollection>
              </fx:Declarations>
              
              <mx:DataGrid id="ingredientDG" dataProvider="{completeIngredients}" borderVisible="true" rowCount="{completeIngredients.length}"
                           selectable="false" wordWrap="true" width="610" 
                           verticalScrollPolicy="off" variableRowHeight="true" showHeaders="false">
                  <mx:columns>
                      <mx:DataGridColumn dataField="@qty" headerText="Amount" width="60" />
                      <mx:DataGridColumn dataField="@units" headerText="Units" width="60" />
                      <mx:DataGridColumn dataField="@ln2" headerText="Ingredient" />
                  </mx:columns>
              </mx:DataGrid>
          </s:Application>
          

           

           

          Or am I missing something?

           

          Peter

          • 2. Re: Set rowCount of datagrid not working?
            Handycam Level 1

            It sits in these surroundings, if that matters:

            <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/halo" 
                       xmlns:comp="components.*"
                       width="800" height="560" skinClass="skins.RecipePanelSkin">
            <s:Scroller width="100%" height="100%">
                 <s:VGroup id="scrollerContent">
                      
                      <s:VGroup id="page1" width="600" >                    
                           <s:RichText />
                           <s:RichText />
                           
                           <s:Label />
                           
                          <mx:DataGrid id="ingredientDG" dataProvider="{completeIngredients}" borderVisible="false" rowCount="4"
                                selectable="false" wordWrap="true" styleName="recipeGrid" width="610" 
                                verticalScrollPolicy="off"  variableRowHeight="true" showHeaders="false">
                               <mx:columns>
                                   <mx:DataGridColumn dataField="@qty" headerText="Amount" labelFunction="formatAsFraction" width="60" />
                                   <mx:DataGridColumn dataField="@units" headerText="Units" width="60" />
                                   <mx:DataGridColumn dataField="@ln2" headerText="Ingredient" />
                               </mx:columns>
                          </mx:DataGrid>
                           
                      </s:VGroup>
                      
                      <s:VGroup id="page2" width="600">
                           <s:Label />
                           <s:RichText id="instructionText" paragraphSpaceAfter="12" fontFamily="Verdana" fontSize="12" width="100%"/>
                      </s:VGroup>
                      
                 </s:VGroup>
            </s:Scroller>
            
            <s:controlBarContent>
                 <s:Button />
                 <mx:Spacer width="100%" />
                 <s:Button />     
                 <s:Button />     
                 <s:Button />
            </s:controlBarContent>
            </s:Panel>
            
            • 3. Re: Set rowCount of datagrid not working?
              Peter deHaan Level 4

              Interesting.

              Can you throw a few trace() statements in there and tell me how tall that DataGrid control is on the display list?

              • 4. Re: Set rowCount of datagrid not working?
                Peter deHaan Level 4

                Actually, maybe that doesnt matter. My DataGrid was rendering at 122px (about 5 lines) whereas it should have only been 77px (3 lines).

                 

                Try setting an explicit width on that last DataGridColumn, like so:

                <mx:DataGridColumn dataField="@ln2" headerText="Ingredient" width="550" />
                 

                 

                 

                That seemed to work for me.

                 

                Peter

                • 5. Re: Set rowCount of datagrid not working?
                  Handycam Level 1

                  Yes.  That did work.  Why on earth should that matter?  Just curious, as I

                  never would have looked there.

                   

                  Thanks.

                  • 6. Re: Set rowCount of datagrid not working?
                    Flex harUI Adobe Employee

                    When variableRowHeight=true, rowCount is an approximation, otherwise the height would be constantly changing as you scroll.  We measure one row, multiply by rowCount and that's the height.  If more or less rows actually fit at layout, that's what you get.

                     

                    In your case, I'd try using measureHeightOfItems and viewMetrics to calculate the height.

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    • 7. Re: Set rowCount of datagrid not working?
                      JabbyPandaUA Level 3

                      Also have a look at two smart solutions for "autosizable" List

                       

                      1) AutoSizing List by Bryan Bartow

                      http://www.bryanbartow.com/2008/12/08/release-flex-autosizinglist-component/

                       

                       

                      2) AutoResizableList by Pavel Kozhin "Vertex"

                      http://riapriority.com/blogs/media/users/vertex/auto_resizable_list/srcview/index.html

                       

                      Solution description, translated by Google Translate:

                      http://translate.google.com/translate?js=y&prev=_t&hl=en&ie=UTF-8&u=http://riapriority.com /blogs/vertex.php/2008/12/29/auto_resizable_list&sl=ru&tl=en&history_state0=

                       

                      Flex's dataGrid is based on the List component code base, thus I would expect that those 2 proposed solutions will be useful to you