Prevent row selection in a list or datagrid when an itemrenderer has been clicked
When your list or datagridColumn has an itemRenderer with a component that can be clicked, you don’t always want to select the row in your list.
To prevent the selection, you need to listen to the mouseDown event and stop the propagation (event.stopPropagation()).
Note: it took me some time to discover that a Flex list selects its item on a mouse down, not on a mouse click!
See the example (view source enabled)
Code example of an itemRenderer:
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
[Embed("assets/information.png")]
private var _informationIcon:Class;
private function onMouseDown(event:MouseEvent):void {
event.stopPropagation();
}
private function showAlert():void {
Alert.show("Icon clicked");
}
]]>
</mx:Script>
<mx:Image source="assets/information.png"
buttonMode="true"
toolTip="Show information"
mouseDown="onMouseDown(event)"
click="showAlert()"/>
</mx:HBox>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
[Embed("assets/information.png")]
private var _informationIcon:Class;
private function onMouseDown(event:MouseEvent):void {
event.stopPropagation();
}
private function showAlert():void {
Alert.show("Icon clicked");
}
]]>
</mx:Script>
<mx:Image source="assets/information.png"
buttonMode="true"
toolTip="Show information"
mouseDown="onMouseDown(event)"
click="showAlert()"/>
</mx:HBox>
This is related to:
- flex datagrid preventdefault
- flex datagrid prevent item selection
- flex list prevent selection
- flex list selectable
Recent Comments