7．クライアント側関数の挿入
クライアント側イベントのコードですが、WebComboの項目を選択した時に発生するAfterSelectChangeイベントと、WebUltraGridのInitializeLayoutイベントでグリッドを取得します。
まずUltraWebGridコントロールを選択し、［プロパティ］ウィンドウで［DisplayLayout］-［ClientSideEvents］の順でノードを展開します。
その中から今回使用する［InitializeLayout］のドロップダウンで［新しいハンドラを追加…］を選択します。選択すると、デフォルトの名前が入ったダイアログボックスがポップアップするので、［OK］ボタンをクリックしてください。
すると、次のようにコードが挿入されるので、具体的な処理を入力していきます。
<script id="igClientScript" type="text/javascript"> <!-- function UltraWebGrid1_InitializeLayoutHandler(gridName){ //独自のイベントコードをここに追加します。 } // --> </script>
他でもグリッドが参照できるように初回のレイアウトハンドラでグリッドを取得しておきます。
//Gridの参照作成
var grid;
function UltraWebGrid1_InitializeLayoutHandler(gridName){
grid = igtbl_getGridById(gridName);
}
次にWebComboコントロールを選択し、今度は［プロパティ］ウィンドウで［ClientSideEvents］を展開します。
その中から今回使用する［AfterSelectChange］のドロップダウンで［新しいハンドラを追加…］を選択し、追加します。
すると、次のようなコードが挿入されます。
function WebCombo1_AfterSelectChange(webComboId){
//独自のイベントコードをここに追加します。
}
上記の関数内に、次のような処理を記述します。
function WebCombo1_AfterSelectChange(webComboId){
//選択肢が変更された後、クライアントサイドのコードでCustomerIDを取得
var webCombo = igcmbo_getComboById(webComboId);
var customerID = webCombo.getDataValue();
//CustomのXMLHTTPRequestを発生させて、
//必要なデータを渡しデータをフィルタリング
grid.invokeXmlHttpRequest(grid.eReqType.Custom, null, customerID);
//行のリフレッシュをリクエストしてグリッドを更新
grid.invokeXmlHttpRequest(grid.eReqType. Refresh, null, null);
//※以前のバージョンでeReqTypeにRefreshがない場合は
//次のようにすることもできます。
//grid.invokeXmlHttpRequest(grid.eReqType.Page, grid, 1);
}
ms-help://INFRAGISTICS_NETJA71CLR2_HELP/NetAdvantage_NETJA71CLR2/Web_NETJA71CLR2/WebElements/WebGrid_Object_CSOM.html
Web_NETJA71CLR2/WebElements/WebGrid_Object_CSOM.html
xmlHttpRequestの発生を強制します。たとえば、oGridをグリッドオブジェクトとすると、このメソッドは次のように使用できます。
oGrid.invokeXmlHttpRequest(oGrid.eReqType.Custom,null,"my data here");
| type | |
| 数値。実行するアウトオブバンドのコールバックのタイプ。整数を指定する必要があります。認識可能な値については、UltraWebGrid.eRegType 列挙体を参照してください。 | |
| object | |
| オブジェクト。要求タイプがオブジェクトを扱う場合は、ここで渡します（例：ChildRows には行オブジェクトが必要）。このパラメータを使用しない要求タイプもあります。指定するオブジェクトは要求タイプごとに異なります。 | |
| eReqType.UpdateCell | 更新されるセル。 |
| eReqType.AddNewRow | 新しい行が追加される行コレクション。 |
| eReqType.Sort | ソートされる行コレクション。 |
| eReqType.ChildRows | 子行が要求される行。 |
| eReqType.DeleteRow | 削除される行。 |
| eReqType.UpdateRow | 更新される行。 |
| eReqType.Filter | フィルタが適用される行コレクション。 |
| eReqType.FilterDropDownFill | フィルタが適用される行コレクション。 |
| eReqType.Refresh | オプション。最上位の行コレクションで何も渡されないと想定される場合。そうでない場合は、行コレクションまたは行が想定されます。行コレクションが渡されれば、このコレクションは更新され、行が子に渡されれば、行が更新されます。 |
| data | |
| 型の制限はありません。文字列に変換されます。要求に対してデータが必要である場合は、ここで渡す必要があります。 | |
| eReqType.UpdateCell | 新しいセルの値。 |
| eReqType.Filter | フィルタが適用される列オブジェクト。 |
| eReqType.FilterDropDownFill | フィルタが適用される列オブジェクト。 |
| eReqType.Custom | 開発者によって定義されるカスタム データ。 |
| 値 | 説明 |
| AddNewRow | 新しく追加された行に基づくサーバ側の AddRow 処理の要求。 |
| ChildRows | 子行の要求。 |
| Custom | Web Grid による XMLHTTPRequest の実行の要求。この要求は、サーバ側の XMLHTTPRequest イベントを発生させるだけです。 |
| DeleteRow | クライアントから削除された行に基づくサーバ側の削除処理の要求。 |
| Filter | データのサーバ側フィルタを処理するための要求。 |
| FilterDrop DownFill | 指定された列に対してドロップダウン フィルタを追加するための要求。 |
| MoreRows | バンド 0 の次のバッチ行の要求。 |
| None | 要求なし。 |
| Page | グリッドのページの変更の要求。 |
| Refresh | 行コレクションの更新の要求。 |
| Scroll | 特定の場所にグリッドをスクロールする要求。 |
| Sort | 現在のソート行に基づいてサーバでソートを実行し、ソート済みデータの最初の RowsRange を返す処理の要求。 |
| UpdateCell | 直前に更新されたセルのデータに基づくサーバ側の UpdateCell 処理の要求。 |
| UpdateRow | 直前に更新された行のデータに基づくサーバ側の UpdateRow 処理の要求。 |
eReqType列挙体を確認したい場合は、以下のヘルプURLを参照ください（※折り返しを除いて入力してください）。ms-help://INFRAGISTICS_NETJA71CLR2_HELP/NetAdvantage_NETJA71CLR2/
8．実行
［F5］でプロジェクトを実行し、WebComboの値を選択してください。選択したIDに基づいて注文データがグリッドに非同期で表示されるようになります。このCustomerIDをカスタマイズすることでさまざまな用途でご利用いただけると思います。
9．デバッグ
デバッグ方法については、前回の『UltraWebGridで非同期更新を行うUIを作成する基礎』を参照いただければと思います。
おわりに
今回は、UltraWebGridのAJAX機能をカスタマイズする方法を紹介しました。NetAdvantage for .NET (JP) 2007 Volume 1 CLR 2.0では、さらに多くのAJAX機能を活用できるようになっています。
WebAsyncRefreshPanelやWebResizingExtenderなどの新しいAJAX対応コンポーネントの追加、また既存コンポーネントへ各AJAX機能（WebScheduleのスマートコールバック、WebComboのページングやインクリメント検索、WebCombo、WebTree、WebGridのロードオンデマンド）の追加を行っています。
インフラジスティックスのコンポーネントによって、アプリケーションのユーザーエクスペリエンスをさらに向上していただければ幸いです。 また、現在は英語のページのみになり恐縮ですが、オンラインでのサンプルページや各種チュートリアル、また問題点などを検索できるページもありますので、一度参照いただければと思います。
