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 アクティブ化
http://jp.infragistics.com/help/aspnet/webdatagrid-activation
サンプル
サンプルのダウンロード(Infragistics ASP.NET 2016 vol.2 バージョン、C#)
WebDataGrid_Activation_CS.zip
(このサンプルは 16.2.20162.2013 バージョンで作成されました。)