Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid テンプレート機能

グリッドにデータを表示するのは勿論ですが、単純にデータを表示するだけではなく、全く異なるコントロールをセルに埋め込む必要が生じることがあると思います。例えばセルに画像を埋め込みたい、行削除ボタンを追加したい、などなど・・・。

WebDataGrid ではテンプレート機能を備えており、セルなどの UI を柔軟にカスタマイズできるためこのような要件にも対応することができます!今回は特にお問い合わせの多い、セルにボタンを表示する例を用いてテンプレート機能をご紹介します。

 

1.データの用意

ASPX

        <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" 
            AutoGenerateColumns="false" StyleSetName="Office2010Blue">
            <Columns>
                <ig:BoundDataField Key="ID" Header-Text="ID" />
                <ig:BoundDataField Key="Name" Header-Text="名前" />
                <ig:BoundDataField Key="Age" Header-Text="年齢" />
                <ig:BoundDataField Key="HomeTown" Header-Text="出身地" />
            </Columns>
        </ig:WebDataGrid>

CS

    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"];
    }

 

2.テンプレートの実装

テンプレートは ASPX とコードビハインドの両方で実装することができます。今回は ASPX で定義していきます。TemplateDataField と ItemTemplate をそれぞれ定義し、更に内側に表示したいコントロールを配置していきます。ここでは Button コントロールを配置します。

            <Columns>
                <ig:BoundDataField Key="ID" Header-Text="ID" />
                <ig:BoundDataField Key="Name" Header-Text="名前" />
                <ig:BoundDataField Key="Age" Header-Text="年齢" />
                <ig:BoundDataField Key="HomeTown" Header-Text="出身地" />
                <ig:TemplateDataField Key="Button" Header-Text="ボタン列">
                    <ItemTemplate>
                        <asp:Button runat="server" Text="選択" />
                    </ItemTemplate>
                </ig:TemplateDataField>
            </Columns>

 

ItemTemplate 内に配置したボタンが表示されました!

WebDataGrid テンプレート

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


3.イベントハンドリング

続いてテンプレート列にあるセルをクリックし、クリックされた行の情報をサーバーサイドで確認してみます。WebDataGrid ではテンプレート内部で使われているコントロールがポストバックを行うイベントを一括してハンドルする、ItemCommand イベントを用意しています。

WebDataGrid の ItemCommand イベントを登録し、Button コントロールの CommandArgument プロパティに行の ID を設定します。(同時に DataBinding を用いて Button の Text プロパティに Age 列の値を設定しています。)

        <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="380px" Width="400px" 
            AutoGenerateColumns="false" StyleSetName="Office2010Blue" 
            onitemcommand="WebDataGrid1_ItemCommand">
            <Columns>
                <ig:BoundDataField Key="ID" Header-Text="ID" />
                <ig:BoundDataField Key="Name" Header-Text="名前" />
                <ig:BoundDataField Key="Age" Header-Text="年齢" />
                <ig:BoundDataField Key="HomeTown" Header-Text="出身地" />
                <ig:TemplateDataField Key="Button" Header-Text="ボタン列">
                    <ItemTemplate>
                        <asp:Button
                            runat="server"
                            Text='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Age") %>'
                            CommandArgument='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "ID") %>' />
                    </ItemTemplate>
                </ig:TemplateDataField>
            </Columns>
        </ig:WebDataGrid>
 

ボタンクリック時に発生するItemCommand イベントの e.ComandArgument プロパティから行の ID を取得することができます。

    protected void WebDataGrid1_ItemCommand(object sender, Infragistics.Web.UI.GridControls.HandleCommandEventArgs e)
    {
        Debug.WriteLine("行の情報:" + e.CommandArgument);
    }

 

テンプレートにはどのようなユーザーコントロールでも配置することができますので、ボタン以外にもハイパーリンクやラジオボタンなども利用できます。もちろん独自のユーザーコントロールを利用することもできますのでデータ表現の自由度が高まります!また、本稿では紹介できなかったのですが、ヘッダやフッターのテンプレート利用は以下オンラインサンプルにもあります。是非一度ご覧ください!


今回のサンプル
WebDataGrid_Template_CS.zip

WebDataGrid_Template_VB.zip



オンラインサンプル

セルと列テンプレートのテンプレートの使用
ヘッダーとフッターのテンプレート


オンラインヘルプ

項目テンプレートの使用
テンプレート
列テンプレート
ItemCommand イベント  


関連情報

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

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

 

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

 

Posted: 21 May 2013, 18:00
Filed under: , ,

Comments

Yuki Mita said:

WebDataGrid ではクライアントサイド、サーバーサイドの両方で選択セルや選択行の情報を取得することができます。今回はセルや行が選択された際にクライアントサイドで情報取得する方法をご紹介します。

# July 10, 2013 2:14 AM

Yuki Mita said:

NetAdvantage for ASP.NET でのクライアントサイドプログラミング Tips です。JavaScript コーディングでの便利機能をご紹介します。JavaScript での開発を始める際に是非ご一読いただければと思います。

# July 12, 2013 2:22 AM

Yuki Mita said:

様々なシナリオにおいて、クライアントサイドでグリッドの行やセル、列を取得する必要が生じます。今回は JavaScript でこれら情報を取得する方法をまとめました。 WebDataGrid にはこれらオブジェクトを取得するにあたり、インデクサや列キーなどを利用することができる

# July 17, 2013 12:02 AM

Yuki Mita said:

グリッド上でクリックやダブルクリック時に何らかの処理を行うというシナリオはよくあるかと思います。 WebDataGrid ではクライアントサイドイベントとして Click イベント 、 DoubleClick

# July 19, 2013 4:26 AM

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:56 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