2 Replies Latest reply on Aug 13, 2009 5:06 AM by Zolotoj

    Custom tree node



      I need to create a custom tree.


      Is it posible in flex tree, to have a node, that is a panel component, with a few other components, like textinput or buttons?

      Clicking on buttons causes adding or removing new nodes in appropriate place in the tree.


      What in fact I need to create, is advanced filter builder (originaly created in GWT), shown here: http://www.smartclient.com/smartgwt/showcase/#featured_filter_builder_grid


      The structure of that filter looks like 'very' custom tree


      Do you have any idea how to do that, or where can I find any hints or solutions?

        • 1. Re: Custom tree node
          Virat Patel Level 2




          As you need custom tree node like containing button,textfield or image.


          Yes it is possible using 'itemRenderer' in tree control you can do the same.


          itemRenderer in tree is basicaaly 'TreeItemRenderer'.


          So by extending it you can customize the node.



          With Regards

          Virat Patel

          • 2. Re: Custom tree node
            Zolotoj Level 3

            Here is my tree renderer:

                 import mx.controls.listClasses.IDropInListItemRenderer;
                 import mx.controls.treeClasses.*;
                 public class treeRendererFilter extends TreeItemRenderer
                      private var customerFilterSet:Boolean = false;
                      public function treeRendererFilter()
                      override public function set data(value:Object):void 
                            super.data = value;
                              if (value.@name == "Customer Reporting" && !customerFilterSet)
                                   var filter:customerReportingFilter = new customerReportingFilter();
                                filter.data = value;
                                   filter.height = 25;
                                   filter.width = 280;  
                                   customerFilterSet = true;                                                     
                         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
                          super.updateDisplayList(unscaledWidth, unscaledHeight);
                           if (data.@name == "Customer Reporting")
                                label.width -= getChildAt(1).width;
                                getChildAt(1).x = label.x + label.width;
                                getChildAt(1).visible = true;
                                if (customerFilterSet)
                                     getChildAt(1).visible = false;

            <?xml version="1.0" encoding="utf-8"?>
            <mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
                 direction="horizontal" fontSize="10">
                      override public function set data(value:Object):void
                           if(value != null)
                                exclude.data = value;
                                comments.data = value;
                      override public function get data():Object
                           return data;
                 <mx:HBox width="100%" color="blue">          
                      <mx:CheckBox id="exclude" label="Excluding Skus"/>
                      <mx:CheckBox id="comments" label="Customer Comments"/>