Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Flex Datagrid Cell at runtime?

Posted on 2010-08-12
4
Medium Priority
?
736 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 4

Assisted Solution

by:andreMariano
andreMariano earned 2000 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
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 how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

705 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