UltraWebGridで非同期更新を行うUIを作成する基礎

Infragistics NetAdvantageチュートリアル その3 - UltraWebGrid 2

「Infragistics NetAdvantage」を利用すると、高度なUIを簡単に構築でき、使い慣れた画面操作をユーザーに提供できます。今回は、UltraWebGridコントロールを使用した、クライアント側のプログラミング方法の基礎を紹介します。

はじめに

　インフラジスティックスが提供するInfragistics NetAdvantage製品は、マルチプラットフォームでWindows Forms、ASP.NET、そして、Windows Presentation Foundationに対応した商用アプリケーションユーザーインターフェースの構築をサポートするプレゼンテーションレイヤコンポーネント群であり、その高度なユーザーインターフェースコントロールは使い慣れた画面操作をユーザーに提供するサポートをします。

　今回は、UltraWebGridコントロールを使用した、クライアント側のプログラミング方法を紹介したいと思います。

対象読者

　Visual Basic 2005、Visual C# 2005を使ってプログラムを作ったことがある人。

必要な環境・コンポーネントのインストール

　必要な環境・コンポーネントのインストールについては、『高度なUIのグリッドを使ってAJAXの非同期データ更新を行う』を参考にしてください。

注

　今回はNetAdvantage for .NET (JP) 2007 Volume 1 CLR 2.0（7.1.20071.1055）を使用しています。もし異なるバージョンでサンプルを利用する場合は、Updateユーティリティでサンプルのバージョンを変更ください。

選択した行の値を非同期でテキストボックスに表示してみる

下準備

1. Webサイトの新規作成
まず新しいWebサイトを作成します。Visual Studio 2005のメニューから［新規作成］-［Webサイト］を選択すると表示されるダイアログボックスで、［ASP.NET Web サイト］を選択し、Webサイトの名前を入力して［OK］ボタンをクリックしてください。
図1 - Webサイトの新規作成

2. コントロールの配置
ツールボックスから、TextboxとインフラジスティックスのUltraWebGridコントロールをデザインペインにドラッグ＆ドロップします。UltraWebGridをドロップした際にデザイナが開きますが、そのまま［OK］ボタンをクリックしてください。
図2 - コントロールの配置

3. コードビハインドでデータバインド
次のようなコードを入力し、UltraWebGridコントロールにデータバインドしてください。
CSの場合

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.Add("ID", typeof(string));
    dt.Columns.Add("Name", typeof(string));
    for (int i = 0; i < 100; i++)
    {
        dt.Rows.Add(new object[] { "ID" + i.ToString(), "Name_"
            + i.ToString() });
    }
    this.UltraWebGrid1.DataSource = dt;
    this.UltraWebGrid1.DataBind();
}

VBの場合

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
    Handles Me.Load

    Dim dt As Data.DataTable = New Data.DataTable()
    dt.Columns.Add("ID", GetType(String))
    dt.Columns.Add("Name", GetType(String))

    Dim i As Int16
    For i = 0 To 100
        dt.Rows.Add(New Object() {"ID" + i.ToString(), "Name_" + i.ToString()})
    Next

    Me.UltraWebGrid1.DataSource = dt
    Me.UltraWebGrid1.DataBind()

End Sub

実装

　UltraWebGridコントロールには、クライアント側でのプログラミングを簡単にするプロパティが用意されています。

1. クライアント側イベントのコード挿入
まずUltraWebGridコントロールを選択します。［プロパティ］ウィンドウで［DisplayLayout］-［ClientSideEvents］の順でノードを展開すると、下図のように利用可能なイベントが表示され、それぞれに対してクライアント側のコードを挿入することができます。今回は選択した行の値をテキストボックスに表示させるようにしますので、AfterRowActivateHandlerというイベントを使用します。
AfterRowActivateHandlerというイベントが見つかったら、ドロップダウンで［新しいハンドラを追加…］を選択します。
図3 - クライアント側のハンドラを追加

選択すると、デフォルトの名前が入った状態でダイアログボックスがポップアップしますので、［OK］をクリックしてください。
図4 - クライアント側関数の追加ダイアログ

［OK］をクリックすると、自動的に次のようなコードが.aspxページに挿入されます。
クライアント側スクリプトの自動挿入

<script id="igClientScript" type="text/javascript">
<!--

function UltraWebGrid1_AfterRowActivateHandler(gridName, rowId) {
    //独自のイベントコードをここに追加します。
}
// -->
</script>

　
2. グリッド、セルのオブジェクトを取得
イベントに応じて異なりますが、通常引数にはグリッド名、行ID、セルIDなどが含まれています。例えば、今回のAfterRowActivateHandlerの場合、引数にはgridNameとrowIdが渡されています。つまり、グリッド自体を取得する場合は、

var grid = igtbl_getGridById(gridName);

行を取得する場合は、

var row = igtbl_getRowById(rowId);

となります。
　
また、各要素にはIDがあり、それによりオブジェクトを一意に識別するようになっています。例えば、4行目1列目のセルオブジェクトの場合、IDは「UltraWebGrid1_rc_3_0」となり、このオブジェクトを取得するには、

var cell1 = igtbl_getCellById("UltraWebGrid1_rc_3_0");

と記述します。
UltraWebGridユーティリティ関数の一覧

関数名	機能
igtbl_addNew	新しい行を指定したバンドに追加します。
igtbl_cancelPostBack	イベント ハンドラ内からの自動ポストバックをキャンセルします。
igtbl_doPostBack	WebGridのルーチンによって、サーバへのポストバックを強制します。
igtbl_getBandById	IDから、バンドのDOMオブジェクトを返します。
igtbl_getCellById	IDから、セルのDOMオブジェクトを返します。
igtbl_getChildElementById	渡されたIDから、ページ上のHTML要素を返します。
igtbl_getColumnById	IDから、列のDOMオブジェクトを返します。
igtbl_getDocumentElement	渡されたIDから、ページ上のHTML要素を返します。
igtbl_getElementById	渡されたIDから、ページ上のHTML要素を返します。
igtbl_getGridById	渡されたIDで表されるグリッドのDOMオブジェクトを返します。
igtbl_getLength	オブジェクトのプロパティの数をカウントし、カウントを返します。
igtbl_getRowById	IDからDOMの行オブジェクトを返します。
igtbl_needPostBack	グリッドにポストバックを強制します。

補足

　NetAdvantageのヘルプから上記のクライアント側オブジェクトモデル（CSOM）を確認したい場合は、以下のヘルプURLを参照ください（※折り返しを除いて入力してください）。

ms-help://INFRAGISTICS_NETJA71CLR2_HELP/NetAdvantage_NETJA71CLR2/
Web_NETJA71CLR2/WebElements/Web_Client_Side_Object_Model_CSOM_Reference_Guide.html

　なお、このヘルプURLはNetAdvantage for .NET (JP) 2007 Volume 1 CLR 2.0のURLです。異なるバージョンをお使いの場合は、URL内の「JA71CLR2」の部分をバージョンに合わせて変更ください。

図5 - NetAdvantage for .NETヘルプ画面