10 Replies Latest reply on Mar 20, 2007 6:14 PM by dimival

    Datagrid Row Height

    mikeblz2003
      Hi - I'm using a datagrid with an datagridcolumn itemrenderer. The itemrenderer is a vbox that contains an hbox and a repeater that has nested hboxes and vboxes. The rows on the datagrid can be variable height depending on the content. I have set variablerowheight on the datagrid but it isn't working. If I set the height of the itemrenderer parent vbox to an explicit value, the datagrid row heights change...but I can't hard code the height of the vbox.

      Another thing to note is that if I add more content to the rows, they DO grow...but not to the full content height.

      Any ideas are greatly appreciated.

      Thanks,
      Mike
        • 1. Re: Datagrid Row Height
          mikeblz2003 Level 1
          It seems like the nested elements are not the problem, but the mx:Text within them is. Does Text not return the proper size to the parent container? If I replace Text with TextArea or make everything labels, the rows resize accordingly....however, Text is what I need because every other property is what I'm looking for. Any ideas?
          • 2. Re: Datagrid Row Height
            ntsiii Level 3
            mx:Text is single line only.
            Tracy
            • 3. Re: Datagrid Row Height
              mikeblz2003 Level 1
              The docs say mx:Text is multiline...

              "The Text control displays multiline, noneditable text. Use the Label control if you need only a single line of text."
              • 4. Re: Datagrid Row Height
                ntsiii Level 3
                Huh, I stand corrected.
                Tracy
                • 5. Re: Datagrid Row Height
                  ntsiii Level 3
                  Maybe you can post a simple runnable example we can play with?
                  Tracy
                  • 6. Re: Datagrid Row Height
                    Чернявский
                    It can to you will approach?
                    <?xml version="1.0"?>
                    <!-- dpcontrols/DataGridSimple.mxml -->
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
                    <mx:DataGrid>
                    <mx:ArrayCollection>
                    <mx:Object>
                    <mx:Artist>Pavement</mx:Artist>
                    <mx:Price>11.99</mx:Price>
                    <mx:Album>Slanted and Enchanted asd asd asd asd kj alksdjf ladksj laksdj lasdkj lasdkjf lasdkf jlasdk jl;fkasdjf ;lkadsjf lkasdjf lkasdjf lkasdj l;asdkj fl;kasdj fl;kaj slkajfs l;kjsdf</mx:Album>
                    </mx:Object>
                    <mx:Object>
                    <mx:Artist>Pavement</mx:Artist>
                    <mx:Album>Brighten the Corners</mx:Album>
                    <mx:Price>11.99</mx:Price>
                    </mx:Object>
                    </mx:ArrayCollection>
                    </mx:DataGrid>
                    <mx:DataGrid wordWrap="true" variableRowHeight="true">
                    <mx:ArrayCollection>
                    <mx:Object>
                    <mx:Artist>Pavement</mx:Artist>
                    <mx:Price>11.99</mx:Price>
                    <mx:Album>Slanted and Enchanted asd asd asd asd kj alksdjf ladksj laksdj lasdkj lasdkjf lasdkf jlasdk jl;fkasdjf ;lkadsjf lkasdjf lkasdjf lkasdj l;asdkj fl;kasdj fl;kaj slkajfs l;kjsdf</mx:Album>
                    </mx:Object>
                    <mx:Object>
                    <mx:Artist>Pavement</mx:Artist>
                    <mx:Album>Brighten the Corners</mx:Album>
                    <mx:Price>11.99</mx:Price>
                    </mx:Object>
                    </mx:ArrayCollection>
                    </mx:DataGrid>
                    </mx:Application>
                    • 7. Re: Datagrid Row Height
                      mikeblz2003 Level 1
                      Try this and you'll see what I mean. Note if you make the mx:Text fields a fixed width - not a percentage - it will work...however, I need them to be a percentage. Also, if you remove the width, the text does not wrap.

                      MyDataGridRenderer.mxml
                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" verticalScrollPolicy="off" width="100%" height="100%">
                      <mx:HBox width="100%" height="100%">
                      <mx:Label text="{data.name}" fontSize="16" />
                      </mx:HBox>

                      <mx:Repeater id="comp" dataProvider="{data.types}">
                      <mx:HBox width="100%" height="100%">
                      <mx:VBox width="90%" height="100%">
                      <mx:Text text="{comp.currentItem.name}" width="100%"/>
                      </mx:VBox>
                      <mx:VBox width="10%" height="100%">
                      <mx:Text text="{comp.currentItem.desc}" width="100%"/>
                      </mx:VBox>
                      </mx:HBox>
                      </mx:Repeater>
                      </mx:VBox>


                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
                      <mx:Script>
                      <![CDATA[
                      import mx.collections.ArrayCollection;
                      import mx.core.IUIComponent;
                      import mx.collections.IList;
                      private function getData():ArrayCollection
                      {
                      var comps:ArrayCollection = new ArrayCollection();

                      var aType1:Object = new Object();
                      aType1.name = "Type 1";
                      aType1.desc = "asdl alj asdk aflkj flkasjdf aSL LAKDF AD slkds lasdk afl al sl fasdl alj asdk aflkj flkasjdf aSL LAKDF AD slkds lasdk afl al sl f";
                      var bType1:Object = new Object();
                      bType1.name = "Type 2";
                      bType1.desc = "asdl alj asdk aflkj flkasjdf aSL LAKDF AD slkds lasdk afl al sl fasdl alj asdk aflkj flkasjdf aSL LAKDF AD slkds lasdk afl al sl f";
                      var bType2:Object = new Object();
                      bType2.name = "Type 3";
                      bType2.desc = "asdl al sl f";

                      var aTypes:ArrayCollection = new ArrayCollection();
                      var bTypes:ArrayCollection = new ArrayCollection();

                      aTypes.addItem(aType1);
                      bTypes.addItem(bType1);
                      bTypes.addItem(bType2);

                      var a:Object = new Object();
                      var b:Object = new Object();

                      a.name = "Company A";
                      b.name = "Company B";
                      a.types = aTypes;
                      b.types = bTypes;

                      comps.addItem(a);
                      comps.addItem(b);
                      return comps;
                      }
                      ]]>
                      </mx:Script>
                      <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="80%" height="100%">
                      <mx:DataGrid id="dg" dataProvider="{getData()}"
                      width="100%"
                      height="100%"
                      variableRowHeight="true" wordWrap="true"
                      >
                      <mx:columns>
                      <mx:DataGridColumn
                      itemRenderer="MyDataGridRenderer"
                      headerText="Companies" wordWrap="true"/>
                      </mx:columns>
                      </mx:DataGrid>
                      </mx:HBox>
                      </mx:Application>
                      • 8. Re: Datagrid Row Height
                        dimival Level 1
                        You said that TextArea works fine, why not use non-editable TextArea components instead?
                        • 9. Re: Datagrid Row Height
                          mikeblz2003 Level 1
                          My mistake - I just tried replacing text with textarea and it doesn't work right either. Give it a try...the textarea is scrollable and doesn't cause the height of the row to expand properly.
                          • 10. Re: Datagrid Row Height
                            dimival Level 1
                            Maybe you should report this as a bug