Ignite UI™ API ヘルプ

ui.igHierarchicalGrid

概要
オプション
イベント
メソッド
テーマ

igHierarchicalGrid コントロールは階層 jQuery グリッドコントロールです。フィルタリング、グループ化、列の非表示、ページング、列のサイズ変更、行セレクター、セルの選択、並べ替え、列集計、ツールチップ、および更新機能を提供します。機能の詳細について、API ドキュメントを参照してください。

igHierarchicalGrid コントロールはスタンドアロンフラットデータ igGrid コントロール上にビルドされています。igGrid コントロールの API は igHierarchicalGrid コントロールとその columnLayouts 設定の構成のベースとしての役割を果たします。igGrid のコントロールの API セクションを参照してください。

以下のコードは、igHierarchicalGrid コントロールの初期化方法を示します。

この API を使用した作業方法の詳細については、ここをクリックしてください。igHierarchicalGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コードサンプル

 		
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
	  <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
        var jsonData = { "d": [
            {
                "ID": 0,
                "Name": "Food",
                "Category": { "ID": 0, "Name": "Food", "Active": true, "Date": "\/Date(1059660800000)\/" },
                "Products": [
                    { "ID": 0, "Name": "Bread", "Price": "2.5" }
                ]
            },
            {
                "ID": 1,
                "Name": "Beverages",
                "Category": { "ID": 2, "Name": "Beverages", "Active": true, "Date": "\/Date(1159660800000)\/" },
                "Products": [
                    { "ID": 1, "Name": "Milk", "Price": "3.5" },
                    { "ID": 2, "Name": "Vint soda", "Price": "20.9" }
                ]
            },
            {
                "ID": 2,
                "Name": "Electronics",
                "Category": { "ID": 5, "Name": "Electronics", "Active": false, "Date": "\/Date(1859660800000)\/" },
                "Products": [
                    { "ID": 7, "Name": "DVD Player", "Price": "35.88" },
                    { "ID": 8, "Name": "LCD HDTV", "Price": "1088.8" }
                ]
            }
        ]}

        $("#hierarchicalGrid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: jsonData,
            dataSourceType: "json",
            responseDataKey: "d",

            autoGenerateColumns: false,
            primaryKey: "ID",
            columns: [
			    { headerText: "ID", key: "ID", width: "50px", dataType: "number" },
			    { headerText: "Name", key: "Name", width: "130px", dataType: "string" }
		    ],
            autoGenerateLayouts: false,
            columnLayouts: [
		    {
			    key: "Products",
			    responseDataKey: "",
			    childrenDataProperty: "Products",
			    autoGenerateColumns: false,
			    primaryKey: "ID",
			    columns: [
				    { key: "ID", headerText: "ID", width: "25px" },
				    { key: "Name", headerText: "Product Name", width: "90px" },
				    { key: "Price", headerText: "Price", dataType: "number", width: "55px" }
			    ]
		    }
	    ]
        });
    });
    </script>
</head>
<body>
<table id="hierarchicalGrid"></table>
</body>

animationDuration

タイプ:: number
デフォルト:: 500

行の展開/縮小アニメーション期間 (ミリ秒)。

コードサンプル

  
        //Initialize
        $(".selector").igHierarchicalGrid({
            animationDuration: 1000
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "animationDuration");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "animationDuration", 1000);
        $(".selector").igHierarchicalGrid("dataBind");

autoGenerateLayouts

タイプ:: bool
デフォルト:: false

true の場合、「childrenDataProperty」のデフォルト値として見なされるすべてのレイアウトが自動生成されます。
autoGenerateLayouts が有効な場合、すべての列が再帰的に自動生成されます。(すべてのレベルの全列)。

コードサンプル

         
       //Initialize
        $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: true
        });
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "autoGenerateLayouts");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "autoGenerateLayouts", true);

collapseTooltip

タイプ:: string
デフォルト:: ""

現在展開されている、展開列のセルに適用されるデフォルトのツールチップを指定します。

コードサンプル

 
        //Initialize
        $(".selector").igHierarchicalGrid({
            collapseTooltip: "Custom Collapse Tooltip Text"
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "collapseTooltip");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "collapseTooltip", "Custom Collapse Tooltip Text");

columnLayouts

タイプ:: array
デフォルト:: []
要素タイプ:: object

