Adobe Flex 3 Help

Selecting multiple cells and rows

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

  1. Click the first item, either a row or cell, to select it.
  2. Hold down the Shift key as you select an additional item.
    • If the selectionMode property is set to multipleRows, click any cell in another row to select multiple, contiguous rows.
    • If the selectionMode property is set to multipleCells, click any cell to select multiple, contiguous cells.

Select discontiguous items in the control

  1. Click the first item, either a row or cell, to select it.
  2. Hold down the Control key as you select an additional item.
    • If the selectionMode property is set to multipleRows, click any cell in another row to select that single row.
    • If the selectionMode property is set to multipleCells, click any cell to select that single cell.

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.

  • While holding down the Control key, click any cell in another row to select the row for discontiguous selection.
  • While holding down the Shift key, click any cell in another row to select multiple, contiguous rows.

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.

  • While holding down the Control key, click any cell to select the cell multiple discontiguous selection.
  • While holding down the Shift key, click any cell to select multiple, contiguous cells.

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: