3 Replies Latest reply on Apr 18, 2007 8:45 PM by theLoggerGuy

    Style a tree branch selectively

    theLoggerGuy
      Hello,

      I have an XML structure as follows:
      [Bindable]
      private var tempDataSource: XML = <root label="root">
      <element label="apple" current="false">
      <sub label="one"/>
      <sub label="two"/>
      </element>
      <element label="pear" current="true">
      <sub label="alpha"/>
      <sub label="beta"/>
      </element>
      </root>;

      I link the data to a tree as follows:
      <mx:Tree dataProvider="{tempDataSource}" showRoot="false" labelField="@label"/>

      I would like to programatically change the style of the tree branch item pear to bold say using the attribute current==true condition, but I don't know how to apply a style to a single element in a tree. Apologies if this is a no-brainer, but the answer eludes me.
        • 1. Re: Style a tree branch selectively
          theLoggerGuy Level 1
          I guess this question is a bit more difficult that I first thought. I still haven't figured it out and would really appreciate some guru advice!!
          • 2. Re: Style a tree branch selectively
            jlingwai Level 1
            i would create a custom item renderer by extending TreeItemRenderer that way you could change styles on a element bases.
            • 3. Re: Style a tree branch selectively
              theLoggerGuy Level 1
              jlingwai, you're a champ. Indeed a custom renderer was the answer I needed. My solution, following on from my previous posting, ends up like this...

              Create a custom renderer based on TreeItemRenderer like so:

              // filename: customRenderers\MyTreeItemRenderer.as
              package customRenderers
              {
              import mx.controls.treeClasses.*;
              import mx.collections.*;

              public class MyTreeItemRenderer extends TreeItemRenderer
              {
              // Define the constructor.
              public function MyTreeItemRenderer( )
              {
              super( );
              }

              // Override the updateDisplayList() method to set the text for each tree node.
              override protected function updateDisplayList( unscaledWidth: Number, unscaledHeight: Number ): void
              {
              super.updateDisplayList( unscaledWidth, unscaledHeight );

              if ( super.data )
              {
              var state: XMLList = new XMLList( TreeListData( super.listData ).item );

              if ( "true" == state[ 0 ].@current )
              {
              super.label.text = TreeListData( super.listData ).label + " (current)";

              setStyle( "color", "blue" );
              setStyle( "fontWeight", 'bold' );
              }
              }
              }
              }
              }


              Then just assign the renderer to the Tree component and Robert's your father's brother.

              <mx:Tree dataProvider="{tempDataSource}" showRoot="false" labelField="@label" itemRenderer="customRenderers.MyTreeItemRenderer"/>

              So enjoy the moment as I am.