Solved

Flex Datagrid Cell at runtime?

Posted on 2010-08-12
4
730 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 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Microsoft WSUS 4 116
Open Source MP4 Flash Player 2 204
YouTube video issue 28 143
Script to Delete registry entry based on Product name 6 187
First things first - Preparation We need all the part for this install and it's much nicer to have them all on hand when you need them so here's what's required. Download Eclipse 3.5 32 bit (I like the Classic flavour) from here. (http://www.e…
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 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.

738 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