順に解説します。
（1）CSSとJavaScriptの参照
「必要な環境」で記載した場所にスクリプトファイルやCSSファイルがあるので、それらをサンプルファイルのフォルダ上に展開し、HTMLページからインポートします。
（2）データスキーマの作成
DataSchemaクラスでまず、元のデータからどの部分のどの情報を取得するかというスキーマを定義しておきます。今回は、取得するoDataのデータから名前、公開年、概要に絞ってスキーマを作成します。DataSchemaクラスの第1パラメータにスキーマの型を、第2パラメータのフィールドにデータフィールド名を、それぞれ指定します（例：{name: "データフィールド名"}）。
第3パラメータには、データを取得するためのパスを指定します。サンプルでもそうですが、oDataやWCFの場合、JSONで値を取得すると、dがフィールド値となります。実際にoDataを取得した例が図7です。一番最初にdが記載されていることが確認できます。
（3）データソースのオブジェクト生成
igDataSourceのDataSourceクラスはデータソースからデータを取得するのに利用します。一般的な構文は、以下のとおりです。
var ds = new $.ig.DataSource({ オプション名: 値, ... }).dataBind();
$.ig.DataSourceメソッドには、以下のようなオプションを指定できます。
| オプション | 概要 |
| type* | データソースの型 |
| dataSource* | データソースオブジェクト |
| callback | データ取得時に実行されるコールバック関数 |
| schema | データのスキーマを指定（DataSchemaクラス） |
| responseDataKey | データレコードのパスを指定 |
今回のサンプルでは、外部のoDataからデータを取得するので、typeオプションにremoteUrlを、データソースはoDataのURLを、スキーマには（2）で設定したスキーマを指定しています。パラメータの設定後、dataBindメソッドを呼び出すことで、データが取り込まれます。
ここまでがigDataSourceを利用したデータ管理の部分です。以降はigGridの機能です。
（4）各種設定やデータソースを設定し、#iggridにグリッドを生成
igGridメソッドは高機能なグリッドを生成します。一般的な構文は、以下のとおりです。
$("Gridを格納するテーブル要素").igGrid({ オプション名: 値, ....});
以下は、igGridメソッドで利用できるオプションです。
| オプション | 概要 |
| caption | グリッドのタイトル |
| columns* | 列に関する情報をオブジェクト配列で指定（headerText：ヘッダーの表示名、key：表示する列名など） |
| dataSource* | データソースオブジェクトを指定 |
| scrollbars | スクロールバー表示の有無を指定（bool型） |
| virtualization | 仮想化機能の利用の有無を指定（bool型） |
| height | 高さを指定。virtualizationを使用する場合は必須項目 |
| features | ページング、ソート、セレクションなど、グリッドに持たせたい機能を個別に指定 |
今回の例では、id="iggrid"であるテーブルに対して、igGridメソッドを適用し、グリッドを生成しています。columnsオプションでグリッド列のヘッダーテキストと表示データ、列幅をそれぞれ指定しています。
dataSourceオプションには直接、WCFやJSONなどのデータソースを指定することもできます。この場合、スキーマ定義が別途必要です。今回はigDataSourceでスキーマ定義などを実施しているため、データソースオブジェクトとしてigDataSourceオブジェクトを指定するだけでOKです。
featuresオプションでは、その他のグリッド機能を定義します。1つめはページング（Paging）機能です。nameで、ページング機能を有効化し、pageSizeで1ページ辺りに表示するレコードを指定しています。typeは、ページングの処理をクライアントサイドで実行することを表しています（他にはremoteurlがありますが、サーバーに要求を送信する分、パフォーマンスは劣化します）。また、ソーティング（Sorting）、行選択（Selection）、フィルタリング（Filtering）を有効化します。
igDataSourceとigGridの基本的な使い方は以上です。実行すると図2～6の動作を確認できます。
NetAdvantage for jQueryでは、膨大な量のデータを読み込む際に、画面に表示されている部分のオブジェクトのみを生成する「仮想化」テクノロジーが多く使われています。igGridでは、virtualizationオプションをtrueにすることで、グリッドで表示されている部分のみ描画される仮想化機能が使用できます。
仮想化機能を利用すると、レコードの分だけDOMを生成するのではなく、既存のDOM要素を再利用するため、メモリやCPUのパフォーマンスが改善されます（図8）。
virtualizationオプションではheightオプションの指定が必須です。そして、heightの値により一度に表示される値の量が変わるため、パフォーマンスが変動します。多くの値をが表示するようにした場合には、僅かではありますが、パフォーマンスに影響が出る可能性がありますので注意してください。
まとめ
今回はjQueryの拡張コンポーネントNetAdvantage for jQueryの中でも目玉と言えるigDataSourceとigGridにフォーカスを当てて解説しました。サンプルソースから、非常に少ない手間で、高機能なコンポーネントの利用ができることが確認いただけたのではないでしょうか。また、今回は触れていませんが、ほとんどのコンポーネントがASP.NET MVCのヘルパーとして利用できます。プロジェクトで採用する場合はヘルパーの利用も検討してみるといいでしょう。
業務アプリケーション開発や掲示板やフォーラムの一覧表示などでグリッドはまだまだ需要があるコンポーネントです。軽量で高速、かつ高機能なコンポーネントを利用したい場合はNetAdvantage for jQueryを利用してみてはいかがでしょうか。
