5 Replies Latest reply on Feb 11, 2012 3:56 AM by Mike_Dobs

    Questions about Spark DataGrid (Header Font Styles, Header Gradient)

    BillFranklin1969

      Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.

      1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.

      2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios.  Not sure where to set them now.

       

      I think that is it for now.  From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.

       

       

      Thanks in advance!

       

       

      Bill

        • 1. Re: Questions about Spark DataGrid (Header Font Styles, Header Gradient)
          kevinklin Adobe Employee

          Hi Bill,

           

          If you just want to set the font style, you can do it using CSS:

           

          <fx:Style>
              @namespace s "library://ns.adobe.com/flex/spark";
              @namespace mx "library://ns.adobe.com/flex/mx";
              
              s|DefaultGridHeaderRenderer
              {
                  fontStyle: italic;
              }
          </fx:Style>
          

           

          If you want to change the general look and feel of the header renderer, you can try setting chromeColor style on the DataGrid. However, if you want to do something more specific, you will have to make a custom header renderer (I would start with a copy of the default one and tweak the graphics inside). If you do this, you can also change the font style directly on the label part in the renderer as well. Hope this helps.

           

          -Kevin

          1 person found this helpful
          • 2. Re: Questions about Spark DataGrid (Header Font Styles, Header Gradient)
            BillFranklin1969 Level 1

            Thanks for the reply.  I am never sure what is going to work and what isn't when it comes to CSS styles and flex....having become gun-shy at trying to set them after trying to deal with the mx datagrid in Flex 4.

             

            This worked to set my header font color

             

                <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    @namespace mx "library://ns.adobe.com/flex/mx";
                    
                    s|DefaultGridHeaderRenderer
                    {
                        color: white;
                    }
                </fx:Style>
            

             

             

            Does anyone have any examples of a custom spark GridHeaderRenderer creating a two-color gradient on the header of the Spark DataGrid?

            • 3. Re: Questions about Spark DataGrid (Header Font Styles, Header Gradient)
              BillFranklin1969 Level 1

              I think I found what I needed.  I found a copy of the Default Header renderer, and replaced the SolidColor with a LinearGradient on the background fill...since I already had a custom DataGrid skin, I replaced the DefaultGridHeaderRenderer with mine...and moved the font color into mine, replacing the Style call.

               

              If I didn't have a Custom DataGrid skin already, where would I have placed my renderer?

              • 4. Re: Questions about Spark DataGrid (Header Font Styles, Header Gradient)
                kevinklin Adobe Employee

                You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                xmlns:s="library://ns.adobe.com/flex/spark" 
                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                xmlns:skins="spark.skins.spark.*">
                    
                    <fx:Declarations>
                        
                        <!-- See DataGridSkin for other possible parts -->     
                        <fx:Component id="headerRenderer">
                            <s:CustomGridHeaderRenderer />
                        </fx:Component>
                        
                    </fx:Declarations>
                    
                </skins:DataGridSkin>
                

                 

                -Kevin

                • 5. Re: Questions about Spark DataGrid (Header Font Styles, Header Gradient)
                  Mike_Dobs Level 1

                  Cannot add embed font this way, or even by directly setting it to the labelDisplay component.

                   

                  Any one has any ideas?