Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid サーバーサイドで行追加・行削除

WebDataGrid はページ描画前のサーバーサイド処理で毎回データをバインドする設計になっています。この仕様はサーバーとクライアントでグリッドデータの受け渡しをやめることでパフォーマンスを高める狙いがあります。

業務要件ではグリッドの特定行を追加したり、削除したりする場面は頻繁にありますが、WebDataGrid ではサーバーサイドでグリッドの行コレクションを操作するのではなく WebDataGrid が参照しているデータソースそのものに対して操作を行います。

WebDataGrid に DataTable をバインドした例を考えてみましょう。

ページ初回表示時にデータ(DataTable)を取得し、そのデータを表示するアプリケーションを想定しています。WebDataGrid ではポストバック毎にデータをバインドする必要があるため、データをセッションに格納し、セッションを介してデータの管理を行います。

protected void Page_Load(object sender, EventArgs e)
{
    // 初回表示時はデータを作成
    if (!IsPostBack)
    {
        DataColumn[] PrimaryColumn = new DataColumn[1];
        DataTable dt = new DataTable();
        PrimaryColumn[0] = dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Age", typeof(int));
        dt.Columns.Add("HomeTown", typeof(string));
        dt.Rows.Add(1, "たかし", 28, "静岡");
        dt.Rows.Add(2, "としひこ", 30, "大阪");
        dt.Rows.Add(3, "じゅんこ", 27, "鳥取");
        dt.Rows.Add(4, "さとみ", 28, "神奈川");
        dt.Rows.Add(5, "えりこ", 50, "東京");
        dt.Rows.Add(6, "しんいち", 32, "島根");
        dt.Rows.Add(7, "ゆみこ", 37, "静岡");
        dt.Rows.Add(8, "みな", 31, "兵庫");
        dt.Rows.Add(9, "たくや", 40, "徳島");
        dt.Rows.Add(10, "まゆ", 43, "三重");
        dt.PrimaryKey = PrimaryColumn;

        Session["data"] = dt;
    }
    // ポストバック毎にデータをバインド
    this.WebDataGrid1.DataSource = Session["data"];
}



行の削除

上記データバインドの仕組みを踏まえて、行の削除を見てみましょう。WebDataGrid でサーバーサイドで表示するデータを操作するためには、データソースに対して直接変更を加えます。行を削除する場合、DataSource プロパティからデータソースを取り出して行を削除します。データソースはセッションデータとして再バインドされ、クライアントサイドに変更が反映されます。

C#

protected void Button1_Click(object sender, EventArgs e)
{
    DataTable table = this.WebDataGrid1.DataSource as DataTable;

    // データソースに行が存在する場合
    if (table.Rows.Count > 1)
    {
        // 1行目を削除
        table.Rows.RemoveAt(0);
    }
}


VB.NET
Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
    Dim table As DataTable = TryCast(Me.WebDataGrid1.DataSource, DataTable)

    ' データソースに行が存在する場合
    If table.Rows.Count > 1 Then
        ' 1行目を削除
        table.Rows.RemoveAt(0)
    End If
End Sub



行の追加

行の追加も行の削除同様、データソースを直接変更します。ここでは DataTable に1行追加しています。

C#
protected void Button2_Click(object sender, EventArgs e)
{
    DataTable table = this.WebDataGrid1.DataSource as DataTable;
    DataRow newRow = table.NewRow();
    newRow["ID"] = (int)table.Rows[table.Rows.Count-1].ItemArray.First() + 1;
    newRow["Name"] = "なまえ";
    newRow["Age"] = 25;
    newRow["HomeTown"] = "奈良";
    table.Rows.Add(newRow);
}


VB.NET
Protected Sub Button2_Click(sender As Object, e As System.EventArgs) Handles Button2.Click
    Dim table As DataTable = TryCast(Me.WebDataGrid1.DataSource, DataTable)
    Dim newRow As DataRow = table.NewRow()
    newRow("ID") = CInt(table.Rows(table.Rows.Count - 1).ItemArray.First()) + 1
    newRow("Name") = "なまえ"
    newRow("Age") = 25
    newRow("HomeTown") = "奈良"
    table.Rows.Add(newRow)
End Sub

 

サンプルはこちらから
WebDataGrid_AddDeleteRowServer_CS.zip
WebDataGrid_AddDeleteRowServer_VB.zip

 

WebDataGrid 関連記事

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

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

 

弊社製品は機能制限なしのトライアル版もご用意しています。ASP.NET 高機能グリッドを是非お試し下さい。
Infragistics 製品トライアルダウンロード

Posted: 13 Jun 2014, 17:00
Filed under: ,

Comments

Yuki Mita said:

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

# June 13, 2014 4:46 AM
Anonymous comments are disabled