行のプログラムによる展開と縮小 (igHierarchicalGrid)

目的

このトピックでは、igHierarchicalGrid™ の子グリッドを展開および縮小するための API の使用方法について説明します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります。

• igHierarchicalGrid の概要: このトピックでは、機能、データ ソースへのバインド、要件、テンプレート、相互作用に関する情報を含めて、igHierarchicalGrid コントロールの概要を示します。
• igHierarchicalGrid の初期化: このトピックでは、jQuery と MVC 両方の igHierarchicalGrid の初期化方法を示しています。

このトピックの内容

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

• コントロールの構成の概要
• コード例
• 関連コンテンツ

コントロールの構成の概要

コントロールの構成の概要

以下の表に、igHierarchicalGrid コントロールの、行の展開と縮小に関して構成可能な項目の一覧を示します。

コード例

概要

以下の表は、このトピックで使用したコード例をまとめたものです。

コード例: 親グリッドのすべての行の展開

説明

この例は、ルート グリッドのすべての行を展開する方法を示します。以下の例では次の関数が定義されています。

• expandAllRowsOfGrid: この関数は、渡されたグリッドのすべての行を展開します。この関数は、階層の任意のレベルで使用できます。
• expandAllRowsOfRootGrid: この関数は、ルート グリッドのすべての行を展開します。この関数は、最上位グリッドの参照を取得し、expandAllRowsOfGrid に渡します。

コード

JavaScript の場合:

function expandAllRowsOfGrid(grid) {
    // expand each row in grid
    $(grid.allRows()).each(function (index, element) {
        $("#grid1").igHierarchicalGrid("expand", element); 
    });
}        

function expandAllRowsOfRootGrid() {
    // get the top level grid
    var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
    expandAllRowsOfGrid(parentGrid);
}

コード例: 親グリッドのすべての行の縮小

説明

この例は、ルート グリッドのすべての行を縮小する方法を示します。以下の例では次の関数が定義されています。

• collapseAllRowsOfGrid: この関数は、渡されたグリッドのすべての行を縮小します。この関数は、階層の任意のレベルで使用できます。
• collapseAllRowsOfRootGrid: この関数は、ルート グリッドのすべての行を縮小します。この関数は、最上位グリッドの参照を取得し、collapseAllRowsOfGrid に渡します。

コード

JavaScript の場合:

function collapseAllRowsOfGrid(grid) {
    // collapse each row
    $(grid.allRows()).each(function (index, element) {
        $("#grid1").igHierarchicalGrid("collapse", element); 
    });        
}

function collapseAllRowsOfRootGrid() {
    // get the top level grid
    var parentGrid = $("#grid1").igHierarchicalGrid("rootWidget");
    collapseAllRowsOfGrid(parentGrid);
}

コード例: 現在選択されている行の切り替え

説明

この例は、ルート グリッドの現在選択されている行を切り替える方法を示します。以下の例では次の関数が定義されています。

• toggleCurrentRowOfGrid: この関数は、渡されたグリッドの現在の行を切り替えます。この関数は、階層の任意のレベルで使用できます。
• toggleCurrentRowOfRootGrid: この関数は、ルート グリッドの現在の行を切り替えます。この関数は、最上位グリッドの参照を取得し、toggleCurrentRowOfGrid に渡します。

注: この例が動作するためには、Selection 機能を有効にする必要があります。

コード

JavaScript の場合:

function toggleCurrentRowOfGrid(grid) {
    // get reference to current selected row
    var row = $(grid).igGridSelection("selectedRow");
    if (row) {
        // toggle row
        $("#grid1").igHierarchicalGrid("toggle", row.element);
    }
}

function toggleCurrentRowOfRootGrid(grid) {
    // get the top level grid
    var parentGrid = $("#grid1").igHierarchicalGrid("root");
    toggleCurrentRowOfGrid(parentGrid);
}

関連コンテンツ

トピック

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

• igHierarchicalGrid イベント API: このトピックでは、igHierarchicalGrid に固有のイベントについて説明します。
• igHierarchicalGrid の列とレイアウト: このトピックでは、自動生成などで igHierarchicalGrid の列およびレイアウトを定義する方法を示しています。