CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

「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サイトの新規作成
  2. まず新しいWebサイトを作成します。Visual Studio 2005のメニューから[新規作成]-[Webサイト]を選択すると表示されるダイアログボックスで、[ASP.NET Web サイト]を選択し、Webサイトの名前を入力して[OK]ボタンをクリックしてください。
    図1 - Webサイトの新規作成
    図1 - Webサイトの新規作成
  3. コントロールの配置
  4. ツールボックスから、TextboxとインフラジスティックスのUltraWebGridコントロールをデザインペインにドラッグ&ドロップします。UltraWebGridをドロップした際にデザイナが開きますが、そのまま[OK]ボタンをクリックしてください。
    図2 - コントロールの配置
    図2 - コントロールの配置
  5. コードビハインドでデータバインド
  6. 次のようなコードを入力し、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. クライアント側イベントのコード挿入
  2. まずUltraWebGridコントロールを選択します。[プロパティ]ウィンドウで[DisplayLayout]-[ClientSideEvents]の順でノードを展開すると、下図のように利用可能なイベントが表示され、それぞれに対してクライアント側のコードを挿入することができます。今回は選択した行の値をテキストボックスに表示させるようにしますので、AfterRowActivateHandlerというイベントを使用します。
    AfterRowActivateHandlerというイベントが見つかったら、ドロップダウンで[新しいハンドラを追加…]を選択します。
    図3 - クライアント側のハンドラを追加
    図3 - クライアント側のハンドラを追加
    選択すると、デフォルトの名前が入った状態でダイアログボックスがポップアップしますので、[OK]をクリックしてください。
    図4 - クライアント側関数の追加ダイアログ
    図4 - クライアント側関数の追加ダイアログ
    [OK]をクリックすると、自動的に次のようなコードが.aspxページに挿入されます。
    クライアント側スクリプトの自動挿入
    <script id="igClientScript" type="text/javascript">
    <!--
    
    function UltraWebGrid1_AfterRowActivateHandler(gridName, rowId) {
        //独自のイベントコードをここに追加します。
    }
    // -->
    </script>
    
     
  3. グリッド、セルのオブジェクトを取得
  4. イベントに応じて異なりますが、通常引数にはグリッド名、行ID、セルIDなどが含まれています。例えば、今回のAfterRowActivateHandlerの場合、引数にはgridNamerowIdが渡されています。つまり、グリッド自体を取得する場合は、
    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_doPostBackWebGridのルーチンによって、サーバへのポストバックを強制します。
    igtbl_getBandByIdIDから、バンドのDOMオブジェクトを返します。
    igtbl_getCellByIdIDから、セルのDOMオブジェクトを返します。
    igtbl_getChildElementById渡されたIDから、ページ上のHTML要素を返します。
    igtbl_getColumnByIdIDから、列のDOMオブジェクトを返します。
    igtbl_getDocumentElement渡されたIDから、ページ上のHTML要素を返します。
    igtbl_getElementById渡されたIDから、ページ上のHTML要素を返します。
    igtbl_getGridById渡されたIDで表されるグリッドのDOMオブジェクトを返します。
    igtbl_getLengthオブジェクトのプロパティの数をカウントし、カウントを返します。
    igtbl_getRowByIdIDから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ヘルプ画面
図5 - NetAdvantage for .NETヘルプ画面

  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5