16 Replies Latest reply on Jan 5, 2010 1:32 AM by archemedia

    Dynamic item renderer

    archemedia Level 4

      Hello,

      I can't get my hand on this one! Help much appreciated:

       

      In the code below, I isolated the problem I have. I use a TileList with a custom item renderer. Users can dynamically add items to this item renderer buth the main TileList component doesn't provide the space to display this new item.Is there a way to 're-render' the main TileList?

       

      Thanks in advance!

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:TileList id="myTileList"
              variableRowHeight="true"
              direction="vertical" columnCount="1" columnWidth="400">
              <mx:Array>
                  <mx:String>Item one</mx:String>
                  <mx:String>Item two</mx:String>
                  <mx:String>Item three</mx:String>
              </mx:Array>
              <mx:itemRenderer>
                  <mx:Component>
                      <mx:HBox width="100%" horizontalScrollPolicy="off">
                          <mx:Script>
                              <![CDATA[
                                  import mx.controls.Label;
                                 
                                  private function addItem():void
                                  {
                                      var l:Label = new Label();
                                      l.text = "New item!";
                                      contentHolder.addChild(l);
                                  }
                              ]]>
                          </mx:Script>
                          <mx:Button label="add item to item renderer" click="addItem()"/>
                          <mx:VBox id="contentHolder">
                              <mx:Label text="{data}"/>
                          </mx:VBox>
                      </mx:HBox>
                  </mx:Component>
              </mx:itemRenderer>
          </mx:TileList>
      </mx:Application>

        • 1. Re: Dynamic item renderer
          iamfuric Level 2

          have you tried to call "invalidateList" on  TileList ?

          • 2. Re: Dynamic item renderer
            archemedia Level 4

            It doesn't seem to do anything

            . Any other suggestions?

            d

            • 3. Re: Dynamic item renderer
              rgadiparthi Level 2

              try to change from HBox to VBox, then can see the items, that are added.

               

              <mx:itemRenderer>
                          <mx:Component>
                              <mx:VBox width="100%" horizontalScrollPolicy="off">
                                  <mx:Script>
                                      <![CDATA[
                                          import mx.controls.Label;
                                        
                                          private function addItem():void
                                          {
                                              var l:Label = new Label();
                                              l.text = "New item!";
                                              contentHolder.addChild(l);
                                          }
                                      ]]>
                                  </mx:Script>
                                  <mx:Button label="add item to item renderer" click="addItem()"/>
                                  <mx:VBox id="contentHolder">
                                      <mx:Label text="{data}"/>
                                  </mx:VBox>
                              </mx:VBox>
                          </mx:Component>
                      </mx:itemRenderer>

               

              Thanks

              • 4. Re: Dynamic item renderer
                archemedia Level 4

                Hi, you're right, it should be a VBox instead of a HBox, but it still doesn't solve the problem. I want the list to expand so you can see all of the VBox's content! Any ideas? thx

                • 5. Re: Dynamic item renderer
                  iamfuric Level 2

                  with

                   

                   

                  <mx:VBox height="100%" >

                   

                  the new item is added and scroll appears, i think you should override measure method for you renderer to eliminate scroll bar.

                   

                  • 6. Re: Dynamic item renderer
                    archemedia Level 4

                    Even without height="100%", the scrollbars appear but the list doesn't alter its height, the VBox does. It's the list itself which has to be redrawn but no function (like invalidateList etc.) seems to work!

                    • 7. Re: Dynamic item renderer
                      iamfuric Level 2

                      Try to override "measure" method for your renderer (VBox) to eliminate scroll bars

                      • 8. Re: Dynamic item renderer
                        archemedia Level 4

                        That didn't work either. I know I'm a little apprentice when it comes to deep basic functions like measure etc. Basically, my problem narrowes down to 'how can one alter the height of a list row programmaticaly'.

                        • 9. Re: Dynamic item renderer
                          alex-86

                          here is just a thought,

                           

                          why dont you use the setStyle() function, to change a property of the component.

                           

                          http://livedocs.adobe.com/flex/3/html/help.html?content=styles_08.html

                          • 10. Re: Dynamic item renderer
                            Madhav Subedi Level 4

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                                layout="vertical">
                                 <mx:TileList id="myTileList"
                                                 variableRowHeight="true"
                                                 direction="vertical"
                                                 columnCount="1"
                                                 columnWidth="400">
                                      <mx:Array>
                                           <mx:String>Item one</mx:String>
                                           <mx:String>Item two</mx:String>
                                           <mx:String>Item three</mx:String>
                                      </mx:Array>
                                      <mx:itemRenderer>
                                           <mx:Component>
                                                <mx:HBox width="100%"
                                                           horizontalScrollPolicy="off"
                                                           verticalScrollPolicy="off">
                                                     <mx:Script>
                                                          <![CDATA[
                                                               import mx.controls.Alert;
                                                               import mx.controls.Label;
                            
                            
                                                               private function addItem():void
                                                               {
                                                                    var l:Label=new Label();
                                                                    l.text="New item!";
                                                                    l.height=25;
                                                                    contentHolder.addChild(l);
                                                                    var h:Number=outerDocument.myTileList.rowHeight;
                                                                    outerDocument.myTileList.rowHeight=h + l.height;
                                                                    contentHolder.height=contentHolder.height + l.height + 8;
                                                                    height=height + l.height + 8;
                                                               }
                                                          ]]>
                                                     </mx:Script>
                                                     <mx:Button label="add item to item renderer"
                                                                  click="addItem()"/>
                                                     <mx:VBox id="contentHolder"
                                                                verticalGap="8"
                                                                verticalScrollPolicy="off">
                                                          <mx:Label text="{data}"
                                                                      height="25"/>
                                                     </mx:VBox>
                                                </mx:HBox>
                                           </mx:Component>
                                      </mx:itemRenderer>
                                 </mx:TileList>
                            </mx:Application>
                            
                             
                            

                            • 11. Re: Dynamic item renderer
                              iamfuric Level 2

                              Good, small correction :

                              You should adjust the myTileList height ONLY if current contentHolder has MAX items count

                              • 12. Re: Dynamic item renderer
                                archemedia Level 4

                                The suggestion works but it alters the rowHeigth property of the tileList, so ALL the rows are affected.

                                 

                                I tried this:

                                 

                                //outerDocument.myTileList.rowHeight=h + l.height; //>> this alters all the rows
                                contentHolder.height=contentHolder.height + l.height + 8;
                                height=height + l.height + 8;
                                parent.height = height;

                                 

                                the parent of the inline renderer holds a reference to the actual row of the tileList. Changing the heigth of this row doesn't do anything however.

                                • 13. Re: Dynamic item renderer
                                  iamfuric Level 2

                                  variableRowHeightproperty

                                  A flag that indicates whether the individual rows can have different height. This property is ignored by TileList and HorizontalList. If

                                  true, individual rows can have different height values.

                                  1 person found this helpful
                                  • 14. Re: Dynamic item renderer
                                    archemedia Level 4

                                    Alex, the setStyle method only works for style properties like backgroundColor and fontWeight. It doesn't work for normal properties like height and width.

                                     

                                    d

                                    • 15. Re: Dynamic item renderer
                                      archemedia Level 4

                                      Now we're getting somewhere!

                                      Off course, the variableRowHeight prop is ignored by the TileList. I'll try using another list component.

                                      • 16. Re: Dynamic item renderer
                                        archemedia Level 4

                                        Solved!

                                         

                                         

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                                            layout="vertical">
                                             <mx:List id="myList"
                                                             variableRowHeight="true"
                                                             height="100%"
                                                             width="400">
                                                  <mx:Array>
                                                       <mx:String>Item one</mx:String>
                                                       <mx:String>Item two</mx:String>
                                                       <mx:String>Item three</mx:String>
                                                  </mx:Array>
                                                  <mx:itemRenderer>
                                                       <mx:Component>
                                                            <mx:HBox width="100%">
                                                                 <mx:Script>
                                                                      <![CDATA[
                                                                           import mx.controls.Label;

                                         


                                                                           private function addItem():void
                                                                           {
                                                                                var l:Label=new Label();
                                                                                l.text="New item!";
                                                                                l.height=25;
                                                                                contentHolder.addChild(l);
                                                                           }
                                                                      ]]>
                                                                 </mx:Script>
                                                                 <mx:Button label="add item to item renderer"
                                                                              click="addItem()"/>
                                                                 <mx:VBox id="contentHolder"
                                                                            verticalGap="8"
                                                                            verticalScrollPolicy="off">
                                                                      <mx:Label text="{data}"
                                                                                  height="25"/>
                                                                 </mx:VBox>
                                                            </mx:HBox>
                                                       </mx:Component>
                                                  </mx:itemRenderer>
                                             </mx:List>
                                        </mx:Application>