The following example shows how you can set the roll over color and selection color in a DataGrid control in Flex by setting the rollOverColor and selectionColor styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/17/setting-the-roll-over-color-and-selection-color-in-a-flex-datagrid-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object c1="Item 1A" c2="Item 1B" />
        <mx:Object c1="Item 2A" c2="Item 2B" />
        <mx:Object c1="Item 3A" c2="Item 3B" />
        <mx:Object c1="Item 4A" c2="Item 4B" />
        <mx:Object c1="Item 5A" c2="Item 5B" />
        <mx:Object c1="Item 6A" c2="Item 6B" />
        <mx:Object c1="Item 7A" c2="Item 7B" />
        <mx:Object c1="Item 8A" c2="Item 8B" />
        <mx:Object c1="Item 9A" c2="Item 9B" />
    </mx:Array>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arr}"
            rollOverColor="haloSilver"
            selectionColor="haloOrange"
            themeColor="black"
            width="300"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="c1"
                    headerText="Column 1:" />
            <mx:DataGridColumn dataField="c2"
                    headerText="Column 2:" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Setting the roll over color and selection color in a Flex DataGrid control

  1. Thanks for this example…..It is simple which is useful for begineer like me ….

  2. Milkman says:

    tnx for the good work…
    i have a question..
    how do i cancel the selection color but keep the event..?
    i’m using custom styles for the rollover but i cant seem to get rid of the selection color..

    thanks in advanced :)

  3. Milkman says:

    i meant the RollOver color and not the selection color…

  4. Peter deHaan says:

    Milkman,

    There is a useRollOver style for the List-based components. For more information, see “Disabling item roll over highlighting in the Flex DataGrid control”.

    Peter

  5. Bennett says:

    What if I want to disable the header rollover? Is that possible while still maintaining sort functionality?

  6. Alpana says:

    I set “color” of each cell in datagrid based on condition. ie based on a condition the text in the cell is either red or blue.
    But for a highlighted row (either on selection or rollover) , the color of text is lost.
    I have noticed that this is the case when selectionMode=”singleRow”. When selectionMode=”singleCell”, and the cell is highlighted, the color of text is not lost. Please let me know if someone has solution to this problem.

    Thanks in advance

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree