DataGrid コントロールおよび DataGridEvent クラスでは、ユーザーの操作に応答する数種類のイベントタイプを定義します。例えば Flex では、ユーザーが DataGrid コントロールのアイテムをクリックすると、typ プロパティの値が mx.events.ListEvent.ITEM_CLICK（「itemClick」）に設定された mx.events.ListEvent クラスのイベントがブロードキャストされます。このイベントは次の例のように処理できます。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
    <![CDATA[
        import mx.events.ListEvent;
        private function itemClickEvent(event:ListEvent):void {
            clickColumn.text=String(event.columnIndex);
            clickRow.text=String(event.rowIndex);
            eventType.text=event.type;
        }
    ]]>
    </mx:Script>
    <mx:DataGrid id="myGrid" width="350" height="150"
            itemClick="itemClickEvent(event);" x="112" y="10">
        <mx:ArrayCollection>
            <mx:Object Artist="Pavement" Price="11.99" 
                Album="Slanted and Enchanted" />
            <mx:Object Artist="Pavement" Album="Brighten the Corners"
                Price="11.99" />
        </mx:ArrayCollection>
    </mx:DataGrid> 

    <mx:Label x="100" y="200" text="Column index"/>
    <mx:Label x="100" y="254" text="Row index"/>
    <mx:Label x="100" y="306" text="Type"/>
    
    <mx:TextArea id="clickColumn"  x="191" y="199"/>
    <mx:TextArea id="clickRow"  x="191" y="253"/>
    <mx:TextArea id="eventType"  x="191" y="305"/>

</mx:Application> 
前の例で実行する SWF ファイルは以下のとおりです。

この例では、イベントハンドラを使用して、列のインデックス、行のインデックスおよびイベントタイプを 3 つの TextArea コントロールに表示しています。

DataGrid コントロールの列のインデックスはゼロベースです。つまり、0、1、2、...、, n-1 の値で、n は列の総数です。 - 行のアイテムにも、0 から始まるインデックスが付けられます。したがって、2 行目の最初のアイテムを選択すると、この例では列のインデックスの TextArea には 0 が、行のインデックスの TextArea には 1 が表示されます。

イベントハンドラで選択したアイテムにアクセスするには、次の例のコードのように、イベントオブジェクトの currentTarget プロパティ、および DataGrid コントロールの selectedItem プロパティを使用します。

var selectedArtist:String=event.currentTarget.selectedItem.Artist;

イベントハンドラに渡されるオブジェクトの currentTarget プロパティには、DataGrid コントロールへの参照が設定されています。currentTarget にピリオドとプロパティ名を続けて使用すれば、コントロールのあらゆるプロパティを参照できます。currentTarget.selectedItem フィールドには選択されたアイテムが設定されます。

DataGrid コントロール内でのデータのソート

DataGrid コントロールは、ソートされたデータの表示について 2 種類の方法をサポートしています。

• デフォルトでは、データは基になるデータプロバイダのコレクションにおけるソートされた順序で表示されます。そのため、コレクションの Sort クラスと SortField クラスを使用すれば、行の順序を制御できます。
• デフォルトでは、ユーザーは列ヘッダーをクリックすれば表示順序をソートできます。列ヘッダーをクリックすると、まず選択した列の項目の表示順序が降順にソートされ、ヘッダーをもう一度クリックするとソート順序が逆になります。ソート機能は、DataGrid コントロール全体について、または個々の列について無効にすることができます。

Sort クラスおよび SortField クラスの使用方法について詳しくは、表示するデータのソートとフィルタを参照してください。

DataGrid の初期ソート順序の決定

DataGrid の最初のソート順序を指定するには、データプロバイダをソートします。様々な方法が可能ですが、Flex のコレクションのビルトイン機能を最大限活用できるのは次の方法です。

• DataGrid の dataProvider プロパティで、ArrayCollection のような、ICollectionView インターフェイスを実装するオブジェクトを使用します。データプロバイダオブジェクトの sort フィールドで Sort オブジェクトを指定します。
• Sort オブジェクトを使用して、dataProvider オブジェクト内の行の順序を制御します。

ユーザーによる DataGrid の表示内容のソートの制御

DataGrid および DataGridColumn の次に示すプロパティは、ユーザーがデータをソートできる方法を制御します。

