6 Replies Latest reply on Apr 17, 2015 2:35 AM by kalin_imeran_arxondes

    Removing Flex Hero DataGrid Header




      I'm a bit lost as to how to remove the header of the Spark DataGrid in Flex Hero. I just wanted to have a 2-column DataGrid, with no headers on either of the columns. I came across this link that discusses the <s:GridItemRenderer> objects, but my attempts to remove the header have pretty much failed.




      Sample Code

      <s:DataGrid id="dg" left="375" right="50" top="200" bottom="50">



      <s:GridColumn dataField="Item" width="400">



      <s:GridItemRenderer height="0">

      <s:Label text=""/>





      <s:GridColumn dataField="Description" />






      Alternatively, I have also looked at creating a new skin for the ColumnHeaderBar. Again, I'm not sure if this is the right approach as well. Is there a better/proper/correct approach to solving this? The old mx component has a better workaround for this by simply setting the height of the DataGrid's header to 0. But, that hasn't been brought over to the Spark component for Mobile Applications. Any help would be much appreciated!






        • 1. Re: Removing Flex Hero DataGrid Header
          Flex harUI Adobe Employee

          I would remove the ColumnHeaderGroup from the skin.

          If that doesn't work, set its height to 0, or visible=false and


          1 person found this helpful
          • 2. Re: Removing Flex Hero DataGrid Header
            _RAD Level 1

            Thanks for the response Flex harUI.


            Based on what I tried previously and from what you mentioned, I was able to solve the issue. Here's the jist of what I did:



            DataGrid Definition (in Main MXML Document)

            <s:DataGrid id="dg" left="380" right="50" top="126" bottom="102" skinClass="skins.dgSkin">




            Then, I created a new MXML Skin for the DataGrid component, using the Host Component "spark.components.DataGrid". Here is the main change I made to the default skin:



            <?xml version="1.0" encoding="utf-8"?>













            <s:HGroup paddingLeft="1" gap="0">

            <s:ColumnHeaderBar id="columnHeaderBar" skinClass="spark.skins.spark.ColumnHeaderBarSkin" width="100%" height="0"/>





            I did also try to set the "alpha" property of the ColumnHeaderBar to 0, but that did not give me the desired result.


            Hopefully this will help other people who might have the same issue I was confronted with.


            Thanks Again!



            • 3. Re: Removing Flex Hero DataGrid Header
              Lampei Level 1


              Thanks for posting how you solved this!  Been trying to figure this out for the last hour and (usually) no one posts how they got it working.

              • 4. Re: Removing Flex Hero DataGrid Header
                Peter Demling

                FYI - this fix is now outdated, as columnHeaderBar was a class in the beta release that was removed from the final version.  After struggling a bit with this, here's an updated fix:




                (where dg is your Spark DataGrid instance; you could also subclass DataGrid and perform this in the initialize handler).


                BTW, I'm sure there is much goodness to be had from the clear seperation of form/function in the design of the Spark components (especially if you're part of a large team where Photoshop design is needed and is someone else' s job); but in my 4+ years of experience with Flex, this is just another example of where Spark needlessly gets in the way.  There should have been more care taken to providing an efficient development experience for those of us who don't need to custom skin all day, and would have prefered not to have all of these useful form-controlling properties whisked away in the change from Fx3 to Fx4.



                • 5. Re: Removing Flex Hero DataGrid Header

                  Thanks for the reply it helped me a lot.


                  The columnHeaderGroup has also a "visible" property but this does not solve only hides it leaving its space.


                  Best regards...

                  • 6. Re: Removing Flex Hero DataGrid Header

                    I'm not sure whether Gh(ºº)sT will read this after four years, and if so, whether he didn't hear in the meantime, but, anyway :-) :


                    The visible property alone is not enough to sweep away a component. You also need to set includeInLayout = false. These two go together when you want something to disappear. Each one of them does only what it says. The one makes the item invisible (but retains the space it occupies), and the other does not include the item in the overall size / positioning calculations (but you can still see it, provided that it is declared after the others, so it is at the top of them).