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

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

3. 取得した値を操作
2.で取得した行のいずれかのセルの値をテキストボックスに表示する場合、セルのキーをまず決定しオブジェクトを取得する必要があります。今回は選択した行のIDをテキストボックスに表示しますのでセルのキーにIDを設定し、セルオブジェクトを取得して値を取得します。コードは次のようになります。

function UltraWebGrid1_AfterRowActivateHandler(gridName, rowId){
    var grid = igtbl_getGridById(gridName);
    var row = igtbl_getRowById(rowId);
    var cell = row.getCellFromKey("ID");
    var textbox = igtbl_getElementById("TextBox1");
    textbox.innerText=cell.getValue();
}

注

　上記以外にもさまざまな関数やプロパティがありますので、要件に合わせて選択いただければと思います。

4. 実行
［F5］で上記のコードを実行し、どこかの行を選択してみてください。次のように選択した行のIDの値がテキストボックスに表示されます。
図6 - 実行結果

　
5. デバッグ
オブジェクトの中を確認したい場合は、debugger;ステートメントを使用してください。デバッグの手順は次のとおりです。
　
1. IEのメニューから、［ツール］-［インターネットオプション］を選択し、［詳細設定］タブで、ブラウズの［スクリプトのデバッグを使用しない］のチェックを外します。
図7.1 - デバッグ手順1

2. スクリプト内にdebugger;ステートメントを挿入します。
図7.2 - デバッグ手順2

3. スクリプト実行時に、次のようにデバッガポイントで停止するようになるので、マウスでオブジェクトをポイントするか、クイックウォッチに値を追加してチェックしてみてください。詳細については、マイクロソフトのページを参照ください。
図7.3 - デバッグ手順3

おわりに

　今回のUltraWebGridコントロールを利用したクライアントサイドの実装は、かなり基礎的な内容でしたが、ヘルプでもなかなか見つけにくい部分のため、ぜひこの機会に知っていただければと思い、紹介させていただきました。

　続編では、『高度なUIのグリッドを使ってAJAXの非同期データ更新を行う』でも紹介したロードオンデマンドの機能を実装した時のクライアント側プログラミングについて解説する予定です。

　サーバとクライアントの両側からインフラジスティックスのコントロールをご利用いただくと、より高機能で美しいUIを持ったアプリケーションを開発していただけると思います。まずはお試し頂き、ご体験いただければ幸いです。