• DataGrid の sortableColumns プロパティは、ユーザーが列ヘッダーをクリックして DataGrid の表示内容のソートすることを可能にするグローバルスイッチです。デフォルト値は true です。
• DataGridColumn sortable プロパティは、ユーザーが個々の列をソートできるかどうかを指定します。デフォルト値は true です。
• DataGridColumn の sortCompareFunction プロパティでは、カスタム比較関数を指定できます。このプロパティは、ユーザーがヘッダーをクリックした際に DataGrid でグリッドのソートに使用される、デフォルトの SortField クラスオブジェクトの compare プロパティを設定します。このプロパティを使用すれば、データプロバイダで Sort オブジェクトを明示的に作成することなく、2 つのオブジェクトを比較してどちらがソート順で上になるかを決定する関数を指定できます。比較関数のシグネチャおよび動作について詳しくは、『Adobe Flex リファレンスガイド』の「sortCompareFunction」を参照してください。

デフォルトでは、DataGrid クラスは独自のソートコードを使用して、ユーザーが列をクリックした際のデータのソート方法を制御します。この動作をオーバーライドするには、headerRelease イベントハンドラを作成して、ユーザーが列ヘッダーをクリックした際に生成される DataGridEvent のイベントを制御します。このイベントハンドラは以下の内容を実行する必要があります。

1. イベントオブジェクトの columnIndex プロパティを使用して、クリックされた列を判断する。
2. クリックされた列、およびソート順の制御が必要とされる他の規則に基づいて、SortField オブジェクトのセットを含む Sort オブジェクトを作成する。Sort オブジェクトの使用について詳しくは、表示するデータのソートとフィルタを参照してください。
3. データプロバイダとして割り当てられているコレクションに Sort オブジェクトを適用する。
4. DataGridEvent クラスのイベントオブジェクトの preventDefault() メソッドを呼び出して、DataGrid のデフォルトの列ソートが実行されるのを防止する。

次の例は、ユーザーが DataGrid の列ヘッダーをクリックした際に、headerRelease イベントハンドラを使用して複数列のソートを実行する方法を示しています。

例：DataGrid の複数列のソート

次の例は、コレクションを Sort オブジェクトとともに使用して最初の複数行ソートを決定し、ヘッダーをクリックした際の列のソート方法を制御する方法を示しています。データグリッドは最初、1 番目に在庫状況、2 番目にアーティスト、3 番目にアルバム名の順でソートされます。いずれかのヘッダーをクリックすると、その列が第 1 ソート基準となり、それまでの第 1 基準が第 2 基準に、第 2 基準が第 3 基準になります。

