1 Reply Latest reply on Feb 3, 2012 3:10 PM by bre_an

    Customized Header for Spark DataGrid

    bre_an

      Hi,

       

      I created my own spark DataGrid-Skin and changed the header so that I have my own HeaderRenderer:

       

      <fx:Component id="headerRenderer">
          <s:DefaultGridHeaderRenderer>
               <s:Group height="100%" width="100%" id="grp">
                  <s:Rect left="0" right="0" top="0" width="100%" height="18" >
                      <s:fill>
                          <s:BitmapFill fillMode="repeat" 
                               source="{TitleCenter}" />
                      </s:fill>
                  </s:Rect>
                  <s:BitmapImage left="0" top="0" height="18"
                                 source="{TitleLeft}" />
                  <s:BitmapImage right="0" top="0" height="18"
                                 source="{TitleRight}" />
                 </s:Group>
          </s:DefaultGridHeaderRenderer>
      </fx:Component>
      

       

      which works fine - every column has the TitleLeft image left, TitleRight on the right and the TitleCenter is repeating the middle.

      But I just want to have the image "TitleLeft" on the left side of the first column and the "TitleRight" on the right of the last column.

       

      Anyone here an idea how to change this?

       

      P.S.: It would be awesome if someone can send me some more detailed information on how to skin datagrids (for example how to modify the GridColumnHeaderGroup): a (video) tutorial, a blog entry... I have found some stuff, but it only shows what is possible, not how to do it, is to sketchy or it is just the pure class references (so i have to search, test and read code, a tutorial would make stuff much more simple for me, hacking something around with GridColumnHeaderGroup to get this working just feels wrong ;-) ).

       

      Andreas

        • 1. Re: Customized Header for Spark DataGrid
          bre_an Level 1

          ok, I think I got it:

          First I created a file called GridHeaderRenderer in my skin-folder (a copy of flex_sdk/frameworks/projects/wireframe/src/spark/skins/wireframe/DefaultGridHeaderRendere r.mxml) where I deleted the background and the shadow at the end of the file (~ line 220)

          So The column backgrounds are invisible.

          Than I added this file to my DataGrid-Skin and changed my images behind the Header and I got the result I wanted:

          <s:SparkSkin 
              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:fb="http://ns.adobe.com/flashbuilder/2009"
              xmlns:skin="leijuna.skin.*"
              minWidth="89" minHeight="84">
          

          ...

          <fx:Component id="headerRenderer">
              <skin:GridHeaderRenderer height="18" />
          </fx:Component>
          

          ...

          <s:Group width="100%" >
           <s:Group width="100%" id="grp" height="{columnHeaderGroup.height}">
              <s:Rect left="5" right="5" top="0" width="100%" height="18" >
                  <s:fill>
                      <s:BitmapFill fillMode="repeat" 
                           source="{TitleCenter}" />
                  </s:fill>
              </s:Rect>
             </s:Group>
              <s:BitmapImage left="0" top="0" height="{columnHeaderGroup.height}"
                             source="{TitleLeft}" />
              <s:BitmapImage right="0" top="0" height="{columnHeaderGroup.height}"
                             source="{TitleRight}" />
              <s:GridColumnHeaderGroup id="columnHeaderGroup"
                  height="18" width="100%"
                  headerRenderer="{headerRenderer}">
              </s:GridColumnHeaderGroup>
          </s:Group>