1 Reply Latest reply on Aug 4, 2007 6:23 AM by peterent

    Datagrid Renderer

    Fred in Orlando
      I'm using flex 3.0 Beta. I have a datagrid renderer working, but cannot figure out how to make it display a blank cell if the value is 100. I'm displaying percents and most are 100%, the user only cares about the ones that are less than 100%. I don't want to clutter a 30 column grid with lots of "100" plus I need a wider column for 3 digits.

      I've googled and searched the forum. Lots of stuff but nothing like what I need. Changing this.text to "" changes the value, so the renderer screws up the color coding.

      My code is below

      public class BackgroundColorRenderer extends DataGridItemRenderer{
      private var GoodThreshold:int =100;
      var FairThreshold:int = 95;
      var PoorThreshold:int = 1;
      var GoodColor:int = 0x00FF33;
      var FairColor:int = 0xFFFF33;
      var PoorColor:int = 0xFF6666;
      var NoValueColor:int = 0xFFFFFF;
      public function BackgroundColorRenderer() {
      super();
      }

      /**
      * DataGridItemRenderer extends TextField and has a slightly different
      * validation mechanism than UIComponent-based widgets. All visuals
      * are resolved within the validateNow call. We apply the background
      * here
      */


      override public function validateNow():void {
      super.validateNow();

      if (!listData) {
      // item renderers are recycled so you have to make sure
      // that all code paths lead to a known state.
      background = false;
      return;
      }

      var percent:int = parseInt(this.text);
      trace("render = <" + percent+">");
      background = false;
      if ( percent>=GoodThreshold){
      background = true;
      //if () this.text="";
      this.setVisible(percent==100);
      this.text = data.toString();
      trace("good"+percent);
      backgroundColor = GoodColor;
      return
      }
      if ( percent>=FairThreshold){
      background = true;
      trace("good"+percent);
      backgroundColor = FairColor;
      return
      }
      if ( percent>=PoorThreshold){
      background = true;
      trace("good"+percent);
      backgroundColor = PoorColor;
      return
      }
      background=false;
      }

      }
      }
        • 1. Re: Datagrid Renderer
          peterent Level 2
          Hi, you're making it too complex. Here's something that displays a blank when the value of field "percent" is 100 and the value when it is not. There are other ways to do this, too. This is an in-line item renderer.

          <mx:Component>
          <mx:Label text="{percentValue}">
          <mx:Script><![CDATA[
          [Bindable] private var percentValue:String;
          override public function set data( value:Object ) : void
          {
          super.data = value; // VERY IMPORTANT YOU DO THIS RIGHT AWAY
          percentValue = "";
          if( value && value.percent < 100 ) percentValue = value.percent;
          }
          ]]></mx:Script>
          </mx:Label>
          </mx:Component>

          By overriding the set data function you intercept the value coming into the item renderer and use it to set the value of the bindable variable.

          If you want to set colors, override updateDisplayList NOT validateNow.