gridColumn.headerRenderer = new ClassFactory(myGridItemRenderer);
<?xml version="1.0" encoding="utf-8"?>
///// do whatever you want with your style
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.
1 person found this helpful
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.
btw. mark reply as answer if it answers the question
I will share it if I found a other way.
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:
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.
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.
That's a great example. Thank you very much for your help, Kevin!
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?
If you create a custom renderer (like my example above) you should be able to use the fontFamily style on the Label.