6 Replies Latest reply on Feb 21, 2012 8:18 AM by tinylion_uk

    Change the Selected TEXT Color of Spark DataGrid Row

    vdiaz761098 Level 1

      Hello,

      Does anyone know of a way to change the text color of the selected row in a Spark DataGrid? I'm able to change the rollover color, etc, but can't seem to find a way to change the text color.

      Let's say the default color is black for all rows. I want to make the selected row's text color, say, red. Any ideas through Skinning or CSS?

      Thanks,

      Victor

        • 1. Re: Change the Selected TEXT Color of Spark DataGrid Row
          tinylion_uk Level 2

          I would look at the item renderer and put in a check to see if the row is selected then change the colour there.

           

           

           

          Only the item renderer deals with the text of a datagrid as far as I know anyway

           

           

           

          Cheers

           

           

           

          Ps – I could easily be totally wrong

          • 2. Re: Change the Selected TEXT Color of Spark DataGrid Row
            vdiaz761098 Level 1

            Hello Glenn,

             

            Thanks for the quick response. What if there is no ItemRenderer and it's only using the what ever the default is. Currently you can change the selected row color through CSS or Skinning.

             

            Thanks,

             

            -Vic

            • 3. Re: Change the Selected TEXT Color of Spark DataGrid Row
              tinylion_uk Level 2

              I think you would need to create a custom item Renderer.

               

               

               

              If you are using FlashBuilder, just ask it to make a default one for you and take a look at the code.

               

               

               

              I wil put some code here but it will all be guesses as I cant check my answer just now. So what I write may be incorrect. I will look again for you alter

               

               

               

              PLEASE NOTE. THIS MAY BE WRONG. I HAVE JUST TRIED TO REMEMBER OF TOP OF MY HEAD!

               

               

               

              <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"

               

              clipAndEnableScrolling="true"

               

               

                               

               

                              <fx:Script>

               

                                              <![CDATA[

                                                                                              override public function discard(willBeRecycled:Boolean):void

               

                                                              {

               

                                                                              super.discard(willBeRecycled);

               

                                                              }

                                                                                              override public function prepare(hasBeenRecycled:Boolean):void

               

                                                              {

               

                                                                              if(data && selected)

               

                                                                              {

                                                                                              lblData.setStyle("color",0xffff00);                                                                                

              //check for the 'format' function

                                                                                              if( column.labelFunction != null )                                                                               

              {

                                                                                              lblData.text = column.labelFunction( data, column );

                                                                                              }                                                                               

              else                                                                               

              {

                                                                                              lblData.text = data[column.dataField];

                                                                                              }                                                                               

              }

               

                                                                              super.prepare(hasBeenRecycled);

               

                                                              }

               

               

               

                                              ]]>

               

                              </fx:Script>

               

                               

               

                              <s:Label id="lblData" />

               

                               

               

              </s:GridItemRenderer

              • 4. Re: Change the Selected TEXT Color of Spark DataGrid Row
                vdiaz761098 Level 1

                Sweet man! Just some minor tweaks. Thanks for the help...

                 

                override public function prepare(hasBeenRecycled:Boolean):void

                {

                               if(selected)

                                              lblData.setStyle("color",0xffff00);

                               else

                                              lblData.setStyle("color",0x000000);

                 

                          if(data)

                          {

                       //check for the 'format' function

                                         if(column.labelFunction != null )                                                                               

                                         {

                                                        lblData.text = column.labelFunction( data, column );

                                         }                                                                                

                                         else                                                                                

                                         {

                                                        lblData.text = data[column.dataField];

                                         }                                                                                

                          }

                 

                          super.prepare(hasBeenRecycled);

                }

                • 5. Re: Change the Selected TEXT Color of Spark DataGrid Row
                  vdiaz761098 Level 1

                  That solved my other question here:

                  http://forums.adobe.com/message/4219975#4219975

                   

                  Simply add verticalCenter="0" to the label in the item renderer...

                   

                  <s:Label id="lblData" top="9" left="7" verticalCenter="0"/>

                  • 6. Re: Change the Selected TEXT Color of Spark DataGrid Row
                    tinylion_uk Level 2

                    J glad it worked.

                     

                    I wasn’t sure I was remembering it correct.

                     

                     

                     

                    All good.

                     

                     

                     

                    Have a good  day mate

                     

                     

                     

                    glenn