Styling Cells in AdvacedDataGrid

[sedolan82]

I am using the following code to stylize the cell text depending on what the text is, what I want to be able to do is change the background color of the cell if the text contained in that cell == 'xxxxxx', is this possible? Am I on the right track? if not any help is appreciated.

Thanks in advance,
-Sean

            public function myColStyleFuncPRI(data:Object,col:AdvancedDataGridColumn):Object
            {
                if(data["PRIMUS"] == 'Ready')
                    return {color:0x0fff03};
               
                if(data["PRIMUS"] == 'Sent')
                    return {color:0x044e00};
                   
                if(data["PRIMUS"] == 'Not In WH')
                    return {color:0xff0000};
               
                if(data["PRIMUS"] == 'p/u by andrews')
                    return {color:0x0000ff};
                   
                return null;
            }

and this is the result:

and the image below is that I want to do:

[nikos101]

easy try something like this in your renderer:

  <mx:valueCommit>
                          <![CDATA[
                          if(text.search(new RegExp(/.*\..*\./)) != -1 || text == ''){
                          setStyle('backgroundColor',0xff8b7c);
                          }
                          else{
                          setStyle('backgroundColor',0xffffff);
                          }
                          ]]>
                          </mx:valueCommit>

                         <mx:change>

                         <![CDATA[

                         if(text.search(new RegExp(/.*\..*\./)) != -1 || text == ''){

                      setStyle('backgroundColor',0xff8b7c);

                         this.data.isModifiedClientSide = 0;                         this.data.depositRequestedAmount = text;                         }                         else{                       setStyle('backgroundColor',0xffffff);                         this.data.depositRequestedAmount = text;                         this.data.isModifiedClientSide = 1;                         }                         ]]>                         </mx:change>

[sedolan82]

So is this just a copy what you have and paste it in my code type of deal or can you explain exactly how to use this code? because I'm not that fluent in Flex/Flash Builder yet..

Thanks,

-Sean

[sedolan82]

I tried using this code, but for some reason (maybe th elack of flex coding knowledge) I cannot get it to work.

-Sean

[nikos101]

try calling

   setStyle('backgroundColor',0xff8b7c);

in a custom itemrenderer

[sedolan82]

how would I create a custom itemrenderer?

<< remember noob =/

thanks,

-Sean

[nikos101]

http://www.switchonthecode.com/tutorials/flex-using-item-renderers

[Guest]

Hi,

This is the best reference I could find

http://butterfliesandbugs.wordpress.com/2007/07/11/using-an-itemrenderer-to-change-the-background-of-a-datagrid-cell/

To create an item renderer, go through

http://help.adobe.com/en_US/flashbuilder/using/WSbde04e3d3e6474c4-ff135ec1256a38088a-8000.html

For our case you will have to create an item renderer for a particular column. To use the item renderer, the code is-:

<mx:AdvancedDataGridColumn headerText="Column 1" dataField="name" itemRenderer="customColumnRenderer" />

customColumnRenderer.mxml will look like this.

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  xmlns:mx="library://ns.adobe.com/flex/mx"
                                  focusEnabled="true"
                                  contentBackgroundColor="0xFFFF00">
<fx:Script>
    <![CDATA[
        import mx.controls.AdvancedDataGrid;
        import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var g:Graphics = graphics;
            g.clear();
            var grid1:AdvancedDataGrid = AdvancedDataGrid(AdvancedDataGridListData(listData).owner);
            if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data))
                return;
            if(lblData.text.charAt(0)=='F')
            {
                g.beginFill(0xCC0033);
                g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                g.endFill();
            }
        }
    ]]>
</fx:Script>
    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>

Hope this helps

Nishad