子グリッドの構造を指定する columnLayout オブジェクトのリスト。フラットグリッドに適用されるすべてのオプションが、ここでも適用されます。

コードサンプル

   
          //Initialize
          $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					key: "Products",
					primaryKey: "ProductID",
					foreignKey: "CategoryID",
                    responseDataKey: "d.results",
					autoGenerateColumns: true
				}
			]
            });

foreignKey

タイプ:: string
デフォルト:: null

columnLayout の foreignKey を指定します。これは、親グリッドの列キーでもあります。

コードサンプル

 
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					foreignKey: "CategoryID"
				}
			]
            });

key

タイプ:

string

デフォルト:

null
columnLayout キーを指定します。これは、現在の列レイアウトのデータレコードを保持するプロパティです。
コードサンプル
```
 
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					key: "Products"
				}
			]
            }); 
```

primaryKey

タイプ:: string
デフォルト:: null

columnLayout の primaryKey を指定します。また、現在の列レイアウトの列キーとしての役割も果たします。

コードサンプル

 
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateLayouts: false,
			columnLayouts: [
				{
					primaryKey: "ProductID"
				}
			]
            });

columns

タイプ:: array
デフォルト:: []
要素タイプ:: object

列オブジェクトの配列。

コードサンプル

             
            //Initialize
            $(".selector").igHierarchicalGrid({
            autoGenerateColumns: false,
			columns: [
				{ key: "CategoryID", headerText: "Category ID", dataType: "number" },
				{ key: "CategoryName", headerText: "Category Name", dataType: "string" },
				{ key: "Description", headerText: "Description", dataType: "string" }
			]
            });

mapper

タイプ:: function
デフォルト:: null

戻り値がこの列に関連するすべてのデータ操作で使用されるデータレコードからの複合データ抽出のために使用されます。

コードサンプル

 
                //Initialize
                $(".selector").igHierarchicalGrid({
                    columns: [                    
                        { headerText: "ID", key: "ID", dataType: "number" },
                        { headerText: "Name", key: "Name", dataType: "string" },
                        {
                          headerText: "Category", key: "Category", dataType: "object", 
                            mapper: function (record) {
                              return record.Category.Name;
                            }

                        }
                    ]                 
                });

                  //Get
                  var cols = $(".selector").igHierarchicalGrid("option", "columns");
                  var categoryMapper = cols[2].mapper;

defaultChildrenDataProperty

タイプ:: string
デフォルト:: "children"

子供が位置する応答内にデフォルトのプロパティを指定します。

コードサンプル

            
            //Initialize
            $(".selector").igHierarchicalGrid({
			    defaultChildrenDataProperty: "childLayout"
            });  
            
            //Get
            var accessibility = $(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty");
        
            //Set
            $(".selector").igHierarchicalGrid("option", "defaultChildrenDataProperty", "childLayout");

expandCollapseAnimations

タイプ:: bool
デフォルト:: true

線形アニメーションを適用します - 親行の状態によって、展開または折り畳みになります。

コードサンプル

         
        //Initialize
        $(".selector").igHierarchicalGrid({
            expandCollapseAnimations: true
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "expandCollapseAnimations");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "expandCollapseAnimations", true);

expandColWidth

タイプ:: number
デフォルト:: 30

展開列の幅を指定します。

コードサンプル

         
       //Initialize
        $(".selector").igHierarchicalGrid({
            expandColWidth: 50
        });

expandTooltip

タイプ:: string
デフォルト:: ""

現在折り畳まれている、展開列のセルに適用されるデフォルトのツールチップを指定します。

コードサンプル

         
        //Initialize
        $(".selector").igHierarchicalGrid({
            expandTooltip: "Custom expnad tooltip text"
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "expandTooltip");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "expandTooltip", "Custom expnad tooltip text");
        $(".selector").igHierarchicalGrid("dataBind");

initialDataBindDepth

タイプ:

number

デフォルト:

-1
最初のレベルのみが最初はデータバインドされます。また「描画」の深さとしての機能を果たします。つまり、このプロパティによって、グリッドは機能します。
コードサンプル
```
         
        //Initialize
        $(".selector").igHierarchicalGrid({
            initialDataBindDepth: 1
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "initialDataBindDepth");
        
```

initialExpandDepth

タイプ:: number
デフォルト:: -1

ウィジェットが初めてインスタンス化したときは、レベルは自動的に展開しません。

コードサンプル

         
        //Initialize
        $(".selector").igHierarchicalGrid({
            initialExpandDepth: 1
        });
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "initialExpandDepth");

