Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid 編集データの一括更新

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

 

1.プロパティの設定

一括更新の有効化は至って簡単です。EditingCore.BatchUpdating プロパティに True を設定するだけで有効化できます。

            <Behaviors>
                <ig:EditingCore BatchUpdating="True">
                .....
                </ig:EditingCore>
            </Behaviors>

 

2.編集行のスタイルについて

一括更新有効時には、編集された行を区別できるようフォントスタイルが適用されます。フォントスタイルが italic 、フォント色がグレーに変わります。

WebDataGrid 一括更新

 

 

 

 

 

 

 

 

 

 

 

3.更新処理

一括更新が有効な場合、編集後の最初のポストバック時に変更内容データソースに通知されます。例えば更新ボタンを用意してポストバックを起こすことでデータを更新・反映することができます。

 

4.データ検証

場合によっては一括更新時に編集内容を検証して、データを更新するかしないかを判断することもあります。WebDataGrid ではデータ変更前に起きる RowUpdating イベント内で各セルの編集内容を検証することができます。検証の結果、更新をキャンセルするには e.Cancel に true を設定します。


C#

    protected void WebDataGrid1_RowUpdating(object sender, Infragistics.Web.UI.GridControls.RowUpdatingEventArgs e)
    {
        // 100000 を超える入力はキャンセル
        if ((int)e.Values["Price"] > 100000)
        {
            // セルの更新をキャンセル
            e.Cancel = true;
        }
    }


VB

    Protected Sub WebDataGrid1_RowUpdating(sender As Object, e As Infragistics.Web.UI.GridControls.RowUpdatingEventArgs) Handles WebDataGrid1.RowUpdating
        ' 100000 を超える入力はキャンセル
        If CInt(e.Values("Price")) > 100000 Then
            ' セルの更新をキャンセル
            e.Cancel = True
        End If
    End Sub

ここまでの実装で入力値の検証も行うことができるようになりました。100000 (基準値)を超える入力はキャンセルされます。

 

5.一括編集有効時のフォントスタイルについて

WebDataGrid の一括更新機能を有効にすると上記「2.編集行のスタイルについて」でご説明しました編集行のスタイルが適用されますが、このスタイルを変更したい、もしくは適用したくないこともあります。編集業のスタイルは .igg_UpdatedRow(奇数行)と .igg_Alt.igg_UpdatedRow td(偶数行)にそれぞれスタイルが実装されていますので、これらを書き換えることで編集行のスタイルを変更することができます。下記 CSS を適用することで編集行スタイルを非編集行と同じスタイルに統一できます。

例:非編集行と同じスタイル
    <style type="text/css">
    .igg_UpdatedRow
    {    
         color: #000000;
         font-style: normal;
    }
    .igg_Alt.igg_UpdatedRow td
    {    
         color: #000000;
         font-style: normal;
    }
    </style>

 

ここまで WebDataGrid の一括更新の有効化や検証、スタイルなどについてご紹介致しました。通信回数を減らして一括でデータ更新を行いたいシナリオにはピッタリの機能です。今回は行編集時の実装を中心にご紹介しました。一括更新には今回ご紹介できなかった様々な機能が用意されており、下記オンラインサンプルで動作をご確認頂けます。

 

今回のサンプル

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

オンラインサンプル

 

オンラインヘルプ


WebDataGrid 関連記事

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

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

 

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

Comments

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