Solved

Flex Datagrid Cell at runtime?

Posted on 2010-08-12
4
726 Views
Last Modified: 2013-11-11
Hi,

How can we change the background color for particular cell in flex datagrid at runtime based on condition and the data in the datagrid and how can we create a tooltip to the cell that has error as an example.

Thanks,
0
Comment
Question by:myBlueSky
  • 2
  • 2
4 Comments
 
LVL 4

Assisted Solution

by:andreMariano
andreMariano earned 500 total points
ID: 33430614
Create your own itemRenderer... this renderer that I'm showing works like this:
var factory:ClassFactory = new ClassFactory(CustomColorRenderer );
  factory.properties = {customColorFunction: getCustomColor , toolTipFunction: myToolTipFunction };
yourGrid.itemRenderer = factory;
 private function getColumnColor(data: Object): String {
              if (data.VALUE > data.OTHERVALUE) {
                   return "red";
             }
      
             return null;
  }

private function myToolTipFunction (data: Object): String {
              if (data.VALUE > data.OTHERVALUE) {
                   return "HELLO";
             }
      
             return "WORD";
  }
import flash.events.MouseEvent;
	
	import mx.controls.Label;
	
	public class CustomColorRenderer extends Label {
			
		[Bindable] public var customColorFunction: Function;
		[Bindable] public var toolTipFunction: Function;
		
		public function CustomColorRenderer() {
		}

		override public function set data(value:Object):void {
			var changed: Boolean = (data != value);
			super.data = value;
			
			if (!changed) {
				return;
			}
			
			//default color 
			clearStyle("backgroundColor");
			
			//if there is any function, you set it
			if (value != null && customColorFunction!= null) {
				var newColor:String = customColorFunction.call(this, value);
				
				if (newColor) {
					setStyle("backgroundColor", newColor);
				}	
			}
			if(value != null && toolTipFunction != null){
				toolTip = toolTipFunction.call(this,value);
			}
		}
		
	}

Open in new window

0
 
LVL 1

Author Comment

by:myBlueSky
ID: 33435758
Thanks andreMariano.

Can we have working example.

Your prompt response is highly appreciated.
0
 
LVL 4

Accepted Solution

by:
andreMariano earned 500 total points
ID: 33436746
there it is... I had to create a custom Label because I can't acess some properties of the Label itself...
like background and background color

//Application.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{onCreationComplete()}">
	<mx:Script>
		<![CDATA[
			private function onCreationComplete():void{
				var factory:ClassFactory = new ClassFactory(CustomColorRenderer ); 
				factory.properties = {customColorFunction: getColumnColor , toolTipFunction: myToolTipFunction };
				phoneColumn.itemRenderer = factory;
			}
			
			private function getColumnColor(data: Object): uint {
              if (data.active == "true") {
                   return 0xFF0000;
             }
       
             return 0xFF00FF;
		  }
		
		private function myToolTipFunction (data: Object): String {
                   return data.name;
		  }
		]]>
	</mx:Script>
	
	<mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" id="phoneColumn" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>
        
    </mx:Panel>
</mx:Application>

//CustomColorRenderer.as
package
{
	import mx.controls.Text;
	
	public class CustomColorRenderer extends CustomLabel {
			
		[Bindable] public var customColorFunction: Function;
		[Bindable] public var toolTipFunction: Function;
		
		public function CustomColorRenderer() {
			
		}

		override public function set data(value:Object):void {
			var changed: Boolean = (data != value);
			super.data = value;
			
			if (!changed) {
				return;
			}
			
			
			
			//if there is any function, you set it
			if (value != null && customColorFunction!= null) {
				var newColor:uint = customColorFunction.call(this, value);
				textField.background = true;
				if (newColor) {
					textField.backgroundColor = newColor;
				}	
			}
			if(value != null && toolTipFunction != null){
				toolTip = toolTipFunction.call(this,value);
			}
		}
		
	}
}

//CustomLabel.as

package {
 import mx.controls.Label;

  public class CustomLabel extends Label {
    public function CustomLabel() {
      super()
    }

    public function getTextField():* {
      return textField
    }
  }
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:myBlueSky
ID: 33500708
Thanks andreMariano for great help.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

775 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question