maxDataBindDepth

タイプ:: number
デフォルト:: -1

バインド先のレベル数の限度を指定します。

コードサンプル

         
        //Initialize
        $(".selector").igHierarchicalGrid({
            maxDataBindDepth: 3
        });  
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "maxDataBindDepth");

odata

タイプ:: bool
デフォルト:: false

true の場合、OData 変換と $expand 構文を使ってすべての要求をエンコードします。

コードサンプル

         
        //Initialize
        $(".selector").igHierarchicalGrid({
            odata: true
        });  
        
        //Get
        var accessibility = $(".selector").igHierarchicalGrid("option", "odata");
        
        //Set
        $(".selector").igHierarchicalGrid("option", "odata", true);

pathSeparator

タイプ:

string

デフォルト:

"/"
データの階層型検索用の、パスを構成するための区切り文字を指定します。
コードサンプル
```
 
        //Initialize
        $(".selector").igHierarchicalGrid({
            pathSeparator: "/"
        });  
      
```
rest

タイプ:

bool

デフォルト:

false
True の場合、ロードオンデマンドは REST 法令遵守のリソースアクセスを使用して実行されます。
AJAX の GET 呼び出しで適切な URL を使用します。
コードサンプル
```
 
        //Initialize
        $(".selector").igHierarchicalGrid({
            rest: true
        });
        
        //Get
        var rest = $(".selector").igHierarchicalGrid("option", "rest");
            
```

Ignite UI コントロールイベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

childGridCreated

キャンセル可能:: false

子グリッドが作成された後に発生するイベント。

コードサンプル

 
          //Bind after initialization
          $(document).delegate(".selector", "igchildgridcreated", function (evt, ui) {

              //the triggered event 
              evt;
                
              //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
              evt.target;  
                
              //reference to the DOM object which triggered the event
              evt.currentTarget;  
                
              //type of the event according to the jQuery UI convention: "igchildgridcreated"
              evt.type;
                
              // reference to the created child grid DOM element
              ui.element
                
              //reference to the Hierarchical grid widget
              ui.owner;

          });

childGridCreating

キャンセル可能:: true

子グリッドを作成する前に発生するイベント。開発者が子グリッドの作成をオーバーライドできます。

コードサンプル

         //Bind after initialization
         $(document).delegate(".selector", "igchildgridcreating", function (evt, ui) {

             //the triggered event 
             evt;

             //reference to the DOM object on which the event is attached to (the one returned from the $(".selector"))
             evt.target;

             //reference to the DOM object which triggered the event
             evt.currentTarget;

             //type of the event according to the jQuery UI convention:	"igchildgridcreating"
             evt.type;

             // reference to the child grid DOM element which is to be created
             ui.element

             // reference to the options of the child grid which is to created
             ui.options

             // reference to the Hierarchical grid widget
             ui.owner;

             // reference to the path to the child grid which is to be created 
             ui.path

         });

childGridRendered

キャンセル可能:: false

子グリッドが描画されたときに発生するイベント。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、生成されようとしている行の行要素にアクセスします。
args.childgrid を使用して、子グリッドへの参照を取得します。

コードサンプル

 
      $(document).delegate(".selector", "igchildgridrendered", function (evt, ui) {
            //return the triggered event
            evt;
            
            //reference to the hierarchical grid object
            ui.owner;
            
            //reference to the row element for the row that's about to be populated
            ui.parentrow;
            
            //reference to the child grid
            ui.childgrid;
      });

childrenPopulated

キャンセル可能:: false

子が生成されたときに発生するイベント (要求に応じて読み込み)。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、生成された行の行要素にアクセスします。
args.id を使用して、行のデータ ID を取得します。

コードサンプル

   
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridchildrenpopulated", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;           
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;          
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulated'
            evt.type;
            
            
            //custom row id that is combination from the primaryKey and the id of the row
            ui.id;
            
            //reference to the Hierarchical grid widget
            ui.owner;         
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;          
            //get the HTML DOM row object
            ui.parentrow[0];            
        }); 
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            childrenPopulated : function(e, args) {...}
		});

