ここまではデザインの設定ですので、必要がなければデフォルトのままでも構いません。続いて、AJAX関連の設定を行っていきます。まず、プロパティウィンドウからBrowserプロパティの値を「Xml」に設定します。もちろん、これらの設定は、クイックデザインで行っても構いません。続いて、DisplayLayoutオブジェクトを選択し、LoadOnDemandプロパティを「Xml」に設定します。最後に、同じくDispalyLayoutオブジェクトのXmlLoadOnDemandTypeプロパティを「Background」に設定します。
最後のXmlLoadOnDemandTypeプロパティの設定は、グリッドがスクロールするときのデータ取得方法についての設定で、スクロールバーが最後の位置に移ったときに取得する「同期モード = Synchronous」、必要なときにデータを小分けにして取得する「小分けモード = Portioned」、データを仮想的に扱う「バーチャルモード = Virtual」、裏側で順次データを取得し続ける「バックグラウンドモード = Background」の四種類があります。今回は、バックグラウンドモードを利用してみました。
一つ設定を忘れていました。今回はデータを階層的に表示させるため、DisplayLayoutオブジェクトのViewTypeプロパティを「Hierarchical（階層）」に設定します。これで、プロパティの設定はひと通り完了となります。
ただし、このままでは、グリッドに表示するためのデータがないため、アプリケーションを実行しても空のグリッドが表示されるだけです。そこで、リスト1、2のようにInitializeDataSourceイベントのサーバー側イベントハンドラを追加します。通常は、このタイミングでデータベースに接続してデータを取得、といったことを行うことになるでしょう。サンプルプログラムでは、階層を持つ200件のデータを生成し、データセットに格納したあと、そのデータセットをグリッドにバインドしています。
Private Sub UltraWebGrid1_InitializeDataSource( _ ByVal sender As Object, _ ByVal e As Infragistics.WebUI.UltraWebGrid.UltraGridEventArgs _ ) Handles UltraWebGrid1.InitializeDataSource Dim ds As DataSet = New DataSet() Dim dt2 As DataTable = New DataTable() dt2.Columns.Add("PID", GetType(Integer)) dt2.Columns.Add("ID", GetType(Integer)) Dim dt As DataTable = New DataTable() dt.Columns.Add("ID", GetType(Integer)) dt.Columns.Add("Name", GetType(String)) dt.Columns.Add("RndBool", GetType(Boolean)) ds.Tables.Add(dt) ds.Tables.Add(dt2) ds.Relations.Add(dt.Columns(0), dt2.Columns(0)) Dim i As Integer Dim j As Integer For i = 0 To 200 dt.Rows.Add( _ New Object() {i, "Row " + i.ToString(), i Mod 2 = 0}) For j = 0 To 2 dt2.Rows.Add(New Object() {i, j}) Next Next Me.UltraWebGrid1.DataSource = ds End Sub
protected void UltraWebGrid1_InitializeDataSource( object sender, Infragistics.WebUI.UltraWebGrid.UltraGridEventArgs e) { DataSet ds = new DataSet(); DataTable dt2 = new DataTable(); dt2.Columns.Add("PID", typeof(int)); dt2.Columns.Add("ID", typeof(int)); DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("Name", typeof(string)); dt.Columns.Add("RndBool", typeof(bool)); ds.Tables.Add(dt); ds.Tables.Add(dt2); ds.Relations.Add(dt.Columns[0], dt2.Columns[0]); for (int i = 0; i < 200; i++) { dt.Rows.Add( new object[] { i, "Row " + i.ToString(), i % 2 == 0 }); for (int j = 0; j < 2; j++) dt2.Rows.Add(new object[] { i, j }); } this.UltraWebGrid1.DataSource = ds; }
なお、Visual Basicでは、Handles句のおかげで、コンポーネントとイベントハンドラの関連付けが自動的に行われます。しかし、C#ではこのイベントハンドラの関連付けは、自前で行う必要があります。すなわち、.aspxファイルを開きソースを表示させた状態で、コンポーネントのタグに次のようにイベントハンドラの記述を追加します（リスト3）。
<igtbl:UltraWebGrid ID="UltraWebGrid1" runat="server" Browser="Xml" Width="445px" Height="200px" OnInitializeDataSource="UltraWebGrid1_InitializeDataSource" ← ココ OnXmlHTTPRequest="UltraWebGrid1_XmlHTTPRequest"> <Bands> 以下略
続いて、アプリケーションの動作とは直接関係ありませんが、AJAX機能がどのように実行されているかを確認するために、XmlHTTPRequestイベントハンドラに（リスト4、5）のプログラムコードを記述します。必要がなければ、このプログラムコードは記述しなくても構いません。
Protected Sub UltraWebGrid1_XmlHTTPRequest( _ ByVal sender As Object, _ ByVal e As Infragistics.WebUI.UltraWebGrid.XmlHTTPRequestEventArgs _ ) Handles UltraWebGrid1.XmlHTTPRequest System.Diagnostics.Debug.WriteLine( _ String.Format("取得対象の行：{0}", _ e.RowNo)) End Sub
protected void UltraWebGrid1_XmlHTTPRequest( object sender, Infragistics.WebUI.UltraWebGrid.XmlHTTPRequestEventArgs e) { System.Diagnostics.Debug.WriteLine( String.Format("取得対象の行：{0}", e.RowNo)); }
コンポーネントのプロパティ設定、プログラムコードの記述がすべて終わりましたので、この辺でアプリケーションを実行してみましょう（図6）。アプリケーションを実行すると、ブラウザにはグリッドが表示され、スクロールしたり、階層データを表示することができます。この表面的な部分だけをみると、単なるグリッドとさほど変わるものではありませんが、内部的には大きな違いがあるのです。
最初の段階では、すべてのデータがグリッドに読み込まれているわけではありません。デバッグ表示で確認してみましょう。［出力］ウィンドウには、XmlHTTPRequestイベントでのデバッグ表示が出力されています（図7）。アプリケーションを実行すると、自動的にデータが50行ずつ取得されていくのが分かります。これは、XmlLoadOnDemandTypeプロパティを「バックグラウンド」に設定したため、定期的にデータの取得処理が行われていることを示しています。また、階層データを表示するときも、同様にデータの取得処理が行われています。
いずれの場合も、ポストバックはまったく発生せず、グリッドの中だけで処理が完結しています。これこそがAJAXの真骨頂と言える部分です。AJAXと言えば、クライアント側でJavaScriptを記述しなくてはならないなど、かなり面倒な作業が必要でした。確かに高機能ではありますが、それを実装するためには多くの困難が待ち受けていたのも事実です。UltraWebGridを利用すれば、その辺りの面倒な処理がほとんど不要になります。いくつかのプロパティを設定し、ちょっとしたプログラムコードを記述するだけで、簡単にAJAX機能を実現することができてしまいました。なお、データの取得方法には、四種類の方法が用意されています。状況に応じて、それぞれ使い分ければよいでしょう。
まとめ
今回は、インフラジスティックス社のコンポーネントの中から、UltraWebGridのAJAX機能を利用したグリッドの非同期更新についてみてきました。UltraWebGridをはじめとするインフラジスティックス社のコンポーネントの魅力は、AJAXだけにとどまりません。その高い表現力を活用すれば、今までにないWebアプリケーションが開発できると思います。ぜひ一度、実際に手にとって試してみてください。
