Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 742
  • Last Modified:

Flex Datagrid Cell at runtime?

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
myBlueSky
Asked:
myBlueSky
  • 2
  • 2
2 Solutions
 
andreMarianoCommented:
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
 
myBlueSkyAuthor Commented:
Thanks andreMariano.

Can we have working example.

Your prompt response is highly appreciated.
0
 
andreMarianoCommented:
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
 
myBlueSkyAuthor Commented:
Thanks andreMariano for great help.
0

Featured Post

Industry Leaders: 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!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now