Outlining the selected row in a Spark DataGrid

In this example, I am setting a red outline/stroke around the selected row in a DataGrid. At first, I thought I would need a custom itemRenderer. However, I discovered that the UI for how the DataGrid looks in its hovered, selected, disabled and normal states are determined by the DataGrid skin. Therefore, to get this selected row outlined, I created a custom DataGrid skin using the Flash Builder templates. In the  DataGrid skin, I just added the following to the selectionIndicator component:

<s:SolidColorStroke color=”0xC00000″ weight=”3″ />

Run the example: DataGridStrokedSelectionExample.swf
Sample Code: DataGridStrokedSelectionExample.mxml, StrokedSelectedItemSkin.mxml

3 responses

  1. Patrick Vienneau | Reply

    Hi, I’ve tried defining my cusom outline around selected row, but the Blue outline (as seen in your other article titled ‘Adding an icon to the header for a Spark DataGrid’) still persists – I now see a blue and red outlines around my selected row, the red outline being much larger since it has a weight of 3.

    Would you know of any way to erase the blue outline?

    1. In the DataGrid skin, just delete the “caretIndicator” from the fx:Declarations section.

  2. […] If you want to gain some useful tips with the new Flex “Hero” SDK (available on Adobe Open Source), you should be following Adobe’s Joan Lafferty. She posted a number of tips for using the new Spark DataGrid this week including how to change the background color of a row using itemRendererFunction, how to use a CheckBox and how to outline the selected row. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: