2 Replies Latest reply on Nov 4, 2011 4:50 AM by molbin

    Create custom scrollbar for Spark Datagrid


      I had a custom scroll bar for a MX datagrid.  But recently I got the new Flash Builder 4.5 and it said to use the Spark Datagrid component instead.  So I changed everything to Spark, but now I can't find any info on customizing the scroll bar.  Is this possible?  Should I go back to mx?


      According to the documentation in Flash Builder:


      "The Spark DataGrid control provides the following features:


      - Custom skins to control all aspects of the appearance of the DataGrid control"


      So I'm hoping it's possible but I can't find any info either way.

        • 1. Re: Create custom scrollbar for Spark Datagrid
          Jason Szeto Level 3

          Spark DataGrid has a Scroller inside of its DataGridSkin that controls the appearance and behavior of the scrolling functionality. By default, Scroller uses the ScrollerSkin skin class. Start by looking at spark.skins.spark.ScrollerSkin. If you want the Scroller inside of your DataGrid to have a different appearance, assign it a different skinClass.


          s|DataGrid s|Scroller


               skinClass : ClassReference("myScrollerSkinClass")


          2 people found this helpful
          • 2. Re: Create custom scrollbar for Spark Datagrid
            molbin Level 1

            Thanks.  I'm not sure exactly how I did it, but I started with this document in Flash Builder Help:


            "Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4"


            I copied the code and changed "s|List" to "s|Datagrid", modified it accordingly for a vertical scroll bar, and I deleted references to "base color" so that it would compile.   Then, I copied in VScrollBarTrackSkin.mxml and VScrollBarThumbSkin.mxml from the Flash Builder directory: Adobe Flash Builder 4.5\sdks\4.5.1\samples\themes\zen\src\zen\skins.  And I removed the references to the swf files so that it would compile.  Then I embedded my own png images, e.g.: source.up="@Embed(source='/images/thumb.png')". And I got a scrollbar!


            Only problem is the example does not have up and down controls.  But I figured this out from looking at the zen skins (VScrollBarSkin / HScrollBarSkin) and copying in the code for the up and down buttons as well.  Now it's working pretty good.


            [I did not use any of the Flash Builder wizards/GUI to create the skins or files.  I just created the files individually (as in File - New - File).  Perhaps there's a better way to do it, but this worked for me.]


            I'm not sure why you suggested looking at "ScrollerSkin".  This didn't lead me anywhere, though perhaps I was not clear in my question.  But I greatly appreciate your answer, for saying that this is possible, otherwise I would have given up!