ASP.NETでユーザにやさしい高機能なUIを持つ表を実装する

Infragistics NetAdvantageチュートリアル その2 - UltraWebGridのさまざまな機能

行テンプレート

行テンプレート（WebGrid/RowEditTemplates/rowedittemplates.aspx）

　これまで見てきた2つのサンプルプログラムでは、グリッドに対して直接入力を行いました。それも一つの方法ですが、いっそのこと「グリッドは表示用」と割り切って、入力はポップアップウィンドウに任せる、といった手法もあります。そのようなときに有効なのが「行テンプレート」の機能です。

　サンプルプログラムを見ると、RowEditTemplateということで、入力を行うためのHTML要素が指定されています。グリッドの行をクリックすると、この行テンプレートが表示され、あたかもポップアップウィンドウのように入力できるというわけです（図3）。

図3 - 行テンプレート

行テンプレート：カスタム定義（WebGrid/RowEditTemplatesAdv/rowedittemplatesadv.aspx）

　先ほどの行テンプレートをさらに拡張したのがこのサンプルです（図4）。行を展開すると、編集できる子の行が表示されます。ここで子の行をクリックすると、行テンプレートが表示され、入力を行うことが可能です。入力された値は、クライアント側のスクリプトを利用して、子の行に設定されます。クライアントサイドスクリプトですから、当然、サーバとの間にやり取りは発生せず、サクサクと入力できます。

図4 - 行テンプレート-カスタム定義

行テンプレート：ユーザーコントロール（WebGrid/RowTemplates/rowtemplates.aspx）

　行テンプレートとして利用できるのは、HTMLだけではありません。UltraWebGridの行テンプレート機能では、ASP.NETにおけるユーザーコントロール、すなわち、.ascxを利用することもできます。HTMLはしょせんHTMLであり、ASP.NETのコンポーネントを使った便利さに比べると、見劣りするのは否めません。このサンプルプログラム（図5）では、行テンプレートとして、別に作成しておいた編集用のユーザーコントロールを利用しています。

図5 - 行テンプレート-ユーザーコントロール

　ユーザーコントロールでは、その中にASP.NETのコンポーネントを配置して、サーバ側スクリプトを記述するなど、細やかな制御を行うことができます。言い方を変えれば、好きなことができるというわけです。コントロール単体での機能には限りがありますが、このようにコンポーネント・ユーザーコントロールなどを組み合わせることで、さらなる表現力・高機能を引き出すことができるでしょう。また、そのために必要なプログラムコードは、リスト1、2のようにとても簡単なものとなっています。

リスト1 - ユーザーコントロールを行テンプレートとして利用する（C#）

if(!IsPostBack)
{
  // テンプレートを作成して追加します。
  ITemplate template;
  template = Page.LoadTemplate("rowtemplate.ascx");
  UltraWebGrid1.Bands[0].RowEditTemplate = template;
  (略)
}

リスト2 - ユーザーコントロールを行テンプレートとして利用する（VB）

If Not IsPostBack Then
  ' テンプレートを作成して追加します。
  Dim template As ITemplate
  template = Page.LoadTemplate("rowtemplate.ascx")
  UltraWebGrid1.Bands(0).RowEditTemplate = template
  (略)
End If