Datagrid Item color

Greetings...
I'm looking to dynamically change the color of a datagrid
line item based on a data condition in my data provider behind the
datagrid. If I have a record that has an 'ErrCode' > 0, I want
that only item to have a background color of red. Is this porrible?
Thanks!
-Rich

Check this out:
http://www.cflex.net/showFileDetails.cfm?ObjectID=487&Object=File&ChannelID=1
I have problems running it, but I think it is becaus I do not
have the latest Flash Player.
I also don't see where I can get the source.
Tracy

Similar Messages

Datagrid Item renderer Help

Hi all,
I need a help/suggestion in a datagrid item renderer. In a datagrid, for one particular cell (particular column of a row) i need to change the background color depending upon the condition.The color for particular cell not for the entire row or entire column, how can i achieve this ?
Thanks in advance.
Heman

Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

The 'selected items' color randomly changes and I can't figure out why.

Hi everybody, I recently upgraded to Firefox 13, which appears to be the most stable browser version so far and I really like it. I have loved Firefox very much, having used it since somewhere between versions 2 and 3.
After upgrading to version 13 I noticed something that annoys me quite a bit. This may have been present before but I can't remember and I did not notice until now.
On my computer (Windows 7 x64 Ultimate) I have set the color of the 'selected items' (specifically text) to be lime green text on a slightly off black background. I chose this color scheme because it blends very well with Firefox itself (I have the NASA night launch theme), Windows Explorer, and many web pages that I have changed to a dark theme (using the Stylish browser extension). This color scheme has excellent contrast in areas with black text on a light background, as well as light text on a dark background. It has served me well.
After upgrading to Firefox 13 I have noticed that if the web page is dark with light text, the 'selected items' color changes to lime green text on a light grey background. (Less frequently, it changes instead to off-black text on a lime green background). I have not been able to isolate the threshold where this change occurs (meaning how dark the website background needs to be /how light the text needs to be for this to happen) nor have I found a solution.
This problem sometimes extends even to sites that have dark text on a light background: when tabs are switched, with no input fields clicked and the address bar is not clicked. This very page (Firefox support) is apparently vulnerable as well.
This problem only happens on rendered web pages. Firefox's menus, buttons and toolbars, as well as all other programs and Windows itself, are unaffected.
I want the 'selected items' to remain as I have set it, and not deviate regardless of the apparent contrast or color scheme of the web page being displayed.
[Edit #1]: Interestingly, as I was copying the information from about:support I noticed that it is affected as well.
Any suggestions? Thanks so much, and I am sorry for the long-winded description. tl;dr look at the pictures.
[http://i.imgur.com/vmLZ6.png selected items]
[http://i.imgur.com/d8xsa.png example1]
[http://i.imgur.com/2OE9J.png example2]
[http://i.imgur.com/1lhvb.png example3]
[http://i.imgur.com/UWOOp.png example4]

It is always best to avoid making changes to the selected text colors.<br />
Firefox uses an algorithm to check if the contrast is sufficient and will swap text and background colors if that test fails.<br />
*http://mxr.mozilla.org/mozilla-central/source/layout/generic/nsTextFrameThebes.cpp#3349
*http://forums.mozillazine.org/viewtopic.php?f=38&t=1331845

DataGrid Item Renderer loading duplicates after scroll

HI,
I have a report that loads into a datagrid, these reports are
about thumbnail images that are on a server.
I have a datagrid item renderer that loads the thumb nails.
When the grid first loads the first set of rows that are visible
display the correct images. But after I scroll the new rows have
images that are repeated and not the correct ones.
?xml version="1.0" encoding="utf-8"?>
<HBox xmlns="
http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
creationComplete="{init()}">
<Script>
<![CDATA[
import mx.controls.Image;
[Bindable]
[Embed(source="/images/folderBlack.png")]
private var folderIcon:Class;
private function suffix(url:String):String {
var i:Number;
if ((i = url.lastIndexOf(".")) > -1) {
url = url.substr(i+1);
return url;
private function init():void {
var fileSuffix:String = new String;
fileSuffix = '';
fileSuffix = suffix(data.filename);
var staticPortalImage:String = new String;
staticPortalImage = '/PULLIMAGE.php?type=small&id=' +
data.FileID +
'&path=' + data.filename +
'&server=MTI3LjAuMC4x&siteurl=L0F1dGhNb2R1bGU=';
var thumbNailImage:Image = new Image();
thumbNailImage.height = 80;
switch(fileSuffix){
case 'jpg':
thumbNailImage.source = staticPortalImage;
break;
imageContainer.addChild(thumbNailImage);
texttest.text = fileSuffix;
]]>
</Script>
<Text id="texttest" />
<HBox id="imageContainer" height="80" />
</HBox>

Thanks
Great article I ended up getting rid of the creationcomplete
changing my init():void too override public function set data(
value:Object ) : void
and adding
super.data = value;
I was able then to clean up my code considerably.
Once again Thanks
Dean

How to set background ChoiceBox item color to ChoiceBox with css?

How to set background ChoiceBox item color to ChoiceBox with css?
I need to change items list backgound color.
I tried with following code, but it doesnt helps:
.choice-box .context-menu {
-fx-backgound-color: red;
.choice-box .menu-item{
-fx-background-color: red;

In Java 8, either of your selectors should work.
In Java 7 (JavaFX 2.2), you need the following workaround:
#choice-box-menu-item {
-fx-background-color: red ;

Change item color

Hi all i want to change items color.......i want that when user enters the data the color of that specific item is change and when they move to next item that color is change and so on........on which type this trigger is made.......if at mouse click then it is too difficult to write code on all items
any sujjestion
thanks in advance

Not every item has a post-text trigger. You can store the last item and unset the colour in when-new-item:
if not(id_null(pk.last_item)) then
set_item_instance_property(pk.last_item,pk.last_row,visual_attribute,pk.last_va);
end if;
pk.last_item := find_item(:system.cursor_item);
pk.last_row := :system.cursor_record;
pk.last_va := get_item_instance_property(pk.last_item,pk.last_row,visual_attribute);
set_item_instance_property(pk.last_item,pk.last_row,visual_attribute,'va_current_item');(pk is a package spec)
Lists are always a problem because the when-new-item doesn't fire when the item is first selected. I once tried to use a FocusListener in a pjc for setting list colours, but even at that level they're a PITA.
Message was edited by:
James Healy
Just had a thought...this solution will screw up if the block is cleared and you do set_item_instance_property for a row which no longer exists.
Also, you can remove a row which has been given a specific VA for the current item (eg to indicate a value < 0) and inadvertently apply that VA to the item in the next row in the block. Maybe a pjc solution is the only viable General Solution?

Changing item color

Hi,
i am trying to change an item color.
if item have one displaying record this code is working
:txt_item:= '30'
THEN
SET_ITEM_PROPERTY('txt_item',FOREGROUND_COLOR,'r0g0b0')
if displaying record number is two or three or more record it doesnt work. when i run code result is in the below image
http://img181.imageshack.us/img181/5158/denemevw8.jpg
thanks
Edited by: user1059019 on 24.Ağu.2008 02:28

To set the colour of a single cell in a multi-record block you need to use set_item_instance_property.
http://www.oracle.com/webapps/online-help/forms/10g/topics/f1_help/builts/setitminst.html?tp=true
This doesn't allow changes to the foreground_color so you'll need to create a new visual attribute with the required forground colour and then set the visual_attribute property of the record's item.

Datagrid Item Renderer not displaying correct data

I have a datagrid that displays information from a web service, which is refreshed every 60 seconds.
When the status is no 0 for a line a corresponding color is used to fill in the background. I created a Item Renderer to fill in the background color.
When the table is initially created, the colors are correct. After the data is refreshed, then the background color value is carried over to the next row.
The Spark DataGrid works better than the MX AdvancedDateGrid or DataGrid. This was working in Flex 3, but I used an function which replaced the DataGridColumn that doesn't work in Flex 4.
protected function init(event:FlexEvent):void
                var showBackground:Boolean = false;
                var backgroundColor:uint = new uint();
                var labelTextColor:uint = new uint();
                var dgListData:DataGridListData = listData as DataGridListData;
                var dataGrid:DataGrid = dgListData.owner as DataGrid;
                // comment this out if you want to see the background over the
                // selection and highlight indicators
                if (dataGrid.isItemSelected(data) || dataGrid.isItemHighlighted(data))
                    // clear the background so you can see the selection/highlight colors
                    showBackground = false;
                    return;
                switch(data["MessageLevel"])
                    case 0:
                        showBackground = false;
                        backgroundColor = 0xFFFFFF;
                        labelTextColor = 0x000000;
                        break;
                    case 1:
                        showBackground = true;
                        backgroundColor = 0x00FF00; // light green
                        labelTextColor = 0x000000;
                        break;
                    case 2:
                        showBackground = true;
                        backgroundColor = 0x015F00; // dark green
                        labelTextColor = 0xFFFFFF;
                        break;
                    case 3:
                        showBackground = true;
                        backgroundColor = 0xFDFF00; // yellow
                        labelTextColor = 0x000000;
                        break;
                    case 4:
                        showBackground = true;
                        backgroundColor = 0x7F6E3F; // tan
                        labelTextColor = 0xFFFFFF;
                        break;
                    case 5:
                        showBackground = true;
                        backgroundColor = 0xFF8A00; // orange;
                        labelTextColor = 0x000000;
                        break;
                    case 6:
                        showBackground = true;
                        backgroundColor = 0xFFDFE0; // rose
                        labelTextColor = 0x000000;
                        break;
                    case 7:
                        showBackground = true;
                        backgroundColor = 0xFF0000; //red
                        labelTextColor = 0xFFFFFF;
                        break;
                if(showBackground) {
                    var bgFill:SolidColor = new SolidColor();
                    bgFill.color = backgroundColor;
                    dataContainer.setStyle("backgroundColor",backgroundColor);
                    lblData.setStyle("color", labelTextColor);

I added an "else" statement to make sure that a color was always added, even if the level was 0. I also added a backgroundAlpha style to both, to turn the value off or on.
So far, this seems to be the solution.
if(showBackground) {
var bgFill:SolidColor = new SolidColor();
bgFill.color = backgroundColor;
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",1);
} else {
dataContainer.setStyle("backgroundColor",backgroundColor);
labelDisplay.setStyle("color", labelTextColor);
dataContainer.setStyle("backgroundAlpha",0);

Datagrid item renderer numberstepper tabIndex

I have a datagrid with a item renderer in it that contains a
numberStepper. There are two columns that have number steppers in
them. If I hit tab when I am in the first number stepper I want it
to tab to the second one. I have tried setting a tabIndex and I
can't get it to tab? Any thoughts?

Here is my Scenario, in my datagrid the second column of the first row (987.93) background color depends upon some condtion. The remaning rows of column B depends upon the column C . If "the column C is OK" it will be green , "NOT OK" red. But the first row's second column color depends upon some other condition. How can i achieve this ?

Spark datagrid item editor font see through

I am using a default item editor on a spark datagrid.
When the user attempts to edit the field the old value shows through.
How do I get rid of this?
I am using out of the box stuff? Is this a listed bug?
Code is...
<s:GridColumn dataField="Actual" headerText="Actual" width="75" editable="true">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:DefaultGridItemRenderer textAlign="right"   background="true" backgroundColor="#FFFFFF" alpha="1.0" color="#000000" />
                        </fx:Component>
                    </s:itemRenderer>
    </s:GridColumn>
Thanks
Dan Pride

Try <s:DefaultGridItemEditor if you are wanting to make it editable.
here is an example of combobox, but it is similiar ....
<s:itemEditor>
<fx:Component>
<s:ComboBoxGridItemEditor >
<s:dataProvider>
<s:ArrayList>
<fx:String>Edit</fx:String>
<fx:String>Read</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBoxGridItemEditor>
</fx:Component>
</s:itemEditor>
Don

Maybe Flex SDK bug: Setting visible of DataGrid item renderers

Hi all, I'm still a noob at flex but this looks a bit strange to me.
I've been trying to hide a button renderer in a DataGrid but it just wouldn't hide. I've been setting visible inside the mxml and also in the the class that extends buttonbut it just wouldn't hide. I then overloaded the visible property set/get and traced what was setting the property to true and found that inside DataGridBase.as the function setupColumnItemRenderer always sets visible of the renderes to true.
DataGridBase.as
protected function setupColumnItemRenderer(c:DataGridColumn, contentHolder:ListBaseContentHolder,
                    rowNum:int, colNum:int, data:Object, uid:String):IListItemRenderer
        var listItems:Array = contentHolder.listItems;
        var item:IListItemRenderer;
        var rowData:DataGridListData;
        item = listItems[rowNum][colNum];
        if (!item || itemToUID(item.data) != uid
            || columnMap[item.name] != c)
            item = createColumnItemRenderer(c, false, data);
            if (item == null)
                return null;
            if (item.parent != contentHolder)
                contentHolder.addChild(DisplayObject(item));
            // a space is used if no data so text widgets get some default size
            columnMap[item.name] = c;
            if (listItems[rowNum][colNum])
                addToFreeItemRenderers(listItems[rowNum][colNum]);
            listItems[rowNum][colNum] = item;
        //[Matt] moved from inside the block above to outside because
        //the item definitely exists at this point, and always needs
        //its data refreshed
        rowData = DataGridListData(makeListData(data, uid, rowNum, c.colNum, c));
        rowMap[item.name] = rowData;
        if (item is IDropInListItemRenderer)
            IDropInListItemRenderer(item).listData = data ? rowData : null;
        item.data = data;
        item.visible = true;
        if (uid && colNum == 0)
            contentHolder.visibleData[uid] = item;
        return item;
Why does it do this? Shouldn't it respect the visible property already set for the renderer in mxml and not force it to true on init?

Renderers use the visible property for recycling. Invisible renderers are not supported. The hit detection logic would find it the cell it belongs to even if it was invisible. You can set alpha=0, but it won't stop the hit detection logic.
Why are you trying to hide a renderer?
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Datagrid item renderer destroys on mouse over

Hi,
     I used Flex 3.5 datagrid. I used item renderes in my datagrid. and i set 'rendererIsEditor = true'.
     Everything is very smooth and good. But somtimes my datagrid acting badly. When i put cursor on itemRenderer, It open-up for
editing. When i move mouse, item renderer destroyed.
     Once it happens it is the default behaviour of my datagrid. No editing can be performed.
      But i can not reproduce it always. sometimes it a happens.
      please help me. anybody know about this?

Simplify your test case. Try using a simple TextInput as the renderer and
see if you have the same problem.

Datagrid item renderer delete button

I have a datagrid with an item renderer. In the item renderer
is a delete button img. Onclick it will remove the item from the
datagrid with the exception of the first item. I am using outer
document to call my function but when I do I get an error that says
Attempt access of inaccessible method deleteContact through a
reference with static type myTitleWindowContact?
private function deleteContact(event:Event,data:*):void{
if (contactData.selectedIndex >= 1) {
caseVO.acCont.removeItemAt(contactData.selectedIndex);
<mx:DataGrid dataProvider="{model.currentVO.acCont}"
id="contactData"
width="651"
height="117"
click="showForm()" >
<mx:columns>
<mx:DataGridColumn editable="false" width="5">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" height="15"
horizontalAlign="center" verticalAlign="middle">
<mx:Button
icon="@Embed(source='/com/serg/reportingTool/assets/images/delete.png')"
click="outerDocument.deleteContact(event,data)"
label="D"
toolTip="Delete"
width="15"
height="15"
/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

That fixed that issue Thanks so much! One other question
though. Is it possible to have my delete button appear on all items
in the datagrid except for the first item??

Checkbox DataGrid Item Render Issue

I have a DataGrid component that has a column with a checkbox
item render. The code at the end of this post is identical to the
code at the bottom of the tutorial on this page:
Tutorial
The creation complete method calls a PHP function using the
AMFPHP framework. The PHP function returns an array of MySQL rows.
When I created the application initially, I was using the HTTP
Service component that would return the data as an XML list and
then Flex would bring it in as an Array Collection. The only thing
I changed was how the records were getting returned to Flex, which
is using AMFPHP. Now the item render does not function properly. If
the first record returned had a value of "true" then all the
subsequent rows would have their check boxes checked. If it were
"false" then the subsequent rows would have their check boxes
unchecked. Why is it doing this? It worked the way it was suppose
to before.
Also I have a label component nested in the itemRenderer to
see if it matches the data in the MySQL database; which it does
match. Here is a screenshot of what exactly I am seeing:
Screenshot

Maybe the values being returned must be cast to Boolean
now?

Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null

I am currently using the 4.12.0 SDK. I have a Spark DataGrid setup that makes use of an externally-defined itemRenderer:
<s:DataGrid id="dgEquipment"
            width="100%" height="100%"
            doubleClickEnabled="true"
            creationComplete="init()" doubleClick="popTab(event)">
<s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="renderers.equipment.IconRenderer"
                    dataField="EXISTING"
                    width="22"/>
The data provider is set programmatically after a remote call has returned a result.
I have the renderer setup as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    dataChange="init()" remove="dispose()">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
    <![CDATA[
      import mx.controls.Menu;
      import mx.events.MenuEvent;
      import spark.components.DataGrid;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 1.png")]
      private var ico1:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 2.png")]
      private var ico2:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 3.png")]
      private var ico3:Class;
      private var isExisting:Boolean;
      private var popUp:Menu;
      private function init():void
        if (data)
          isExisting = data.EXISTING == 1;
      private function dispose():void
        if (popUp)
          popUp.removeEventListener(MenuEvent.ITEM_CLICK, popUp_click);
          popUp = null;
        if (imgActions)
          imgActions.removeEventListener(MouseEvent.CLICK, image_click);
          imgActions = null;
      override public function prepare(hasBeenRecycled:Boolean):void
        if (data)
          if ((data.TYPE == "A" || data.TYPE == "B") && !data.X && !data.Y)
            disableLink();
            imgActions.source = ico3;
            imgActions.toolTip = "Blah blah.";
          else if (data.TYPE == "C" || data.TYPE == "D")
            disableLink();
          else if (isExisting)
            imgActions.source = ico1; //******************************            imgActions.toolTip = "More blah blah.";
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
          else
            imgActions.source = ico2;
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
            imgActions.toolTip = "Even more blah blah.";
            initPopUp();
      private function initPopUp():void
      private function popUp_click(event:MenuEvent):void
      private function image_click(event:MouseEvent):void
      private function disableLink():void
    ]]>
</fx:Script>
<s:Image id="imgActions"
           height="18" width="18"/>
</s:GridItemRenderer>
When the code reaches the line where I have added a comment full of asterisks, I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:81 ]
    at spark.components.gridClasses::GridViewLayout/initializeItemRenderer()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1808]
    at spark.components.gridClasses::GridViewLayout/createTypicalItemRenderer()[/Users/justinmcl ean/Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/ GridViewLayout.as:1243]
    at spark.components.gridClasses::GridViewLayout/updateTypicalCellSizes()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1374]
    at spark.components.gridClasses::GridViewLayout/measure()[/Users/justinmclean/Documents/Apac heFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/GridViewLayout.as: 875]
    at spark.components.supportClasses::GroupBase/measure()[/Users/justinmclean/Documents/Apache Flex4.12.0/frameworks/projects/spark/src/spark/components/supportClasses/GroupBase.as:1156 ]
    at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[/Users/justinmclean/Documents/ApacheFlex4.12.0/frameworks/projects/framework/src/mx/cor e/UIComponent.as:9038]
    at mx.core::UIComponent/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/framew orks/projects/framework/src/mx/core/UIComponent.as:8962]
    at spark.components::Group/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/fra meworks/projects/spark/src/spark/components/Group.as:1074]
    at mx.managers::LayoutManager/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/ frameworks/projects/framework/src/mx/managers/LayoutManager.as:673]
    at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFl ex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:824]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ ApacheFlex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
Running the debugger shows that this occurs with the first item in the data provider. If I alter the prepare method to check for the existence of imgActions before doing anything, everything works fine after the first item. So I'll have one row in the DataGrid with a missing icon, and all the rest will have icons.
So the question is, is it normal for prepare to run before any children of the item renderer are created? If so, how should I handle this?
Many thanks in advance.

A little more info. I added some event handlers to the renderer and the image (for events that I thought would be relevant), and here is the order of events based on trace statements within the handlers:
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
griditemrenderer1_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_addedToStageHandler
imgActions_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_initializeHandler
griditemrenderer1_elementAddHandler
imgActions_addHandler
griditemrenderer1_initializeHandler
griditemrenderer1_addHandler
prepare called
imgActions_resizeHandler
griditemrenderer1_resizeHandler
imgActions_creationCompleteHandler
imgActions_updateCompleteHandler
griditemrenderer1_creationCompleteHandler
griditemrenderer1_updateCompleteHandler
griditemrenderer1_removeHandler
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
imgActions_addedToStageHandler
griditemrenderer1_addHandler
griditemrenderer1_dataChangeHandlerTypeError: Error #1009: Cannot access a property or method of a null object reference.
prepare called
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:91 ]
imgActions_renderHandler
griditemrenderer1_renderHandler

Datagrid Item color

Similar Messages

Maybe you are looking for