バージョン

アクティブ化

グリッドのアクティブ化

WebHierarchicalDataGrid™ コントロールのセルはアクティブ化をサポートします。現在のセルまたはマウス クリックなどアクションを最後に受け取った時にセルはアクティブです。アクティブセルが属する行または列もアクティブと見なされます。要素はコードからもアクティブ化できます。WebHierarchicalDataGrid の特定の機能はアクティブな要素を必要とします。

WebHierarchicalDataGrid Behaviors Activation 01.png

注: WebHierarchicalDataGrid 全体で、一度にひとつのアクティブ セルだけを持つことができます。

アクティブ化がオンになっている場合、キーボードで + キーを押すと、現在アクティブになっている行を展開します。子がある場合、- キーを押すと縮小します。

デザイン タイムのアクティブ化

WebHierarchicalDataGrid でのセルのアクティブ化は動作です。これを有効にするには、[プロパティ] ウィンドウで Behavior の省略(…​)ボタンをクリックし、動作エディターで Activation 動作チェックボックスを選択します。

WebHierarchicalDataGrid のセルのアクティブ化は以下のように動作します:

  1. エンドユーザーがセルをクリックすると、そのセルと行の両方がアクティブになります。

  2. エンドユーザーが WebHierarchicalDataGrid にタブ移動すると、最初のセルがアクティブになります。エンドユーザーはその他のセルにも継続してタブ移動するか、矢印キーを使用してナビゲートすることができます。子バンドが展開されていると、エンドユーザーは子レベルのセルをナビゲートするために Tab または矢印キーを使用できます。

  3. セルがいったんアクティブ化されると、フォーカスを失っても WebHierarchicalDataGrid はアクティブ化を維持します。

  4. WebHierarchicalDataGrid はポストバックの間アクティブなセルを維持します。

  5. 行が選択されると行の最初のセルがアクティブ化されます。

コードからアクティブ化

WebHierarchicalDataGrid はアクティブ セルを取得または設定するためのプロパティとメソッドを提供します。サーバー上の時には ActiveCell プロパティを使用し、クライアント上の時には get または set アクセサーを使用します。アクティブ セルの WebHierarchicalDataGrid をクリアしたい場合、ActiveCell プロパティを Null に設定します。必要な場合、アクティブ セルから行または列を取得できます。

RowIslandDataBound サーバー側イベントは、親および子セルをアクティブ化するために処理されます。

以下のコードは、Activation Behavior が有効であることを前提とします。

Visual Basic の場合:

' RowIslandDataBound イベントを接続します
AddHandler Me.WebHierarchicalDataGrid1.RowIslandDataBound, AddressOf WebHierarchicalDataGrid1_RowIslandDataBound
Protected Sub WebHierarchicalDataGrid1_RowIslandDataBound(ByVal sender As Object, ByVal e As RowIslandEventArgs) Handles WebHierarchicalDataGrid1.RowIslandDataBound
   ' 親バンド
   If e.RowIsland.DataMember = "SqlDataSource1_DefaultView" Then
'親バンドでアクティブ セルを設定します
     Dim active As Activation = e.RowIsland.Behaviors.Activation
     active.ActiveCell = e.RowIsland.Rows(0).Items(1)
   End If
' 子バンド
   If e.RowIsland.DataMember = "SqlDataSource2_DefaultView" AndAlso e.RowIsland.ParentRow = Me.WebHierarchicalDataGrid1.GridView.Rows(0) Then
'子バンドでアクティブ セルを設定します
      Dim active As Activation = e.RowIsland.Behaviors.Activation
      active.ActiveCell = e.RowIsland.Rows(0).Items(2)
   End If
End Sub

C# の場合:

