列のグループ化の概要 (igGrid)

トピックの概要

目的

このトピックでは、igGrid™ のグループ化機能を紹介します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• 概要
• GroupBy の永続化
• グループ化機能の概要
• API の使用
• キーボード操作
• 関連コンテンツ

概要

igGrid では、グリッド内の 1 つまたは複数の列値をグループ化/再編成の基準 (たとえば、第 1 基準、第 2 基準、…等々) として使用し、グループ単位で各グループのレコードを再編成することができます。下の図に示すグリッドでは、データが SafetyStockLevel 列の値 (500、8000、1,000 といった数値) に基づいてグループ化/編成されています。つまり、このグリッドは SafetyStockLevel 列によってグループ化されたものです。

igGrid のグループ化機能の使い方は、Microsoft® Office Outlook® のグループ化機能と同じです。グループ化の基準として使用したい列をグリッドの上にある特別なグループ化領域にドラッグしてください。すると、選択したグリッド列のデータ件数と同じ数のグループでグリッドが再編成されます。また、各グループの内部でもレコードの並び替えが行われます。さらに列をドラッグして追加していくと、既存のグループ内のデータがさらに細かくグループ化されていきます。

グループ化メソッドは自身で定義することできます。カスタムのグループ化メソッドの詳細については、「Grid Group By の概要」というトピックをご覧ください。

グループ化は、GroupBy ウィジェットによって実行/管理されます。

GroupBy の永続化

igGrid バインディングの間にグループ化された列の永続化は 14.1 リリースの新機能です。以前のデフォルト動作を置き換えます。

注: GroupBy の永続化はデフォルトで True です。これは重大な変更です。

igGridGroupBy を有効する場合、persist モードで使用されます。dataBind() への呼び出しの後、UI およびデータ ソース ビューで永続化が適用されます。グループ化された列はクリアされなく、データ ソースの並べ替えも残ります。

GroupBy の永続化は igHierarchicalGrid にも実装されています。

以下のサンプルは、GroupBy 機能の永続化機能を紹介します。

ユーザーが igGrid を再バインドした後にグループ化をクリアする以前の動作に戻るには、persist オプションで機能を無効できます。以下はコード スニペットです。

JavaScript の場合:

features: [
  { 
     name: "GroupBy", 
     persist: false 
  }
]

グループ化機能の概要

下の表は、主なグループ化機能と、各機能の管理に使用するグループ化ウィジェットのプロパティをまとめたものです。

注: 次の表において、グループ化ダイアログ特有のプロパティとイベントは示されていません。 それらはグループ化ダイアログのトピックにあります。

以下のサンプルは、グループ化をカスタマイズするために compareFunc を使用する方法を紹介します。

注: time 列のグループ化をカスタマイズするには、compareFunc を使用します。詳細については、実例のコードを参照してください。

API の使用

列をプログラムでグループ化するには、次の方法で行うことができます。

JavaScript の場合:

$('#grid1').igGridGroupBy('groupByColumn', 'ProductID');

適用された並べ替え式がグリッドのデータ ソースから取得できます。コードで取得するには、以下のコードを使用します:

JavaScript の場合:

var expressions = $('#grid1').data('igGrid').dataSource.settings.sorting.expressions; // array of expressions
// expression structure
{compareFunc: <type="function" comparer function>, dir: <type="string" sort direction>, fieldName: <type="string" column key>, isGroupBy: <type="bool" is the expression created by the Group By widget>, layout: <type="string" the key of the layout if done in igHierarchicalGrid>}

グループ化ウィジェットにより作成された式の "isGroupBy" プロパティが "true" の場合、式と並べ替えウィジェットで作成された式を識別します。

グループ化されたデータ (データ行およびグループ行) をコードで取得するには、以下のコードを使用します:

JavaScript の場合:

var data = $('#grid1').data('igGrid').dataSource.groupByData();
// group rows' structure
{collapsed: <type="bool" collapsed state>, fieldName: <type="string" column key>, gbExpr: <type="object" group by expression object>, id: <type="string" identificator of the group row>, len: <type="number" the number of data rows in the group>, level: <type="number" level of grouping>, recs: <type="array" set of the data records in the group>, val: <type="string" the value of the group>}

グループ化データのグループ行は、グループ行の生成された ID を含むオブジェクトです。コードで行を collapse / expand ために ID を使用します。

JavaScript の場合:

var data = $('#grid1').data('igGrid').dataSource.groupByData(), 
    id = data[0].id; 
// collapse
$('#grid1').igGridGroupBy("collapse", id); 
// expand
$('#grid1').igGridGroupBy("expand", id);

API 使用については、以下のサンプルも参照してください。

キーボード操作

以下のキーボード操作が可能です。

グリッドにフォーカスがある場合:

• TAB: GroupBy 機能のフォーカス可能な要素間でフォーカスを移動: GroupBy 領域の選択列リンク。

要素にフォーカスがある場合:

• ENTER: グループ化ダイアログを開く。

ダイアログにフォーカスがある場合:

• TAB: ダイアログのフォーカス可能な要素間でフォーカスを移動 - [グループ化] ボタン、[すべてクリア] ボタン、[適用] および [キャンセル] ボタン フォーカスが関連する要素にある際に、ENTER を押すことにより関連する操作を適用できます。
• ESCAPE: ダイアログを閉じる。

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• 列のグループ化の有効化 (igGrid)

• グリッド GroupBy プロパティ リファレンス

• グリッドの既知の問題と重要な変更

サンプル

このトピックについては、以下のサンプルも参照してください。

• グループ化