<?xml version="1.0"?>
<!-- dpcontrols/DataGridSort.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      initialize="initDP();" width="550" height="400">
      
   <mx:Script>
      <![CDATA[
         import mx.events.DataGridEvent;
         import mx.collections.*;
         
         // Declare storage variables and initialize the simple variables.
         // The data provider collection.
         private var myDPColl:ArrayCollection;
         // The Sort object used to sort the collection.
         [Bindable]
         private var sortA:Sort;
         // The sort fields used to determine the sort.
          private var sortByInStock:SortField;
          private var sortByArtist:SortField;
          private var sortByAlbum:SortField;
          private var sortByPrice:SortField;
         // The data source that populates the collection.
         private var myDP:Array = [
            {Artist:'Pavement', Album:'Slanted and Enchanted', 
               Price:11.99, InStock: true},
            {Artist:'Pavement', Album:'Crooked Rain, Crooked Rain', 
               Price:10.99, InStock: false},
            {Artist:'Pavement', Album:'Wowee Zowee', 
               Price:12.99, InStock: true},
            {Artist:'Asphalt', Album:'Brighten the Corners', 
               Price:11.99, InStock: false},
            {Artist:'Asphalt', Album:'Terror Twilight', 
               Price:11.99, InStock: true},
            {Artist:'Asphalt', Album:'Buildings Meet the Sky', 
               Price:14.99, InStock: true},
            {Artist:'Other', Album:'Other', Price:5.99, InStock: true}
         ];

         //Initialize the DataGrid control with sorted data.
         private function initDP():void {
            //Create an ArrayCollection backed by the myDP array of data.
            myDPColl = new ArrayCollection(myDP);
            //Create a Sort object to sort the ArrrayCollection.
            sortA = new Sort();
            //Initialize SortField objects for all valid sort fields:
            // A true second parameter specifies a case-insensitive sort.
            // A true third parameter specifies descending sort order.
            // A true fourth parameter specifies a numeric sort.
             sortByInStock = new SortField("InStock", true, true);
             sortByArtist = new SortField("Artist", true);
             sortByAlbum = new SortField("Album", true);
             sortByPrice = new SortField("Price", true, false, true);
            // Sort the grid using the InStock, Artist, and Album fields.
            sortA.fields=[sortByInStock, sortByArtist, sortByAlbum];
            myDPColl.sort=sortA;
            // Refresh the collection view to show the sort.
            myDPColl.refresh();
            // Initial display of sort fields
            tSort0.text = "First Sort Field: InStock";
            tSort1.text = "Second Sort Field: Artist";
            tSort2.text = "Third Sort Field: Album";

            // Set the ArrayCollection as the DataGrid data provider.
            myGrid.dataProvider=myDPColl;
            // Set the DataGrid row count to the array length, 
            // plus one for the header.
            myGrid.rowCount=myDPColl.length +1; 
         }  
      
         // Re-sort the DataGrid control when the user clicks a header.
         private function headRelEvt(event:DataGridEvent):void {
            // The new third priority was the old second priority.
            sortA.fields[2] = sortA.fields[1];
            tSort2.text = "Third Sort Field: " + sortA.fields[2].name;
            // The new second priority was the old first priority.
            sortA.fields[1] = sortA.fields[0];
            tSort1.text = "Second Sort Field: " + sortA.fields[1].name;
            // The clicked column determines the new first priority.
            if (event.columnIndex==0) {
               sortA.fields[0] = sortByArtist;
            } else if (event.columnIndex==1) {
               sortA.fields[0] = sortByAlbum;
            } else if (event.columnIndex==2) {
               sortA.fields[0] = sortByPrice;
            } else {
               sortA.fields[0] = sortByInStock;}
            tSort0.text = "First Sort Field: " + sortA.fields[0].name;
            // Apply the updated sort fields and re-sort.
            myDPColl.sort=sortA;
            // Refresh the collection to show the sort in the grid.
            myDPColl.refresh();
            // Prevent the DataGrid from doing a default column sort.
            event.preventDefault();
         }
      ]]>
   </mx:Script>

   <!-- The Data Grid control. 
         By default the grid and its columns can be sorted by clicking. 
         The headerRelease event handler overrides the default sort
         behavior. -->
   <mx:DataGrid id="myGrid" width="100%" headerRelease="headRelEvt(event);">
      <mx:columns>
            <mx:DataGridColumn minWidth="120" dataField="Artist" />
            <mx:DataGridColumn minWidth="200" dataField="Album" />
            <mx:DataGridColumn width="75" dataField="Price" />
            <mx:DataGridColumn width="75" dataField="InStock"
               headerText="In Stock"/>
      </mx:columns>
   </mx:DataGrid>
   <mx:VBox>
      <mx:Label id="tSort0" text="First Sort Field: "/>
      <mx:Label id="tSort1" text="Second Sort Field: "/>
      <mx:Label id="tSort2" text="Third Sort Field: "/>
   </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

DataGrid コントロールのユーザー操作

DataGrid コントロールは、マウスおよびキーボードの操作に応答します。マウスクリックやキーの押し下げに対する応答は、セルが編集可能かどうかによって異なります。セルが含まれている DataGrid コントロールおよび DataGridColumn の editable プロパティが共に true に設定されている場合、そのセルは編集可能です。編集可能なセル内をクリックすると、そのセルにフォーカスが移動します。編集不可能なセルをクリックしても、フォーカスは変化しません。

ユーザーは次の方法で、DataGrid コントロールの外観を変更できます。

• sortableColumns プロパティの値がデフォルト値である true の場合、列ヘッダー内をクリックすると、その列のセルの値に基づいて DataGrid コントロールがソートされます。
• draggableColumns プロパティの値がデフォルトの true の場合、列ヘッダーの中でマウスをクリックし、マウスボタンを押したまま水平にドラッグしてからマウスボタンを離すと、列が新しい位置に移動します。
• resizableColumns プロパティの値がデフォルト値の true の場合、列間の領域をクリックすると列のサイズを変更できます。

キーボード操作

DataGrid コントロールでは次のキーボード操作ができます。