// RowIslandDataBound イベントを接続します
this.WebHierarchicalDataGrid1.RowIslandDataBound += new RowIslandEventHandler(WebHierarchicalDataGrid1_RowIslandDataBound);
protected void WebHierarchicalDataGrid1_RowIslandDataBound(object sender, RowIslandEventArgs e)
{
   //親バンド
   if (e.RowIsland.DataMember == "SqlDataSource1_DefaultView")
   {
//親バンドでアクティブ セルを設定します
      Activation active = e.RowIsland.Behaviors.Activation;
      active.ActiveCell = e.RowIsland.Rows[0].Items[1];
   }
// 子バンド
   if (e.RowIsland.DataMember == "SqlDataSource2_DefaultView"
        && e.RowIsland.ParentRow == this.WebHierarchicalDataGrid1.GridView.Rows[0])
   {
//子バンドでアクティブ セルを設定します
      Activation active = e.RowIsland.Behaviors.Activation;
      active.ActiveCell = e.RowIsland.Rows[0].Items[2];
   }
}

JavaScript の場合:

var parentGrid = grid.get_gridView();
// アクティブの親セルを設定します
if (parentGrid != null) parentGrid.get_behaviors().get_activation().set_activeCell(parentGrid.get_rows().get_row(0).get_cell(2));
var childGrid = grid.get_gridView().get_rows().get_row(0).get_rowIslands(0)[0];
// 子レベルでアクティブ セルを設定します
if (childGrid != null) childGrid.get_behaviors().get_activation().set_activeCell(childGrid.get_rows().get_row(0).get_cell(2));

キーボードによるアクティブ化

以下はキーボードを使用して WebHierarchicalDataGrid をアクティブ化する方法です:

+/- キー

子がある場合、+ キーを押して現在アクティブになっている行を展開します。同様に、- キーを押してアクティブ行を縮小します。

矢印キー
  • WebHierarchicalDataGrid セルを移動します。

  • 矢印キーによってエンドユーザーがセル内のみをナビゲートできるようにします。

  • 子レベルが展開されている場合、エンドユーザーが押す矢印キーによってナビゲーションが異なります。子レベル内の最後のセルにナビゲートし、最後にアクティブとなったアクティブの親セルに戻ります。

タブ
  • 行の次のセルに移動します。

  • 行の最後のセルがアクティブ場合、Tab を押すと次の行の最初のセルが存在する場合、そのセルがアクティブになります。

  • 最後の行の最後のセルの場合、フォーカスを次のコントロールに移動します。

  • 子レベルが展開されていると、展開された親セルから子バンド内の最初のセルに移動します。

Enter キー
  • 下のセルに移動します。

  • すでに最後の行の場合には、そこに止まります。

  • 子レベルが展開されていると、展開された親セルから子バンド内の最初のセルに移動します。子バンド内の最後のセルで Enter を押すと、最後にアクティブだった対応する親セルに移動します。

Shift Enter キー
  • 上のセルに移動します。

  • すでに一番上の行の場合には、そこに止まります。

  • 子レベルが展開されていると、現在のセルの上のセルに移動します。子レベルの最初の行では、アクティブ化は展開された親行の最後のセルに移動します。

Shift + Tab
  • 行の前のセルに移動します。

  • 最初の行の最初のセルの場合、フォーカスをコントロールに移動し、さらに次のコントロールに移動します。

  • 行の最初のセルの場合、前の行の最後のセルがある場合はそこに移動します。

  • 子レベルが展開されていると、子行の最初のセルの場合、アクティブ化は展開された親行の最後のセルに移動します。

Shift + [任意の矢印キー]
  • アクティブ セルからセル選択を開始し、エンドユーザーが押す矢印キーに基づいてナビゲートします。

マウスによるアクティブ化
  • セルまたは行をクリックしてアクティブ化します。

アクティブ化のスタイリング

WebHierarchicalDataGrid のアクティブな要素は、CSS を使用して個別にスタイルできます。これは、CSS スタイルを作成し、スタイルしたい要素に適切なプロパティを設定することによって実行できます。たとえば、アクティブ行をスタイルするには、ActiveRowCSSClass プロパティを設定します。