7 Replies Latest reply on Sep 12, 2006 2:11 PM by Josh Johnson

    Customizing Custom Renderer Based on Selection State

    Josh Johnson Level 1
      I have a DataGrid which utilizes a custom renderer on one of the data columns to display an image and label text based on the content of a data item. In addition to this customization of the cell, I'd like to further set the display color of the label item in the custom renderer, such that it's one color for items in a selected row, and a different color if the row is not selected. Could someone share some insight on how this might be accomplished?
        • 1. Re: Customizing Custom Renderer Based on Selection State
          peterent Level 2
          If you cell renderer implements the IDropInListItemRenderer interface (some do, some do not, but all can - just follow the instructions in the documentation), then you can easily get to the dataGrid owner of the itemRenderer:

          var grid:DataGrid = listData.owner as DataGrid;
          if( grid.isItemSelected(data) ) { change color } else { change color }
          • 2. Re: Customizing Custom Renderer Based on Selection State
            Josh Johnson Level 1
            Peter, can you be a little more specific about the documentation you're refering to. I've found a section called "Creating drop-in item renderers and item editors", which says "You can define your own components for use as drop-in item renderers or drop-in item editors." but then doesn't say anything about how.

            In my instance, I'm replacing the standard cell text with an HBox containing both an image and a label, where I specifically want to change the color of the label text on selection.
            • 3. Re: Customizing Custom Renderer Based on Selection State
              peterent Level 2
              First, I assume that you wanted to do more than the DataGrid's styles offered (eg, text-selected-color vs color). When you want to use your own itemRenderer you usually make your decisions based on the data for the row (which is the data property in the renderer). Sometimes you might need to know more about the context by looking at the DataGrid itself. That information is available through the listData.

              Look at the documentation for IDropInListItemRenderer. It will tell you that you need to make a setter and getter for listData, just like data. For example:

              private var _listData:Object;
              public function set listData( o:Object ) : void { _listData = o; }
              public function get listData() : Object { return _listData; }

              When you need to get access to the DataGrid, use var gdata:DataGridListData = listData as DataGridListData;
              then gdata.owner is the DataGrid, gdata.row and gdata.column tell you which row, column you are operating on.

              I might be giving you too much information since I don't know the criteria for your color change.
              • 4. Re: Customizing Custom Renderer Based on Selection State
                Josh Johnson Level 1
                So the criteria for the color change is the selection of the row. i.e. I want the text to be black in column cells that are unselected, but for the cell that's selected I want the text in this cell to be yellow. In addition, I want the image in the cell to be driven by the data in the row (1 of 6 choices), but I want to have an alternate image(6 more alternate sources) to be used when the row is selected.
                • 5. Re: Customizing Custom Renderer Based on Selection State
                  peterent Level 2
                  Your itemRenderer as 2 states: selected and unselected (which means you might consider using <mx:states> in your itemRenderer to help with this).

                  Using the listData.owner you can tell if the itemRenderer instance is selected or not. You should do this in the updateDisplayList method. Here I'm assuming the text being displayed is <mx:Label id="label"> and you also have an image as <mx:Image id="img" >

                  var gd:DataGridListData = listData as DataGridListData;
                  if( DataGrid(gd.owner).isItemSelected( data ) ) // data is the data property aka the item of the row
                  { // selected state
                  label.setStyle( "color", 0xFFFF00 );
                  // determine which image to show
                  img.source="that image for selected state";
                  }
                  else
                  { // not selected
                  label.setStyle("color",0x000000);
                  // determine which image to show
                  img.source = "that image for unselected state";
                  }
                  • 6. Re: Customizing Custom Renderer Based on Selection State
                    Josh Johnson Level 1
                    OK, I just about got it, but I have one problem left, which is the listData item you talked about. Where/How is that defined?

                    I pulled out the image change logic to simplify, and have the following:

                    import mx.controls.dataGridClasses.DataGridListData;
                    import mx.controls.DataGrid;

                    override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                    var gd:DataGridListData = listData as DataGridListData;
                    if( DataGrid(gd.owner).isItemSelected( data ) ) {
                    // selected state
                    lbl.setStyle( "color", 0xFF0000 );
                    }else{
                    // not selected
                    lbl.setStyle("color",0x000000);
                    }
                    }

                    This is ok, except I get an error saying:
                    1120: Access of undefined property listData on the line that defines the gd variable.

                    Obviously, listData hasn't been defined anywhere, but I'm not sure what it's supposed to be. :-/
                    • 7. Re: Customizing Custom Renderer Based on Selection State
                      Josh Johnson Level 1
                      Doh, ignore. I just noted your previous post, and put 1+1 together.