2 Replies Latest reply on Jun 14, 2012 1:50 PM by tinylion_uk

    Setting font style on hover for spark datagrid

    EricJ32 Level 1

      I'm trying to skin a Spark datagrid. I have most things sorted by creating a custom skin, but one thing I can't find is how to set the colour of the row's font on hover. I can set the background colour fine, but how would I go about changing the font colour when a user hovers over the row?

       

      Thanks

        • 1. Re: Setting font style on hover for spark datagrid
          Flex harUI Adobe Employee

          Maybe color.hover=”#ff0000”

          • 2. Re: Setting font style on hover for spark datagrid
            tinylion_uk Level 2

            Hi

             

             

             

            You don’t actually deal with the text that’s displayed in the a datagrid inside of the skin

             

             

             

            Look at item renderers for the grid columns. You can style your text or whatever else you would like to display in the grid, in the renderer

             

             

             

            Hope that helps a little

             

             

             

            If you are still stuck just let me know and I’ll send you some code

             

             

             

            Cheers

             

            g

             

             

             

            heres some code

             

             

             

            NOTE: I am making this up as I sit here so I may be forgetting something. Don’t be surprised if this doesn’t work, but the basic idea is right I think

             

             

             

             

             

            So in the spark datagrid when you set your column (if you use mxml) this will replace a glob renderer so you can have a different one for each column if you wish.

             

                                                                    

             

            <s:GridColumn dataField="Status"

             

            headerText="name"

             

            width="37"                                                    

             

            itemRenderer="fooRenderer"

             

            />

             

             

             

            Or set a gloabel renderer in the grid def itself

             

             

             

            <s:DataGrid itemRenderer=”fooRenderer” />

             

             

             

            Then write a custom renderer: fooRenderer.mxml

             

             

             

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

             

                                 clipAndEnableScrolling="true"

             

                                 >

             

                    

             

                   <fx:Script>

             

                          <![CDATA[

             

                                 override public function discard(willBeRecycled:Boolean):void

             

                                 {

             

                                       labelData.text="";

             

                                       super.discard(willBeRecycled);

             

                                 }

             

                                  

             

                                 override public function prepare(hasBeenRecycled:Boolean):void

             

                                 {

             

                                        

             

                                       if(data)

             

                                       {

             

                                               // set the colour of the text label to black

             

                                              labelData.setStyle("color",0x000000)

             

             

             

                                              // put some logic here to dynamic style the label

             

             

             

             

             

                                       //check for the 'format' function on the column  (THIS MAY BE WRONG)

             

                                       if( column.labelFunction != null )

             

                                       {

             

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

             

                                       }

             

                                       else

             

                                       {

             

                                              labelData.text = data[column.dataField];

             

                                       }     

             

                                  

             

            }

             

             

             

                                 super.prepare(hasBeenRecycled);

             

                                 }

             

                          ]]>

             

                   </fx:Script>

             

                    

             

                   <s:Label id="labelData" />

             

                    

             

            </s:GridItemRenderer