Solved

Flex Datagrid Cell at runtime?

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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
SWFObject in temporary internet files - constant file transfer from web server 3 406
YouTube Link 10 368
Embedded Video Download (Flash) 3 1,179
Adobe Flex - Combobox - Disable Editing 15 835
I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

679 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