Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid クリックイベントのサーバーサイド処理

グリッド上でクリックやダブルクリック時に何らかの処理を行うというシナリオはよくあるかと思います。

WebDataGrid ではクライアントサイドイベントとして Click イベントDoubleClick イベントがありますのでクライアントサイドでの処理を直接イベントハンドラーに組み込むことができます。

ただし、WebDataGrid にはサーバーサイドでクリックやダブルクリックに対応するイベントはありません。このため、サーバーサイドでの何らかの処理を行う際には一旦クライアントサイドの Click イベント、DoubleClick イベントをハンドルし、__doPostBack で明示的にポストバックを起こす必要があります。本稿ではダブルクリック時にセルの情報をサーバーサイドで取得する例を通じて具体的な実装方法を紹介します。

 

1.DoubleClick イベントハンドラーの登録

WebDataGrid のクライアントサイドイベントは ClientEvents コレクション配下にあります。まずはこのようにイベントハンドラーの登録を行います。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" EnableAjax="false">
    <%--1.DoubleClick イベントハンドラーの登録--%>
    <ClientEvents DoubleClick="WebDataGrid1_Grid_DoubleClick" />
</ig:WebDataGrid>

 

2.ポストバック処理の実装

続いて処理の実装を行います。第二引数の eventArgs からクリックセルの行インデックス、列インデックス、セルの値を取り出して、__doPostBack メソッドでこれら情報をサーバーサイドに引き渡します。

function WebDataGrid1_Grid_DoubleClick(sender, eventArgs)
{
    if (eventArgs.get_type() == "cell") {
        // 行インデックス
        var rowIndex = eventArgs.get_item().get_row().get_index();
        // 列インデックス
        var columnIndex = eventArgs.get_item().get_column().get_index();
        // セル値
        var value = eventArgs.get_item().get_value();
        // ポストバック
        __doPostBack('WebDataGrid1', JSON.stringify({ 'rowIndex': rowIndex, 'columnIndex': columnIndex, 'value': value }));
    }
}

 

3.サーバーサイドでの値確認

__doPostBack メソッドの引数をサーバーサイドのページロードタイミングで取得します。ここでは取得した情報を JavaScriptSerializer を利用してセル情報を扱う CellInfo クラスに変換しています。

C Sharp の場合

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            // 引数の取得
            string passedArgument = Request.Params.Get("__EVENTARGUMENT");

            // 引数を CellInfo オブジェクトに変換
            JavaScriptSerializer jss = new JavaScriptSerializer();
            CellInfo ci = jss.Deserialize<CellInfo>(passedArgument);

            // セル情報出力            
            Debug.WriteLine("セル情報");
            Debug.WriteLine("行インデックス:" + ci.rowIndex);
            Debug.WriteLine("列インデックス:" + ci.columnIndex);
            Debug.WriteLine("セル値:" + ci.value);
            Debug.WriteLine("-------");
        }
        ...
    }
// セル情報クラス
public class CellInfo
{
    public string rowIndex { get; set; }
    public string columnIndex { get; set; }
    public string value { get; set; }
}

 

VB.NET の場合

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If IsPostBack Then

            ' 引数の取得
            Dim passedArgument As String = Request.Params.[Get]("__EVENTARGUMENT")

            ' 引数を CellInfo オブジェクトに変換
            Dim jss As New JavaScriptSerializer()
            Dim ci As CellInfo = jss.Deserialize(Of CellInfo)(passedArgument)

            ' セル情報出力
            Debug.WriteLine("セル情報")
            Debug.WriteLine("行インデックス:" + ci.rowIndex)
            Debug.WriteLine("列インデックス:" + ci.columnIndex)
            Debug.WriteLine("セル値:" + ci.value)
            Debug.WriteLine("-------")

        End If
    End Sub
' セル情報クラス
Public Class CellInfo
    Public Property rowIndex() As String
        Get
            Return m_rowIndex
        End Get
        Set(value As String)
            m_rowIndex = value
        End Set
    End Property
    Private m_rowIndex As String
    Public Property columnIndex() As String
        Get
            Return m_columnIndex
        End Get
        Set(value As String)
            m_columnIndex = value
        End Set
    End Property
    Private m_columnIndex As String
    Public Property value() As String
        Get
            Return m_value
        End Get
        Set(value As String)
            m_value = value
        End Set
    End Property
    Private m_value As String
End Class

 

今回はダブルクリック時のサーバーサイド処理を紹介いたしましたが、勿論シングルクリックの場合も同様のアプローチが可能です!また、今回の実装方法は MouseDown や KeyDown タイミングでサーバーサイド処理を行う際にも参考にしていただけると思います。

 

サンプルはこちら

(本サンプルは13.1.20131.2069バージョンで作成されました) 

NetAdvantage トライアル版ダウンロード
NetAdvantage ダウンロード

 

WebDataGrid 関連記:
WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

Comments

Yuki Mita said:

WebDataGrid ではデフォルトの状態で列幅よりも長いセルの値を列幅に応じて自動改行し、全ての情報を画面上に表示する様に動作します。但し、状況によってはセルの値を改行せずに一部のみを表示する状態を実現したいケースも出てきます。このような場合、WebDataGrid

# July 23, 2013 10:58 PM

Yuki Mita said:

WebDataGrid に DataTable データをバインドしたシナリオにおける JavaScript API による行の追加と削除をご紹介します。 1.準備 - 機能の有効化 WebDataGrid

# July 29, 2013 9:10 PM

Yuki Mita said:

顧客企業一覧や商品一覧などをグリッドに表示する際に、顧客企業や商品に関するウェブサイトへのリンクも含めたい場面はよくあります。WebDataGrid では TemplateDataField にハイパーリンクを表示するコントロールを埋め込むことでリンク表示を実現することができます。

# August 2, 2013 4:59 AM

Yuki Mita said:

グリッドでのデータ更新のタイミングはシナリオに応じて様々ですが、例えば行の編集を終えた後であったり、変更したい全てのセルの編集を終えた後などが考えられます。WebDataGrid ではデフォルト状態で行の編集後にデータ更新を行いますが、プロパティ設定により任意のタイミングで一括更新を行うこともできるようになっています。今回は一括更新の利用方法をご紹介します。

# August 8, 2013 4:46 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 1:17 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 2:39 AM
Anonymous comments are disabled