バージョン

WebHierarchicalDataGrid - ItemCommand イベントの使用

始める前に

WebHierarchicalDataGrid の ItemCommand サーバー サイド イベントでは、 TemplateField 列にあるコントロールから簡単にイベント (ボタン クリックなど) に応答できます。

達成すること

このチュートリアルは、バインドした TemplatedField 列内に ASP.NET ボタンを追加し、ボタンがクリックされたときに情報を表示するために WebHierarchicalDataGrid の ItemCommand サーバー サイド イベントを処理する方法について説明します。

次の手順を実行します

注: このチュートリアルは、WebHierarchicalDataGrid を DataSet オブジェクトにデザイン タイムでバインドしていることが前提です。WebHierarchicalDataGrid コントロールを生成する方法については、このトピックの最後にある

関連トピック

クションをご覧ください。

TemplateField を親バンドに追加

ItemCommand イベントを使用してセル項目にアクセス (WebDataGrid) の手順に従ってください。

TemplateField を子バンドに追加:

  1. デザイン ビューでコントロール/コンポーネントを選択すると、スマート タグ アンカーが表示されます。[バンドを編集] を選択します。

  2. [WebHierarchicalDataGrid バンドを編集] が表示されます。必要なバンドを選択を選択します。

  3. プロパティ ウィンドウで Columns コレクションの省略記号 (…) ボタンをクリックします。

Using ItemCommand Event to Access Cell Item [WHDG] 1.png

  1. コレクションに TemplateField を追加します。

    1. 利用可能なセクションから TemplateField を選択し、フィールド ボタンの追加をクリックします。

    2. タイプ TemplateField の新しい列が列コレクションに追加されます。

Using ItemCommand Event to Access Cell Item [WHDG] 2.png

  1. TemplateField を追加する他の方法として、Grid フィールドを Template フィールドへ変換します。

Using ItemCommand Event to Access Cell Item [WHDG] 3.png

  1. グリッド フィールドを選択し、選択したグリッド フィールドをテンプレート フィールドへ押します。

  2. [OK] ボタンをクリックして列コレクション エディターを閉じます。

  1. ASP.NET Button コントロールをページに追加します。

    1. ページのデザイン ビューから WebHierarchicalDataGrid のスマート タグを選択し、[テンプレートの編集] をクリックします。

    2. テンプレート編集モードを開いた後にテンプレート フィールド Freight を検索します。

Using ItemCommand Event to Access Cell Item [WHDG] 4.png

  1. ツールボックスから標準 ASP.NET ボタン コントロールを ItemTemplate へドラッグします。

  2. [テンプレート編集の終了] を選択して編集を終了します。

  1. サーバー サイド イベント ハンドラーを ItemCommand イベント (コード ビハインド) に追加します。

Visual Basic の場合:

Protected Sub WebHierarchicalDataGrid1_ItemCommand(sender As Object,
                        e As HandleCommandEventArgs)
      End Sub

C# の場合:

protected void WebHierarchicalDataGrid1_ItemCommand(object sender,
                        HandleCommandEventArgs e)
          {
          }

  1. ItemCommand イベントにコードを追加し、行情報を取得します。コントロールがイベントを送り返す際にサーバーはそのイベントに応答する必要があります。ItemCommand は、サーバーで発生され、HandleCommandEventArgs オブジェクトを介してイベント引数を公開します。

親 TemplateDataField

ASPX の場合:

<ig:TemplateDataField Key="Freight">
            <ItemTemplate>
<asp:Button ID="Button1" runat="server" Text="Show Freight"
CommandArgument='<%# Eval("Freight") %>' CommandName="Button1Click" />
            </ItemTemplate>
            <Header Text="Freight">
            </Header>
</ig:TemplateDataField>

子 TemplateDataField

ASPX の場合:

<ig:TemplateDataField Key="Country">
              <ItemTemplate>
                              <asp:Button ID="Button2" runat="server"
Text="Show country"
CommandArgument='<%# Eval("Country") %>'
                                      CommandName="ChildButtonClick" />
              </ItemTemplate>
              <Header Text="Country">
              </Header>
</ig:TemplateDataField>

Visual Basic の場合:

Protected Sub WebHierarchicalDataGrid1_ItemCommand(sender As Object, e As HandleCommandEventArgs)
        If (e.CommandName = "ChildButtonClick") Then
            '子グリッドから
            'e.CommandArgument は、対応するボタンの CommandArgument 属性から値を提供します。
            Dim commandArgument As Object = e.CommandArgument
            ' Freight フィールド値で計算を実行し、それを Label へ渡します。
            CountryValueLbl.Text = commandArgument.ToString()
        Else
            '親グリッドから
            Dim commandArgument As Object = e.CommandArgument
            FreightValueLbl.Text = commandArgument.ToString()
        End If
 End Sub

C# の場合:

protected void WebHierarchicalDataGrid1_ItemCommand(object sender, HandleCommandEventArgs e)
{
      if (e.CommandName == "ChildButtonClick")
      {
                  //子グリッドから
                  //e.CommandArgument は、対応するボタンの CommandArgument 属性から値を提供します。
                  object commandArgument = e.CommandArgument;
                  // Freight フィールド値で計算を実行し、それを Label へ渡します。
                  CountryValueLbl.Text = commandArgument.ToString();
      }
      else
      {
            //親グリッドから
                  object commandArgument = e.CommandArgument;
                  FreightValueLbl.Text = commandArgument.ToString();
      }
}

  1. アプリケーションを実行します。ボタンの 1 つをクリックし、以下のイメージのように Freight フィールド値が WebDataGrid の上に表示されます。

Using ItemCommand Event to Access Cell Item [WHDG] 5.png

関連トピック

ItemCommand イベントを使用してセル項目にアクセス

項目テンプレートの使用

WebHierarchicalDataGrid データ バインディング

WHDG を XMLA データ ソースにバインド