Not yet rated

Problem

I would like to have a stroke around the selected row in my Spark DataGrid.

Solution

Create a custom DataGrid skin and add a stroke to the selectionIndicator.

Detailed explanation

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:stroke>
<s:SolidColorStroke color="0xC00000″ weight="3″ />
</s:stroke>

This recipe was taken from my blog post at http://butterfliesandbugs.wordpress.com/2011/02/09/outlining-the-selected-row-in-a-spark-datagrid/ which also contains a full downloadable code sample.

DataGridStrokedSelectionExample.zip
[SelectionIndicator Example Files]

+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes