• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Styling Cells in AdvacedDataGrid

New Here ,
May 29, 2010 May 29, 2010

Copy link to clipboard

Copied

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:

so_far_01.png
and the image below is that I want to do:
what_I_want.png

Views

873

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 04, 2010 Jun 04, 2010

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 05, 2010 Jun 05, 2010

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 05, 2010 Jun 05, 2010

Copy link to clipboard

Copied

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

-Sean

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 07, 2010 Jun 07, 2010

Copy link to clipboard

Copied

try calling

   setStyle('backgroundColor',0xff8b7c);

in a custom itemrenderer

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jun 07, 2010 Jun 07, 2010

Copy link to clipboard

Copied

how would I create a custom itemrenderer?

<< remember noob =/

thanks,

-Sean

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Jun 07, 2010 Jun 07, 2010

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Jun 10, 2010 Jun 10, 2010

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines