NetAdvantage for jQuery の グリッドコントロール、igGrid の入門編です。

2. jQuery グリッド:
igGrid 入門編
セッションレベル : 200 – Basic
Daizen Ikehara : Marketing & Developer Evangelist
dikehara@infragistics.com
Twitter @Neri78

3. アジェンダ
1 / NetAdvantage for jQuery / igGrid 概要
2 / Infragistics Loader
3 / igGrid : データ表示
4 / igGrid : 機能セットと有効化
5 / igGrid : イベントハンドリング
6 / まとめ、リソース

4. 1.
NetAdvantage
for jQuery
igGrid
概要

5. NetAdvantage シリーズ
Web / RIA Reporting
Win / Rich Mobile
Client
NetAdvantage

6.  高パフォーマンス
 HTML4 + 5
Jquery UI
 豊富な高機能
ベース コント UI ウィジェット
 グリッド
ロール  チャート
 ツリー
jQuery / jQuery UI /  マップ (CTP)
jQuery Mobile を
ベースに独自 UI, 機能  スタイル サポート
を提供
 ASP.NET MVC
ラッパー提供
 jQuery Mobile 対応
UI ウィジェット

7. igGrid
• 軽量化・仮想化
された
高パフォーマンス
グリッド
• 階層表示機能
• フィルタリング
• グループ化
• 集計
LOB (業務用）
アプリケーションに
対応

8. igGrid:
HTML5, CSS3,
対応状況
HTML5 マークアップ 未使用
HTML5 API 未使用
CSS3 スタイリング/ グリッド更新中における
アニメーション アニメーション効果
旧ブラウザーでの制限 アニメーションが
表示されない
ただし、全ての機能を
実行可能

9. 2.
Infragistics
Loader

10.  jQuery / jQuery UI を利用する場合は
スクリプト ファイル、CSS ファイルの参照が必要
JS ライブラリー
利用時のリソース参照
 NetAdvantage for jQuery の関連ファイルは膨大

11.  Infragistics Loader を利用することで関連リソース
の参照、読み込みを自動化
Infragistics Loader 使用前
使用後

12.  Infragistics Loader の初期化
<script type="text/javascript">
// igLoader の読み込み
Infragistics Loader $.ig.loader({
からの呼び出し方法 scriptPath: 'Scripts/IG',
cssPath: 'Content/IG'
});
</script>
 リソース指定をし、初期化する場合
<script type="text/javascript">
// igLoader の読み込み
$.ig.loader({ 読み込み
scriptPath: 'Scripts/IG', リソース
cssPath: 'Content/IG',
resources: 'igGrid.*',
ready: function () {
// Do something
}
}); コンポーネント
</script> 呼び出しなどの処理

13. 3.
igGrid:
データ表示

14.  対応データ形式

15. データ ソース指定
// グリッドの呼び出し
 データソース、列指定 $("#grid1").igGrid({
dataSource: products,
columns: [
{
headerText: "Product ID",
key: "ProductID",
dataType: "number"
},
{
headerText: "Product Name",
key: "Name",
列指定: dataType: "string"
autoGenerateColumns を },
true とし、グリッドに {
作成させることも可能 headerText: "Product Number",
列のデータ型:
key: "ProductNumber",
number, string, bool, date
dataType: "string"
},
]
});

16. igGrid データ バインディング
DEMO

17. 4.
igGrid:
機能セットと
有効化

18.  ビルトイン機能
 igGrid 機能 並べ替え（ソート） 選択(セル、行) 列の非表示
“Sorting” “Selection” “Hiding”
グループ化 ツールチップ 列集計
“GroupBy” “ToolTips” “Summaries”
行セレクター 列テンプレート フィルタリング
“RowSelectors” (Column “Filtering”
オブジェクト
内で定義)
ページング 列サイズ変更 更新（編集、追
“Paging” “Resiging” 加、削除)
“Updating”
 機能 API
http://help.infragistics.com/jQuery/2012.1/

19.  機能 API
 機能API http://help.infragistics.com/jQuery/2012.1/

20.  features コレクションで機能を宣言
 機能の有効化
// グリッドの呼び出し
$("#grid1").igGrid({
dataSource: products,
…
features: [
{
name: 'Sorting',
mode: 'multi'
},
{
name: 'Hiding'
}
]
});

21. igGrid 機能の有効化
DEMO

22. 5.
igGrid:
イベント
ハンドリング

23.  ビルトイン機能
 イベントハンドリング 並べ替え（ソート） 選択(セル、行) 列の非表示
GroupBy ツールチップ 列集計
行セレクター 列テンプレート フィルタリング
ページング 列サイズ変更 編集
igGrid そのもの、あるいは上記機能において
各種イベントが用意されている。
例:
ColumnSorting
ColumnSorted
editCellStarting
editCellStarted
rowAdding
rowAdded

24.  イベント API
 イベントAPI http://help.infragistics.com/jQuery/2012.1/

25. 1. グリッド初期化時にハンドラーを設定
 イベントハンドリング
の設定
$("#grid1").igGrid({
dataSource: products,
features: [
{
name: 'Sorting',
mode: 'multi',
columnSorted: function (evt, ui) {
alert(ui.columnKey);
}
}

26. 2. 初期化後に任意のタイミングでハンドラーを設定
この場合は、jQuery のイベント設定を利用
bind(), live(), on() など
 イベントハンドリング
の設定
// ボタンクリック時のイベントハンドラー
$('#btn1').live('click', function () {
// グリッドに対してイベントハンドラーを設定
$('#grid1').live("iggridsortingcolumnsorted",
function (evt, ui) {
alert(ui.columnKey + " が " +
ui.direction + " 方向にソートされ
ました");
});
});

27. igGrid イベント ハンドリング
DEMO

28. 6.
まとめ
リソース

29. まとめ igGrid 入門編
igGrid 概要
Infragistics Loader
igGrid データ バインディング
igGrid 機能設定
igGrid イベントハンドリング

30. リソース  HTML5
 HTML5 チート シート
http://www.inmotionhosting.com/infographi
cs/html5-cheat-sheet/
 ブラウザー 対応状況
http://www.findmebyip.com/litmus/
 jQuery
 jQuery
http://jquery.com/
 jQuery UI
http://jqueryui.com/
 NetAdvantage for jQuery
 製品紹介
http://jp.infragistics.com
 オンライン サンプル
http://samples.jp.infragistics.com/
 Blog
http://blogs.jp.infragistics.com/blogs/
 オンライン API
http://help.infragistics.com/jQuery/2012.1/