9 Replies Latest reply on Jul 25, 2011 11:06 AM by kevinklin

    How to change header font style in Spark DataGrid?

    dudeinside

      I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.

       

      Thanks,

      - Artur

        • 1. Re: How to change header font style in Spark DataGrid?
          rstanvir

          gridColumn.headerRenderer = new ClassFactory(myGridItemRenderer);

           

           

          -------myGridItemRenderer----------

           

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

          minWidth="25">

           

           

          ///// do whatever you want with your style

           

          </s:GridItemRenderer>

          • 2. Re: How to change header font style in Spark DataGrid?
            dudeinside Level 1

            Is there any way to do that without creating a new HeaderRenderer?

            Setting styles properties or something?

             

            I want to change the styles of the default HeaderRenderer without creating a new class.

            • 3. Re: How to change header font style in Spark DataGrid?
              rstanvir Level 1

              somedays ago i needed to change header font style of s:datagrid.

              the r&d that i took said me: no other way .

              if you find something let me know.

               

              tanvir

               

              btw. mark reply as answer if it answers the question

              1 person found this helpful
              • 4. Re: How to change header font style in Spark DataGrid?
                dudeinside Level 1

                Thanks

                I will share it if I found a other way.

                 

                - Artur

                • 5. Re: How to change header font style in Spark DataGrid?
                  dudeinside Level 1

                  OK, I figured out that it is possible to change the defaults HeaderRenderer color, font-size, font-style (besides the font 'Tahoma') using css like this:

                   

                  s|DefaultGridHeaderRenderer
                  {
                      color: #ff0000;
                      font-family: Arial,Verdana,Tahoma;
                      font-size: 20;
                      font-style: italic;
                      font-weight: normal;
                  }

                   

                  But I can't change the font-weight to 'normal'. It has no effect.

                  Spark is really great, but sometimes it couse more work to solve simple things as they were possible with MX.

                  For me it is rather a step back.

                   

                  - Artur

                  • 6. Re: How to change header font style in Spark DataGrid?
                    kevinklin Adobe Employee

                    Hi,

                     

                    Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.

                     

                    First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <skins:DefaultGridHeaderRenderer 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.*"
                                                     xmlns:comps="comps.*">
                                    
                        <fx:Declarations>
                            
                            <!-- Remove fontweight="bold" and other styles as you wish
                                 Must be a component and not a factory. -->
                            <s:Label id="labelDisplay" 
                                     verticalCenter="1" left="0" right="0" top="0" bottom="0"
                                     textAlign="start"
                                     verticalAlign="middle"
                                     maxDisplayedLines="1"
                                     showTruncationTip="true" />
                        </fx:Declarations>
                        
                    </skins:DefaultGridHeaderRenderer>
                    

                     

                    Next, create a simple DataGrid skin by creating a subclass of the  spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer  component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):

                     

                    <?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.*"
                                    xmlns:comps="comps.*">
                        
                        <fx:Declarations>
                            
                            <!-- Must be a factory with the right id for the skin part -->
                            <fx:Component id="headerRenderer">
                                <comps:CustomHeaderRenderer />
                            </fx:Component>
                            
                        </fx:Declarations>
                        
                    </skins:DataGridSkin>
                    

                     

                    Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):

                     

                    <s:DataGrid skinClass="comps.CustomDataGridSkin">
                        ....
                    

                     

                     

                    I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.

                     

                    -Kevin

                    • 7. Re: How to change header font style in Spark DataGrid?
                      dudeinside Level 1

                      That's a great example. Thank you very much for your help, Kevin!

                       

                      -Artur

                      • 8. Re: How to change header font style in Spark DataGrid?
                        zgenc Level 1

                        I did all but I cant manage changing the font family of datagrid header. Whatever I do, i can only change the color and size but not fontfamily. Any idea?

                        • 9. Re: How to change header font style in Spark DataGrid?
                          kevinklin Adobe Employee

                          If you create a custom renderer (like my example above) you should be able to use the fontFamily style on the Label.