Creating a variable row height item renderer on a ComboBox control in Flex

10 Responses to Creating a variable row height item renderer on a ComboBox control in Flex

1. euni says:

   October 26, 2008 at 11:33 pm

   Thanks for many examples.

   i hava a item renderer problem on DataGridColumn.
   There are comboboxes on DataGridColumn and users can choose a column item.
   But when grid is scrolled all DataGridColumns are initialized.
   In my opinion, Flex draw all grid again when scrolled.

   plz tell me the solution.

   Reply
2. Srinivas Kusunam says:

   May 26, 2009 at 10:52 am

   Thanks for sharing this trick infact many tricks :)

   Reply
3. lily says:

   July 15, 2009 at 5:15 am

   but when the content is “gy” ,it does’t work. How to solve it?

   Reply
4. Scott Delamater says:

   January 12, 2010 at 1:28 pm

   If you’re trying to do this same thing without using an inline itemRenderer (e.g., just using the default ListItemRenderer, or a a custom renderer that extends that class), you also need to set the wordWrap property of the dropdown box to true:

   private function comboBox_open(evt:DropdownEvent):void 
   {
        evt.currentTarget.dropdown.wordWrap = true;
        evt.currentTarget.dropdown.variableRowHeight = true;
   }

   Reply
5. Steve says:

   March 23, 2010 at 2:46 pm

   This was very helpful. Thanks.
   Is there anyway to adjust the height of the dropdown when it opens, other than the rowCount? I have two answers in one of my dropdown; the first is short and the second is long. The comboBox then sets the rowCount to 2 and determines the height of the dropdown by multiplying the rowCount by the height of the first row. This forces the user to scroll to see the entire second item.
   Thanks,
   Steve

   Reply
   • Peter deHaan says:

     March 23, 2010 at 3:04 pm

     @Steve,

     Try setting the dropdown height in the open handler:

     <mx:Script>
         <![CDATA[
             import mx.events.DropdownEvent;
      
             private function comboBox_open(evt:DropdownEvent):void {
                 ComboBox(evt.currentTarget).dropdown.variableRowHeight = true;
                 ComboBox(evt.currentTarget).dropdown.height = 50;
             }
         ]]>
     </mx:Script>

     Because the open event is dispatched after the ComboBox is opened, you may want to set the ComboBox control’s openDuration style to 1ms so the resize isn’t as noticeable.

     Peter

     Reply
   • Vijay Anand Mareddy says:

     December 8, 2010 at 7:03 am

     Scott,
     This works for me.

     private var internalDropdownFactory:ClassFactory =
     new ClassFactory(SeparatorList);
     ——————————————————————————-

     public class SeparatorList extends List {

     public function SeparatorList() {
     super();
     itemRenderer = new ClassFactory(SeparatorListItemRenderer);
     showDataTips = true;
     }

     /**
     * @private
     * Determines if the itemrenderer is a separator. If so, return null to prevent separators
     * from highlighting and emitting menu-level events.
     */
     override protected function mouseEventToItemRenderer(event:MouseEvent):IListItemRenderer {
     var row:IListItemRenderer = super.mouseEventToItemRenderer(event);

     if (row && row.data && row.data.hasOwnProperty(‘separator’) && row.data.separator){
     return null;
     } else {
     return row;
     }
     }

     /**
     * Override measuredHeight to maximum possible stageHeightAvailable.
     *
     **/
     override protected function measure():void {
     super.measure();
     if(!stage || !owner is ComboBox || !dataProvider) return;

     var pt:Point = stage.globalToLocal(owner.localToGlobal(new Point(0, 0)));
     var stageHeightAvailable:Number = Math.max(pt.y,screen.height – pt.y) – (2*rowHeight);
     var calcHeightByItems:Number = measureHeightOfItems()+rowHeight;

     measuredHeight = Math.min(stageHeightAvailable,calcHeightByItems);

     // trace(‘*****height:’+height);
     // trace(‘*****y:’+y);
     // trace(‘*****pt.y:’+pt.y);
     // trace(‘*****screen.y:’+screen.y);
     // trace(‘*****screen.height:’+screen.height);
     // trace(‘*****screen.height-pt.y:’+(screen.height – pt.y));
     // trace(‘*****rowHeight:’+rowHeight);
     // trace(‘*****calcHeightByItems:’+calcHeightByItems);
     // trace(‘*****stageHeightAvailable:’+stageHeightAvailable);
     // trace(‘*****measuredHeight:’+measuredHeight);

     }//measure

     }//SeparatorList

     Reply
6. Steve says:

   March 23, 2010 at 4:05 pm

   @Peter

   That really helped. Two other things I would like to do:
   1. adjust the dropdown height depending on the height of the rows available. (e.g. if I have 2 rows, 1 height=20 and 1 height=60, set to 80, etc.)
   2. adjust the label area height depending on the height of the selected row.

   Steve

   Reply
7. Steve says:

   March 23, 2010 at 4:06 pm

   addition to #2:
   And display all the lines of multi-line selections in the label area.

   Steve

   Reply
8. Pratik says:

   December 2, 2010 at 2:47 am

   Thanks for tips :)

   Reply