childrenPopulating

キャンセル可能:: true

子が生成されようとしているときに発生するイベント (要求に応じて読み込み)。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、生成されようとしている行の行要素にアクセスします。
args.id を使用して、行のデータ ID を取得します。

コードサンプル

        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridchildrenpopulating", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;      
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridchildrenpopulating'
            evt.type;
            
            
            //custom row id that is combination from the primaryKey and the id of the row
            ui.id;
            
            //reference to the Hierarchical grid widget
            ui.owner;
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0];  
        });
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            childrenPopulating : function(e, args) {...}
		});

rowCollapsed

キャンセル可能:: false

階層型の行が折り畳まれたときに発生するイベント。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、折り畳まれた行の行要素にアクセスします。

コードサンプル

                 
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowcollapsed", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;           
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsed'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0]; 
        });  
            
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowCollapsed : function(e, args) {...}
		});

rowCollapsing

キャンセル可能:: true

階層型の行が折り畳まれようとしているときに発生するイベント。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、折り畳まれようとしている行の行要素にアクセスします。

コードサンプル

         
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowcollapsing", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;            
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowcollapsing'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;           
            //get the HTML DOM row object
            ui.parentrow[0]; 
        }); 
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowCollapsing : function(e, args) {...}
		});

rowExpanded

キャンセル可能:: false

階層型の行が展開された後に発生するイベント。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、展開された行の行要素にアクセスします。

コードサンプル

 
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowexpanded", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;            
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;           
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanded'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;            
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;            
            //get the HTML DOM row object
            ui.parentrow[0];
        });
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowExpanded : function(e, args) {...}
		});

rowExpanding

キャンセル可能:: true

階層型の行が展開されようとしているときに発生するイベント。
args.owner を使用して、階層型グリッドオブジェクトにアクセスします。
args.parentrow を使用して、展開されようとしている行の行要素にアクセスします。

コードサンプル

        
        //Bind after initialization
		$(document).delegate(".selector", "ighierarchicalgridrowexpanding", function (evt, ui) {
            //return the triggered event
            evt;
            
            //pointer to the object that triggers the event, which in our case is igHierarchicalGrid
            evt.target;
            //pointer to the object that listins for the event, which in our case is igHierarchicalGrid
            evt.currentTarget;
            //the type of the event, which following the jquery UI convention is 'ighierarchicalgridrowexpanding'
            evt.type;
            
            
            //reference to the Hierarchical grid widget
            ui.owner;
            //gets all igHierarchical Grid widgets
            ui.owner.allChildrenWidgets;
            
            //jQuery wrapper of the parent row object
            ui.parentrow;
            //get the HTML DOM row object
            ui.parentrow[0];         
        });  
        
        //Initialize
        $(".selector").igHierarchicalGrid({
            rowExpanding : function(e, args) {...}
		});

詳細の表示

allChildren

.igHierarchicalGrid( "allChildren" );

返却型:

object
すべての子グリッド要素のフラットリストを返します (再帰的)。
コードサンプル
```
 
        var hierarchicalGridChildren = $(".selector").igHierarchicalGrid("allChildren");
      
```
allChildrenWidgets

.igHierarchicalGrid( "allChildrenWidgets" );

返却型:

object
すべての子グリッドウィジェット (要素ではない) のフラットリストを返します (再帰的)。
コードサンプル
```
 
        var hierarchicalGridWidgets = $(".selector").igHierarchicalGrid("allChildrenWidgets"); 
      
```
collapse

.igHierarchicalGrid( "collapse", id:domelement, [callback:function] );
親行を折り畳みます。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。
- id
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
- callback
- タイプ:function
- オプション
- 親行縮小したときに呼び出すカスタム関数を指定します (オプション)。2 つの引数を受信します。最初のは階層グリッドオブジェクトで、第 2 のは縮小した行要素です。
コードサンプル
```
 
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("collapse", rowDomElement);
        // OR
        $(".selector").igHierarchicalGrid("collapse", rowDomElement, function () {
          // Custom code executed after the collapse operation finishes
        });
      
```
collapsed

.igHierarchicalGrid( "collapsed", element:domelement );

返却型:

bool

返却型の説明:

