All list-based controls support the allowMultipleSelection property. Setting the allowMultipleSelection property to true lets you select more than one item in the control at the same time. For example, the DataGrid control lets you select multiple rows so that you can drag and drop them to another DataGrid control.
The AdvancedDataGrid control adds the capability of letting you select multiple cells. You can drag the selected cells to another AdvancedDataGrid control, copy them to the clipboard, or perform some other action on the cell data.
You use the selectionMode property of the AdvancedDataGrid control, with the allowMultipleSelection property to configure multiple selection. The default value of the selectionMode property is singleRow, which means that you can select only a single row at a time. You can also set the selectionMode property to singleCell, multipleRows or to multipleCells.
Select contiguous items in the control
Select discontiguous items in the control
As you select cells or rows in the AdvancedDataGrid control, the control updates the selectedCells property with information about your selection. The selectedCells property is an Array of Objects where each Object contains a rowIndex and columnIndex property that represents the location of the selected row or cell in the control.
The value of the selectionMode property determines the data in the rowIndex and columnIndex properties, as the following tables describes:
|
Value of selectionMode property |
Value of rowIndex and columnIndex properties |
|---|---|
| none |
No selection allowed in the control, and selectedCells is null. |
| singleRow |
Click any cell in the row to select the row. After the selection, selectedCells contains a single Object: [{rowIndex:selectedRowIndex, columnIndex: -1}] |
| multipleRows |
Click any cell in the row to select the row.
After the selection, selectedCells contains one Object for each selected row: [ {rowIndex: selectedRowIndex1, columnIndex: -1}, {rowIndex: selectedRowIndex2, columnIndex: -1}, ... {rowIndex: selectedRowIndexN, columnIndex: -1} ] |
| singleCell |
Click any cell to select the cell. After the selection, selectedCells contains a single Object: [{rowIndex: selectedRowIndex, columnIndex:selectedColIndex}] |
| multipleCells |
Click any cell to select the cell.
After the selection, selectedCells contains one Object for each selected cell: [ {rowIndex: selectedRowIndex1, columnIndex: selectedColIndex1}, {rowIndex: selectedRowIndex2, columnIndex: selectedColIndex2}, ... {rowIndex: selectedRowIndexN, columnIndex: selectedColIndexN} ] |
The following example sets the selectionMode property to multipleCells to let you select multiple cells in the control. This application uses an event handler for the keyUp event to recognize the Control+C key combination and, if detected, copies the selected cells from the AdvancedDataGrid control to your system's clipboard.
After you copy the cells, you can paste the cells in another location in the Flex application, or paste them in another application, such as Microsoft Excel. In this example, you paste them to the TextArea control located at the bottom of the application:
<?xml version="1.0"?>
<!-- dpcontrols/adg/CellSelectADG.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.events.KeyboardEvent;
import flash.system.System;
include "StyleData.as"
// Event handler to recognize when Ctrl-C is pressed,
// and copy the selected cells to the system clipboard.
private function myKeyUpHandler(event:KeyboardEvent):void
{
var keycode_c:uint = 67;
if (event.ctrlKey && event.keyCode == keycode_c)
{
// Separator used between Strings sent to clipboard
// to separate selected cells.
var separator:String = ",";
// The String sent to the clipboard
var dataString:String = "";
// Loop over the selectedCells property.
// Data in selectedCells is ordered so that
// the last selected cell is at the head of the list.
// Process the data in reverse so
// that it appears in the correct order in the clipboard.
var n:int = event.currentTarget.selectedCells.length;
for (var i:int = 0; i < n; i++)
{
var cell:Object = event.currentTarget.selectedCells[i];
// Get the row for the selected cell.
var data:Object =
event.currentTarget.dataProvider[cell.rowIndex];
// Get the name of the field for the selected cell.
var dataField:String =
event.currentTarget.columns[cell.columnIndex].dataField;
// Get the cell data using the field name.
dataString = data[dataField] + separator + dataString;
}
// Remove trailing separator.
dataString =
dataString.substr(0, dataString.length - separator.length);
// Write dataString to the clipboard.
System.setClipboard(dataString);
}
}
]]>
</mx:Script>
<mx:AdvancedDataGrid width="100%" height="100%"
dataProvider="{dpADG}"
selectionMode="multipleCells"
allowMultipleSelection="true"
keyUp="myKeyUpHandler(event);">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Artist"/>
<mx:AdvancedDataGridColumn dataField="Album"/>
<mx:AdvancedDataGridColumn dataField="Price"/>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:TextArea id="myTA"/>
</mx:Application>
The executing SWF file for the previous example is shown below: