7 Replies Latest reply on Jun 10, 2010 1:52 AM by nishadmusthafa

    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:

       

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

        • 1. Re: Styling Cells in AdvacedDataGrid
          nikos101 Level 2

          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>
          • 2. Re: Styling Cells in AdvacedDataGrid
            sedolan82 Level 1

            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

            • 3. Re: Styling Cells in AdvacedDataGrid
              sedolan82 Level 1

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

               

              -Sean

              • 4. Re: Styling Cells in AdvacedDataGrid
                nikos101 Level 2

                try calling

                 

                   setStyle('backgroundColor',0xff8b7c);

                 

                in a custom itemrenderer

                • 5. Re: Styling Cells in AdvacedDataGrid
                  sedolan82 Level 1

                  how would I create a custom itemrenderer?

                  << remember noob =/

                   

                  thanks,

                  -Sean

                  • 7. Re: Styling Cells in AdvacedDataGrid
                    nishadmusthafa Level 2

                    Hi,

                     

                    This is the best reference I could find

                     

                    http://butterfliesandbugs.wordpress.com/2007/07/11/using-an-itemrenderer-to-change-the-bac kground-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