「element」によって指定した親行が展開されるか、縮小されるかどうかを示すブール値を返します。
親行が現在折り畳まれているかどうかを確認します。
- element
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
コードサンプル
```
 
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility = $(".selector").igHierarchicalGrid("collapsed", rowDomElement); 
        
```
commit

.igHierarchicalGrid( "commit" );
メイングリッドおよびすべての子グリッドで保留中のトランザクションをクライアントデータソースにコミットします。
コードサンプル
```
 $(".selector").igHierarchicalGrid("commit"); 
```
dataBind

.igHierarchicalGrid( "dataBind" );
データは階層型グリッドをバインドします。initialExpandDepth >= 0 が設定されていない場合は、デフォルトでは子グリッドは作成または描画されません。
コードサンプル
```
 
        $(".selector").igHierarchicalGrid("dataBind"); 
      
```
destroy

.igHierarchicalGrid( "destroy" );
すべての子グリッドを再帰的に破棄して、階層型グリッドを破棄します。
コードサンプル
```
 $(".selector").igHierarchicalGrid("destroy");  
      
```
expand

.igHierarchicalGrid( "expand", id:domelement, [callback:function] );
親行を展開 (切り替え) します。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。
- id
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
- callback
- タイプ:function
- オプション
- 親行が展開したときに呼び出すカスタム関数を指定します (オプション)。2 つの引数を受信します。最初のは階層グリッドオブジェクトで、第 2 のは展開した行要素です。
コードサンプル
```
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("expand", rowDomElement);
        // OR
        $(".selector").igHierarchicalGrid("expand", rowDomElement, function () {
          // Custom code executed after the expand operation finishes
        });
      
```
expanded

.igHierarchicalGrid( "expanded", element:domelement );

返却型:

bool

返却型の説明:

行が展開されているか、縮小されているかどうかを指定します。
親行が展開されているかどうかを確認します。
- element
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
コードサンプル
```
 
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility =  $(".selector").igHierarchicalGrid("expanded", rowDomElement);
      
```
populated

.igHierarchicalGrid( "populated", element:domelement );

返却型:

bool

返却型の説明:

親行の子グリッドが生成して作成されたかどうかを示すブール値を返します。
親行にデータが投入されているかどうかを確認します。
- element
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
コードサンプル
```
 
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0),
            accessibility =  $(".selector").igHierarchicalGrid("populated", rowDomElement);  
        
```
rollback

.igHierarchicalGrid( "rollback", [rebind:bool] );
トランザクションログをクリアします (igDataSource のデリゲート)。これは UI を更新しないことに注意してください。UI を更新する場合、第 2 のパラメーター (updateUI) を true に設定すると、dataBind() への呼び出しをトリガーして、コンテンツを再描画します。
- rebind
- タイプ:bool
- オプション
- 再バインドを実行するかどうか。
コードサンプル
```
 $(".selector").igHierarchicalGrid("rollback", true); 
```
root

.igHierarchicalGrid( "root" );

返却型:

object

返却型の説明:

ルートグリッドの jQuery によってラップされた要素。
ルートグリッド (igGrid) の要素を返します。
コードサンプル
```
 
        var hierarchicalGridRoot = $(".selector").igHierarchicalGrid("root"); 
      
```
rootWidget

.igHierarchicalGrid( "rootWidget" );

返却型:

object

返却型の説明:

ルート igGrid (igHierarchicalGrid ではない) のウィジェットオブジェクト。
ルートグリッド (igGrid) のウィジェットオブジェクトを返します。
コードサンプル
```
 
        var hierarchicalGridRootWidget = $(".selector").igHierarchicalGrid("rootWidget"); 
      
```

saveChanges

.igHierarchicalGrid( "saveChanges", success:function, error:function );

変更を URL としてシリアル化することで、$.ajax を使用して settings.updateUrl にポストします。

success
タイプ:function
updateUrl オプションへの AJAX リクエストに成功したときに呼び出すカスタム関数を指定します (オプション)。
error
タイプ:function
updateUrl オプションへの AJAX リクエストに失敗したときに呼び出すカスタム関数を指定します (オプション)。

コードサンプル

 
            //Example 1: Save changes without callbacks
            $(".selector").igHierarchicalGrid("saveChanges");
            
            // Example 2: Save changes with success and error callbacks
            $(".selector").igHierarchicalGrid("saveChanges", function (data) {
                $("#message").text("Changes were saved successfully").fadeIn(3000).fadeOut(5000);
            },
            function(jqXHR, textStatus, errorThrown) {
                $("#message").text("An error occurred while saving the changes. Error details: " + textStatus).fadeIn(3000).fadeOut(5000);
            });

