Quantcast
Channel: Infragistics Blogs
Viewing all articles
Browse latest Browse all 218

WebDataGrid クリック行のデータを取得する

$
0
0

WebDataGrid のクリックした行のデータを取得してみます。よくあるシナリオとして、セルにボタンを埋め込み、ボタンをクリックした際にクリック行のデータを伴う処理を実施することがあります。このような場合、WebDataGrid のアクティブ化機能を利用することで簡潔に実装することができます。

 

実装方法

1.アクティブ化機能の有効化

下記のように WebDataGrid の Behaviors コレクションに Activation を設定します。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px"
    AutoGenerateColumns="False"><Columns>
        ...</Columns><Behaviors><%--アクティブ化機能の有効化--%><ig:Activation></ig:Activation></Behaviors></ig:WebDataGrid>

2.アクティブ行の取得

続いてセルに埋め込まれたボタン(<input type="button" .../>)をクリックしたタイミングで発生するイベントをハンドルし、アクティブ化機能の持つアクティブセル → アクティブセルのある行 → 行上にある別のセルを辿っていきます。最終的に、クリックされた行の ID セルを取得します。

<script type="text/javascript">
    function selectRow() {

        // WebDataGrid を取得
        var grid = $find("WebDataGrid1");
        // アクティブ化機能を取得
        var activation = grid.get_behaviors().get_activation();
        // アクティブセルを取得
        var activeCell = activation.get_activeCell();
        // アクティブセルのある行を取得
        var activeRow = activeCell.get_row();
        // 行にある ID セルを取得
        var targetCell = activeRow.get_cellByColumnKey("ID");
        // ID セルの値を取得
        var retreivedValue = targetCell.get_value();

        document.getElementById("valueHolder").value = retreivedValue;
    }
</script>

 

実行結果

クリックしたボタンの配置されている行の ID セルの値を取得することができました。

WebDataGrid アクティブ化

 

オンラインリソース

WebDataGrid アクティブ化
http://jp.infragistics.com/help/aspnet/webdatagrid-activation

 

サンプル

サンプルのダウンロード(Infragistics ASP.NET 2016 vol.2 バージョン、C#)
WebDataGrid_Activation_CS.zip

(このサンプルは 16.2.20162.2013 バージョンで作成されました。)


Viewing all articles
Browse latest Browse all 218

Trending Articles