Handling events in a Spark DataGrid control

The DataGrid control defines event types that let you respond to user interaction. Many of these events are similar to events used by other Spark controls. For example, the DataGrid control dispatches a gridClick event when a user clicks any cell in the DataGrid control, similar to the click event used by other controls. Similarly, use the gridMouseDown and gridMouseUp events with the DataGrid control instead of the mouseDown and mouseUp events.

The DataGrid uses its own event types because it lets the DataGrid pass additional information to event handlers in the event object. For example, the DataGrid passes a spark.events.GridEvent object to the event handler of a gridClick event. The GridEvent class includes the cell location, and other information necessary to handle the event.

In your event handler, you often access properties of the DataGrid control. For example, you can access the DataGrid control by using the event.currentTarget property, where event is the event object passed to the event handler.

However, most of the properties of the DataGrid control are just references to properties of the underlying Grid control. Therefore, it is more efficient to access the Grid control directly in your event handler. You can access the Grid control by using the grid skin part of the DataGrid control, as shown below:

event.currentTarget.grid

The grid property in many event objects, such as event objects of type spark.events.GridEvent, also contains a reference to the underlying Grid control. Therefore, in an event handler where the event object contains a reference to the Grid control, you can reference it as follows:

event.grid
In the following example, you handle the gridClick event. In the event handler, you then reference the properties of the event object, in this case the spark.events.GridEvent class, and properties of the underlying Grid control:
<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\sparkdpcontrols\SparkDGEvents.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    minWidth="450" minHeight="450">
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <fx:Script> 
        <![CDATA[ 
            import spark.events.GridEvent;
            
            private function gridClickEvent(event:GridEvent):void { 
                // Access the colunm index, row index, and event type 
                // by using the GridEvent object.
                clickColumn.text = String(event.columnIndex); 
                clickRow.text = String(event.rowIndex); 
                eventType.text = event.type; 

                // Access the selection mode of the Grid control.
                selectionType.text = String(event.grid.selectionMode); 
            } 
        ]]> 
    </fx:Script> 
    
    <s:DataGrid id="myGrid" width="350" height="150"
        selectionMode="multipleCells" 
        gridClick="gridClickEvent(event);"> 
        <s:ArrayCollection> 
            <fx:Object Artist="Pavement" Price="11.99" 
                Album="Slanted and Enchanted" /> 
            <fx:Object Artist="Pavement" Album="Brighten the Corners" 
                Price="11.99" /> 
        </s:ArrayCollection> 
    </s:DataGrid> 
    
    <s:Form> 
        <s:FormItem label="Column Index:"> 
            <s:Label id="clickColumn"/>
        </s:FormItem> 
        <s:FormItem label="Row Index:"> 
            <s:Label id="clickRow"/> 
        </s:FormItem> 
        <s:FormItem label="Selection type:"> 
            <s:Label id="selectionType"/>
        </s:FormItem> 
        <s:FormItem label="Type:"> 
            <s:Label id="eventType"/>
        </s:FormItem> 
    </s:Form> 
</s:Application>

The executing SWF file for the previous example is shown below:

In this example, you use the event handler to display the column index, row index, event type, and selection mode.