toggle

.igHierarchicalGrid( "toggle", element:domelement, [callback:function] );
親行を展開または折り畳みます (切り替え)。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。
- element
- タイプ:domelement
- dom 要素、または TR で、親行を指定する jquery ラップされた dom 要素を受け入れます。
- callback
- タイプ:function
- オプション
- 親行が切り替えたときに呼び出すカスタム関数を指定します (オプション)。2 つの引数を受信します。最初のは階層グリッドオブジェクトで、第 2 のは切り替えた行要素です。
コードサンプル
```
 
        var parentGrid = $("#idGrid").igHierarchicalGrid("rootWidget"),
            rowDomElement = parentGrid.rowAt(0);
        $(".selector").igHierarchicalGrid("toggle", rowDomElement); 
        //OR
        $(".selector").igHierarchicalGrid("toggle", rowDomElement, function () {
          // Custom code executed after the toggle operation finishes
        }); 
      
```

ui-iggrid-childarea

展開されたときに、子グリッド TD コンテナーに適用されるクラス。
ui-iggrid-childarea-collapsed

折り畳まれたときに、子グリッド TD コンテナーに適用されるクラス。
ui-iggrid-childgridseparator

最初と最後を除く 2 つの子グリッド間の「点線」効果を実現します。
ui-iggrid-expandbutton ui-icon-plus

折り畳まれたときに、展開ボタン SPAN に適用されるクラス。
ui-iggrid-expandbuttonclick ui-icon-plus

クリックされたときに、展開ボタン SPAN に適用されるクラス。
ui-iggrid-expandbutton ui-iggrid-expandbuttonexpanded ui-icon-minus

展開されたときに、展開ボタン SPAN に適用されるクラス。
ui-iggrid-expandbuttonexpandedhover ui-icon-plus ui-state-hover

ホバーされたときに、展開された展開ボタン span に適用されるクラス。
ui-iggrid-expandbuttonhover ui-icon-plus ui-state-hover

ホバーされたときに、折り畳まれた展開ボタン span に適用されるクラス。
ui-iggrid-expandcolumn

展開列 TD に適用されるクラス。
ui-iggrid-expandcolumn-expanded

展開/折り畳みインジケーターがある TD が現在展開状態の場合に適用されるクラス。
ui-iggrid-expandheadercell ui-iggrid-header ui-widget-header

展開列用の、特殊ヘッダーセル TH に適用されるクラス。
ui-icon ui-icon-triangle-1-se

展開ヘッダーセルアイコンを保持する SPAN に適用されるクラス。
ui-iggrid-root

ルートグリッドのテーブル要素に適用されるクラス。

Ignite UI | サンプル

ui.igHierarchicalGrid

コード サンプル

関連サンプル

関連トピック

依存関係

継承

animationDuration

コード サンプル

autoGenerateLayouts

コード サンプル

collapseTooltip

コード サンプル

columnLayouts

コード サンプル

foreignKey

コード サンプル

key

コード サンプル

primaryKey

コード サンプル

columns

コード サンプル

mapper

コード サンプル

defaultChildrenDataProperty

コード サンプル

expandCollapseAnimations

コード サンプル

expandColWidth

コード サンプル

expandTooltip

コード サンプル

initialDataBindDepth

コード サンプル

initialExpandDepth

コード サンプル

maxDataBindDepth

コード サンプル

odata

コード サンプル

pathSeparator

コード サンプル

rest

コード サンプル

childGridCreated

コード サンプル

childGridCreating

コード サンプル

childGridRendered

コード サンプル

childrenPopulated

コード サンプル

childrenPopulating

コード サンプル

rowCollapsed

コード サンプル

rowCollapsing

コード サンプル

rowExpanded

コード サンプル

rowExpanding

コード サンプル

allChildren

コード サンプル

allChildrenWidgets

コード サンプル

collapse

コード サンプル

collapsed

コード サンプル

commit

コード サンプル

dataBind

コード サンプル

destroy

コード サンプル

expand

コード サンプル

expanded

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル

コードサンプル