このオプションを true に設定した場合、グリッド行の高さが avgRowHeight と表示仮想レコードに基づいて自動的に計算されます。avgRowHeight が指定されていない場合、ランタイムで自動的に計算されます。

 
				// Initialize
				$(".selector").igTreeGrid({
					adjustVirtualHeights : true
				});

				// Get
				var virtualHeights = $(".selector").igTreeGrid("option", "adjustVirtualHeights");
			 

true に設定した場合、次の動作を実行します:
新しい行が追加された後に削除された場合、トランザクションはログに追加されません。
新しい行を追加し、編集した後に削除された場合、トランザクションはログに追加されません。
行または特定のセルに複数の編集を実行すると、単一のトランザクションになります。
注: このオプションは、autoCommit が false に設定される場合のみに適用されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					aggregateTransactions : true
				});

				//Get
				var aggregateTransactions = $(".selector").igTreeGrid("option", "aggregateTransactions");
			 

交互行スタイル (奇数行と偶数行で異なるスタイルになる) のレンダリングを有効または無効にします。カスタムの jQuery テンプレートが設定されている場合、これは効果がなく、テンプレート コンテンツ内で行の CSS を手作業で調整する必要があることに注意してください。

 
				//Initialize
				$(".selector").igTreeGrid({
					alternateRowStyles : true;
				});

				//Get
				var rowAltStyles = $(".selector").igTreeGrid("option", "alternateRowStyles");

				//Set
				$(".selector").igTreeGrid("option", "alternateRowStyles", true);
			 

autoAdjustHeight が false に設定される場合、height はスクロール コンテナーのみに設定されます。ページング フッター、フィルター行、ヘッダーなどのすべての他の UI 要素は高さを追加します。グリッドの合計高さはこの値より大きくなります。スクロール コンテナー (コンテンツ領域) の高さは動的に計算されません。このオプションを false に設定すると、大きいデータ セット (> 1000 行を一度に描画し、virtualization が有効) の最初の描画パフォーマンスを向上します。offsetHeight などの DOM プロパティにアクセスすると、ブラウザーはリフローしません。

 
				// Initialize
				$(".selector").igTreeGrid({
					autoAdjustHeight : false
				});

				// Get
				var adjustHeight = $(".selector").igTreeGrid("option", "autoAdjustHeight");
			 

行またはセルを編集すると、トランザクションを自動的にコミットします。ただしサーバーサイド データソースにトランザクションをコミットするために saveChanges の呼び出しが必要です。

 
				//Initialize
				$(".selector").igTreeGrid({
					autoCommit : true
				});

				//Get
				var commit = $(".selector").igTreeGrid("option", "autoCommit");
			 

autofitLastColumn が true ですべての列の幅が指定されていて、合計幅がグリッド幅より小さい場合、最後の列幅がグリッドにフィットするよう自動的に調整されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					autofitLastColumn : true
				});

				//Get
				var autoFit = $(".selector").igTreeGrid("option", "autofitLastColumn");
			 

数値列および日付列のセルの自動書式設定テキストを取得または設定します。数値および日付の書式パターンおよびルールは $.ig.regional.defaults オブジェクトで定義されます。日付書式は、Date 列のみです。詳細については、列の書式設定をご覧ください。

 
				//Initialize
				$(".selector").igTreeGrid({
					autoFormat : "number"
				});
				//Get
				var autoFormat = $(".selector").igTreeGrid("option", "autoFormat");
			 

columns コレクションが定義されず、autoGenerateColumns が true に設定されている場合、dataRendering イベントが発生する前に columns がデータ ソースによって推測されます。暗示された columns コレクションは dataRendering で変更できます。autoGenerateColumns が明示的に設定されずに、columns に 1 つ以上の列が定義される場合、autoGenerateColumns は自動的に false に設定されます。
autoGenerateColumns が true で列が自動生成列に定義された列がある場合、明示的に定義した後に描画されます。自動生成列に幅が定義されないため、defaultColumnWidth の設定も検討してください。

 
				// Initialize
				$(".selector").igTreeGrid({
					autoGenerateColumns : false
				});

				// Get
				var autoCols = $(".selector").igTreeGrid("option", "autoGenerateColumns");
			 

グリッド ヘッダーの上に表示されるキャプション テキスト。

 
				//Initialize
				$(".selector").igTreeGrid({
					caption : "Sales Data"
				});

				//Get
				var caption = $(".selector").igTreeGrid("option", "caption");

				//Set
				$(".selector").igTreeGrid("option", "caption", "Sales Data");
			 

階層データ ソースの子データの配列のプロパティ名。

 
				//Initialize
				$(".selector").igTreeGrid({
					childDataKey: "products"
				});

				//Get
				var childDataKey = $(".selector").igTreeGrid("option", "childDataKey");

				//Set
				$(".selector").igTreeGrid("option", "childDataKey", "Sales Data");
			 

このオプションは 2017.2 バージョン以降サポートされません。
縮小インジケーター ツールチップ テキストを指定します。
locale.collapseTooltipText オプションを使用します。

 
				//Initialize
				$(".selector").igTreeGrid({
					collapseTooltip : "Click here to collapse the row"
				});

				//Get
				var collapseTooltip = $(".selector").igTreeGrid("option", "collapseTooltipText");
			 

列オブジェクトの配列。列配列の構成については、列とレイアウト トピックをご覧ください。

 
				// Initialize
				$(".selector").igTreeGrid({
					autoGenerateColumns: false,
					columns: [
						{ headerText: "Product ID", key: "ProductID", dataType: "number" },
						{ headerText: "Product Name", key: "Name", dataType: "string" },
						{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
						{ headerText: "Color", key: "Color", dataType: "string" },
						{ headerText: "StandardCost", key: "StandardCost", dataType: "number" },
					]
				});

				// Get
				var cols = $(".selector").igTreeGrid("option", "columns");

				// Set
				var newColumn = { headerText: "New Column", key: "NewCol" };
				cols.push(newColumn);
				$(".selector").igTreeGrid("option", "columns", cols);
			 

• colSpan

  タイプ:

  number

  デフォルト:

  1

  複数行レイアウト構成でセルの colSpan を指定します。colSpan 0 はサポートされていないため、グリッドにより 1 に変更されます。詳細については、グリッドの複数行レイアウトをご覧ください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string", colSpan: 2 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
  								{ headerText: "Color", key: "Color", dataType: "string" },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", colSpan: 2 },
  							]
  						});
  
  						//Get
  						var colSpan = $(".selector").igTreeGrid("option", "columns")[0].colSpan;
  					 

• columnCssClass

  タイプ:

  string

  デフォルト:

  null

  この列のデータ セルに適用される CSS クラスのスペースで分割されたリスト。このクラスは、テンプレートに完全な <td> 定義を含む、列 template が定義されている列がある場合、適用されません。

  コード サンプル

   
  						<style>
  							.colStyle {
  								background-color: red;
  							}
  						</style>
  
  						$(".selector").igTreeGrid({
  						autoGenerateColumns: false,
  						columns: [
  							{ headerText: "Product ID", key: "ProductID", dataType: "number", columnCssClass: "colStyle" },
  							{ headerText: "Product Name", key: "Name", dataType: "string" },
  							{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string" },
  							{ headerText: "Color", key: "Color", dataType: "string" },
  							{ headerText: "StandardCost", key: "StandardCost", dataType: "number" }
  						]
  						});
  						//Get
  						var colCssClass =  $(".selector").igTreeGrid("option", "columns")[0].columnCssClass;
  					 

• columnIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウト構成でセルの列インデックスを指定します。複数行レイアウト モードを有効にするには、すべての列にこのプロパティを設定する必要があります。詳細については、グリッドの複数行レイアウトをご覧ください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
  							]
  						});
  
  						//Get
  						var colIndex = $(".selector").igTreeGrid("option", "columns")[0].columnIndex;
  					 

• dataType

  タイプ:

  enumeration

  デフォルト:

  string

  列セル値のデータ型。string、number、bool、date、または object。

  メンバー

  • string
  • タイプ:string
  • 列のデータが string 型の場合に使用されます。
  • number
  • タイプ:string
  • 列のデータが number 型の場合に使用されます。
  • boolean
  • タイプ:string
  • 列のデータが boolean 型の場合に使用されます。
  • date
  • タイプ:string
  • 列のデータが date 型の場合に使用されます。
  • object
  • タイプ:string
  • 列のデータが object 型の場合に使用されます。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  								{ headerText: "Production Date", key: "ProductionDate", dataType: "date" },
  							]
  						});
  						//Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var productIdDataType = cols[0].dataType;
  					 

• dateDisplayType

  タイプ:

  enumeration

  デフォルト:

  local

  グリッドのこの列で日付が表示される方法を決定します。

  メンバー

  • local
  • タイプ:string
  • この列の日付がクライアントのローカル タイムゾーンで描画されます。
  • utc
  • タイプ:string
  • この列の日付が UTC 表記で描画されます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							columns: [
  								{ headerText: "Departure Date", key: "DepartureDate", dataType: "date", dateDisplayType: "local" },
  								{ headerText: "Arrival Date", key: "ArrivalDate", dataType: "date", dateDisplayType: "utc" }
  							]
  						});
  						// Get
  						var cols = $('.selector').igTreeGrid('option', 'columns');
  						var departureDateDisplayType = cols[0].dateDisplayType;
  					 

• format

  タイプ:

  string

  デフォルト:

  null

  列のセルの書式を取得または設定します。デフォルト値は null です。有効な書式設定指定子については、日付、数値、および文字列の書式設定をご覧ください。 dataType が "date" の場合、次の書式がサポートされます。"date", "dateLong", "dateTime", "time", "timeLong", "MM/dd/yyyy", "MMM-d, yy, h:mm:ss tt", "dddd d MMM" など。
  dataType が "number" の場合、次の書式がサポートされます。 "number", "currency", "percent", "int", "double", "0.00", "#.0####", "0", "#.#######", など
  dataType が "double" の場合、次の書式がサポートされます。値は数値と類似しますが、10 進数の最大数があります。
  数値および日付の書式パターンおよびルールは $.ig.regional.defaults オブジェクトで定義されます。
  dataType が "string" または設定されていない場合、可能性のある書式は "{0}" フラグの代用で描画されます。たとえば、書式が Name: {0} に設定されていて、セル値が Bob の場合、値は Name: Bob として表示されます。
  値が checkbox に設定される場合、igGrid の renderCheckboxes オプションを無視し、チェックボックスが常に使用されます。列の dataType オプションが bool に設定される場合のみに影響します。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", format: "number" },
  								{ headerText: "Production Date", key: "ProductionDate", dataType: "date", format: "ddd, MMM-d-yy HH:mm" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var productIdFormat = cols[0].format;
  					 

• formatter

  タイプ:

  enumeration

  デフォルト:

  null

  セル値を書式設定するために使用される関数 (文字列または関数) への参照。関数は値を取得して、新しく書式設定された値を返します。詳細については、列の書式設定をご覧ください。

  メンバー

  • string
  • タイプ:string
  • 書式設定で使用される文字列。
  • function
  • タイプ:function
  • セル値を書式設定するために使用される関数。関数は値を受け付けます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "In production", key: "InProduction", formatter: function(val, record) {return (val === 1)? "Yes" : "No";} }
  							]
  						});
  						// Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var inProductionFormatter = cols[0].formatter;
  					 

• formula

  タイプ:

  enumeration

  デフォルト:

  null

  列が非バインドされる場合、同じ行の他のセル値に基づいて値を計算する javascript 関数の名前または参照。unbound 列で使用されます。

  メンバー

  • string
  • タイプ:string
  • JavaScript 関数の名前。
  • function
  • タイプ:function
  • JavaScript 関数への参照。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Total", key: "TotalUC", unbound: true,  formula: function (data, grid)
  									{
  										return data["UnitPrice"] * data["UnitsInStock"];
  									}
  								}
  							]
  						});
  						// Get
  						var totalUC = $('.selector').igTreeGrid('getUnboundColumnByKey', 'TotalUC');
  						var totalFormula = totalUC.formula;
  					 

• group

  タイプ:

  array

  デフォルト:

  []

  要素タイプ:

  object

  その他の列定義の配列。列がプロパティ グループを持つ場合、グリッドは複数列ヘッダーを含みます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							columns: [
  								{ headerText: "Product Data", key: "ProductData", group: [
  									{ headerText: "Product Name", key: "Name", dataType: "string" },
  									{ headerText: "Product Number", key: "ProductNumber", dataType: "string" }
  								]}
  							],
  							features:[
  								{
  									name: "MultiColumnHeaders"
  								}
  							],
  							width: "500px"
  						});
  
  						// Get
  						// getMultiColumnHeaders method returns multicolumn headers array. if there aren't multicolumn headers returns undefined.
  						var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
  						var group = columns[0].group;
  					 

• groupOptions

  タイプ:

  object

  デフォルト:

  {}

  縮小可能な列 group を構成するオプション。

  コード サンプル

   
                          //Initialize
                          $(".selector").igTreeGrid({
                              columns: [
                                  {
                                      headerText: "Company Information",
                                      group: [
                                          {
                                              headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                              groupOptions: {
                                                  hidden: "parentcollapsed"
                                              }
                                          },
                                          {
                                              headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                              groupOptions: {
                                                  hidden: "parentcollapsed"
                                              }
                                          },
                                          { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                      ],
                                      groupOptions: {
                                          expanded: false,
                                          allowGroupCollapsing: true
                                      },
                                      key: "companyInfo"
                                  }
                              ],
                              features: [
                                  {
                                      name: "MultiColumnHeaders"
                                  }
                              ],
                              width: "500px"
                          });
  
                          //Get
                          var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                          var groupOptions = columns[0].groupOptions;
                       

  • allowGroupCollapsing

    タイプ:

    bool

    デフォルト:

    false

    列ヘッダーに展開インジケーターを表示するかどうかを設定します。

    コード サンプル

     
                                //Initialize
                                $(".selector").igTreeGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
    
                                //Get
                                var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].groupOptions;
                                var allowGroupCollapsing = groupOptions.allowGroupCollapsing;
                             

  • expanded

    タイプ:

    bool

    デフォルト:

    true

    グループが展開または縮小されるかどうかを設定します。allowGroupCollapsing が true に設定された場合のみ適用します。

    コード サンプル

     
                                //Initialize
                                $(".selector").igTreeGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
    
                                //Get
                                var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].groupOptions;
                                var expanded = groupOptions.expanded;
                             

  • hidden

    タイプ:

    enumeration

    デフォルト:

    never

    グループが非表示にされる条件を設定します。allowGroupCollapsing が true に設定された場合のみ適用します。

    メンバー

    • never
    • タイプ:string
    • グループを非表示にしません。
    • always
    • タイプ:string
    • グループを常に非表示にします。
    • parentcollapsed
    • タイプ:string
    • 親グループが縮小されるときにグループを非表示にします。
    • parentexpanded
    • タイプ:string
    • 親グループが展開されるときにグループを非表示にします。

    コード サンプル

     
                                //Initialize
                                $(".selector").igTreeGrid({
                                    columns: [
                                        {
                                            headerText: "Company Information",
                                            group: [
                                                {
                                                    headerText: "Company Name", key: "CompanyName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                {
                                                    headerText: "Contact Name", key: "ContactName", dataType: "string", width: "150px",
                                                    groupOptions: {
                                                        hidden: "parentcollapsed"
                                                    }
                                                },
                                                { headerText: "Contact Title", key: "ContactTitle", dataType: "string", width: "150px" }
                                            ],
                                            groupOptions: {
                                                expanded: false,
                                                allowGroupCollapsing: true
                                            },
                                            key: "companyInfo"
                                        }
                                    ],
                                    features: [
                                        {
                                            name: "MultiColumnHeaders"
                                        }
                                    ],
                                    width: "500px"
                                });
                                //Get
                                var columns = $(".selector").igTreeGridMultiColumnHeaders("getMultiColumnHeaders");
                                var groupOptions = columns[0].group[0].groupOptions;
                                var hidden = groupOptions.hidden;
                             

• headerCssClass

  タイプ:

  string

  デフォルト:

  null

  この列のヘッダー セルに適用される CSS クラスのスペースで分割されたリスト。

  コード サンプル

   
  						<style>
  							.headerCss {
  								background-color: red;
  							}
  						</style>
  
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", headerCssClass: "headerCss" }
  							]
  						});
  
  						// Get
  						var headerCss = $(".selector").igTreeGrid("option", "columns");
  						var headerCssClass = cols[0].headerCssClass;
  					 

• headerText

  タイプ:

  string

  デフォルト:

  null

  列ヘッダー テキスト。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var productNameHeaderText = cols[0].headerText;
  					 

• hidden

  タイプ:

  bool

  デフォルト:

  false

  列の初期表示状態 (表示/非表示)。非表示機能が有効ではなくても列を非表示にすることができますが、非表示にするための UI はありません。非表示機能のオプションで列を非表示として定義することもでき、これらの定義が優先されます。

  コード サンプル

   
  						// Initialize
  						$('.selector').igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", hidden: true },
  							]
  						});
  
  						// Get
  						var cols = $('.selector').igTreeGrid('option', 'columns');
  						var productNameHidden = cols[0].hidden;
  					 

• key

  タイプ:

  string

  デフォルト:

  null

  列がバインドされるデータ ソースのプロパティ)。また、columnByKey などの API メソッドを使用して列を識別し、特定の列を検索するために使用されます。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var productNameKey = cols[0].key;
  					 

• mapper

  タイプ:

  enumeration

  デフォルト:

  null

  このオプションは、オブジェクトに dataType を設定した列にのみ適用できます。戻り値がこのフィールドに関連するすべてのデータ操作で使用されるデータ レコードからの複合データ抽出のために使用される関数 (文字列または関数) への参照です。詳細については、列にマッパー関数を定義をご覧ください。

  メンバー

  • string
  • タイプ:string
  • マッパー関数の名前。
  • function
  • タイプ:function
  • マッパー関数への参照。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number" },
  								{ headerText: "Product Name", key: "Name", dataType: "string" },
  								{ headerText: "Product Number", key: "ProductNumber", dataType: "string" },
  								{
  									headerText: "Category",
  									key: "Category",
  									dataType: "object",
  									mapper: function (record) {
  										return record.Category.Name;
  									}
  								}
  							]
  						});
  						//Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var categoryMapper = cols[3].mapper;
  					 

• navigationIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウトを持つグリッドでセルが編集モードにある場合、TAB シーケンスでセルのナビゲーション インデックスを指定します。それ以外の場合に結果がありません。詳細については、複数行レイアウト機能をご覧ください。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						autoGenerateColumns: false,
  						columns: [
  							{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  							{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3, navigationIndex: 1 },
  							{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0, navigationIndex: 2 },
  							{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1, navigationIndex: 4 },
  							{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2, navigationIndex: 3 }
  						]
  					});
  					//Get
  					var colIndex = $(".selector").igTreeGrid("option", "columns")[1].navigationIndex;
  					 

• rowIndex

  タイプ:

  number

  デフォルト:

  null

  複数行レイアウト構成でセルの行インデックスを指定します。複数行レイアウト モードを有効にするには、すべての列にこのプロパティを設定する必要があります。詳細については、グリッドの複数行レイアウトをご覧ください。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 0 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 2, colSpan: 2 },
  							]
  						});
  
  						//Get
  						var rowIndex = $(".selector").igTreeGrid("option", "columns")[0].rowIndex;
  					 

• rowspan

  非推奨

  タイプ:

  number

  デフォルト:

  0

  このオプションは 2016 年 6 月のサービス リリースより非推奨となります。
  複数列ヘッダー セルのスパンを変更します。代わりに rowSpan オプションを使用します。

• rowSpan

  タイプ:

  number

  デフォルト:

  1

  複数行レイアウト構成でセルの rowSpan を指定します。rowSpan 0 はサポートされていないため、グリッドにより 1 に変更されます。詳細については、グリッドの複数行レイアウトをご覧ください。 複数行レイアウトが使用されていないが複数列ヘッダーを設定する場合、このオプションはヘッダー セルのスパンを変更するために使用されます。

  コード サンプル

   
  						//Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product ID", key: "ProductID", dataType: "number", rowIndex: 0, columnIndex: 0, rowSpan: 2 },
  								{ headerText: "Product Name", key: "Name", dataType: "string", rowIndex: 0, columnIndex: 1, colSpan: 3 },
  								{ headerText: "ProductNumber", key: "ProductNumber", dataType: "string", rowIndex: 1, columnIndex: 1 },
  								{ headerText: "Color", key: "Color", dataType: "string", rowIndex: 1, columnIndex: 2 },
  								{ headerText: "StandardCost", key: "StandardCost", dataType: "number", rowIndex: 1, columnIndex: 3 },
  							]
  						});
  
  						//Get
  						var rowSpan = $(".selector").igTreeGrid("option", "columns")[0].rowSpan;
  					 

• template

  タイプ:

  string

  デフォルト:

  null

  個々の列にテンプレートを設定します。テンプレートのコンテンツは <td> および </td> タグを含まないテーブル セル内の HTML マークアップです。詳細については、基本的な列テンプレートの作成をご覧ください。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{ headerText: "Product Name", key: "Name", dataType: "string", template: "Product: ${Name}" },
  							]
  						});
  
  						// Get
  						var cols = $(".selector").igTreeGrid("option", "columns");
  						var template = cols[0].template;
  					 

• unbound

  タイプ:

  bool

  デフォルト:

  false

  列がデータ ソースにバインドされるかどうかを設定します。true の場合、この列のセルはデータソースにバインドされません。formula、unboundValues、または setUnboundValues API メソッドを使用して列のデータを生成します。詳細については、非バインド列の概要をご覧ください。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{
  									headerText: "Promotion Expired Date",
  									key: "PromExpDate",
  									dataType: "date",
  									unbound: true,
  									unboundValues: [
  										new Date('4/24/2016'),
  										new Date('8/24/2016'),
  										new Date('6/24/2016'),
  										new Date('10/24/2016'),
  										new Date('11/24/2016')
  									]
  								}
  							]
  						});
  
  						// Get
  						var unboundColumn = $(".selector").igTreeGrid('getUnboundColumnByKey', 'PromExpDate');
  						var isUnbound = unboundColumn.unbound;
  					 

• unboundValues

  タイプ:

  array

  デフォルト:

  null

  要素タイプ:

  列が unbound の場合に列セルの初期化で生成される値配列。

  コード サンプル

   
  						// Initialize
  						$(".selector").igTreeGrid({
  							autoGenerateColumns: false,
  							columns: [
  								{
  									headerText: "Promotion Expired Date",
  									key: "PromotionExpDate",
  									dataType: "date",
  									unbound: true,
  									unboundValues: [
  										new Date('4/24/2016'),
  										new Date('8/24/2016'),
  										new Date('6/24/2016'),
  										new Date('10/24/2016'),
  										new Date('11/24/2016')
  									]
  								}
  							]
  						});
  					 

• width

  タイプ:

  enumeration

  デフォルト:

  null

  列幅 (ピクセルまたはパーセント)。最後の 'px' はオプションです。列セルのコンテンツ (ヘッダー テキストを含む) に基づいた幅自動調整の場合、'*' として設定もできます。幅が定義されずに defaultColumnWidth が設定される場合、すべての列に適用されます。

  メンバー

  • string
  • タイプ:string
  • 列幅は、セルおよびヘッダー コンテンツに基づいて自動調整するために pixels (px)、percentage (%)、または '*' で設定できます。
  • number
  • タイプ:number
  • 列幅は数値として設定できます。

  コード サンプル

   
  							// Initialize
  							$(".selector").igTreeGrid({
  								autoGenerateColumns: false,
  								columns: [
  									{ headerText: "Product Name", key: "Name", width: "100px", dataType: "string" },
  								]
  							});
  							// Get
  							var cols = $(".selector").igTreeGrid("option", "columns");
  							var productNameWidth = cols[0].width;
  						 

$.ig.DataSource が受け入れる有効なデータ ソースまたは $.ig.DataSource 自体のインスタンスが可能です。

 
				//Initialize
				$(".selector").igTreeGrid({
					dataSource : ds
				});
				//Get
				var ds = $(".selector").igTreeGrid("option", "dataSource");
				Note:
				This code will return the original data source used when initializing the grid.
				To get the igDataSource instance use the following syntax:
				var igDs = $(".selector").data("igTreeGrid").dataSource;
				//Set
				$(".selector").igTreeGrid("option", "dataSource", ds);
			 

データ ソース固有の設定を構成するためのオプション オブジェクト。

 
				//Initialize
				$(".selector").igTreeGrid({
					dataSourceSettings : {
						expandedKey: "isExpanded",
						dataLevelKey: "dataLevel"
					}
				});

				//Get
				var dataSourceSettings = $(".selector").igTreeGrid("option", "dataSourceSettings");
			 

• dataLevelKey

  タイプ:

  string

  デフォルト:

  "__ig_options.dataLevel"

  階層のレベルを指定するプロパティの名前。デフォルト値は __ig_options.dataLevel です。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						dataSourceSettings: {
  							dataLevelKey : "PDL"
  						}
  					});
  
  					//Get
  					var dataLevelKey = $(".selector").igTreeGrid("option", "dataLevelKey");
  				 

• expandedKey

  タイプ:

  string

  デフォルト:

  "__ig_options.expanded"

  データ項目の展開状態を指定するプロパティの名前。デフォルト値は __ig_options.expanded です。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						dataSourceSettings: {
  							expandedKey : "PE"
  						}
  					});
  
  					//Get
  					var expandedKey = $(".selector").igTreeGrid("option", "expandedKey");
  				 

• initialFlatDataView

  タイプ:

  bool

  デフォルト:

  false

  TRUE に設定される場合、データ ソースが正規化し、変換される (dataLevel および展開状態が設定される) ことが予想されます。データ ソースは flatDataView として使用されます。ページングがリモートで、ページング モードが allLevels、または機能がリモート (返された結果の処理がサーバーで実行される) の場合に使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						dataSourceSettings : {
  							initialFlatDataView: true
  						}
  					});
  
  					//Get
  					var dataSourceSettings = $(".selector").igTreeGrid("option", "dataSourceSettings");
  				 

• propertyDataLevel

  タイプ:

  object

  デフォルト:

  null

  *** 重要な注意: オプションは非推奨です*** 代わりに dataLevelKey オプションを使用してください。
  階層のレベルを指定するプロパティの名前。デフォルト値は __ig_options.dataLevel です。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						propertyDataLevel : "PDL"
  					});
  
  					//Get
  					var propertyDataLevel = $(".selector").igTreeGrid("option", "propertyDataLevel");
  				 

• propertyExpanded

  タイプ:

  object

  デフォルト:

  null

  *** 重要な注意: オプションは非推奨です*** 代わりに expandedKey オプションを使用してください。
  データ項目の展開状態を指定するプロパティの名前。デフォルト値は __ig_options.expanded です。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						propertyExpanded : "PE"
  					});
  
  					//Get
  					var propertyExpanded = $(".selector").igTreeGrid("option", "propertyExpanded");
  				 

データ ソースのタイプ ("json" など) を明示的に設定します。詳細については、$.ig.DataSource type をご覧ください。

 
				//Initialize
				$(".selector").igTreeGrid({
					dataSourceType : "xml"
				});

				//Get
				var dsType = $(".selector").igTreeGrid("option", "dataSourceType");
			 

$.ig.DataSource を使用してデータが取得されるデータ ソースとしてリモート URL を指定します。

 
				//Initialize
				$(".selector").igTreeGrid({
					dataSourceUrl : urlString
				});

				//Get
				var urlString = $(".selector").igTreeGrid("option", "dataSourceUrl");
			 

列 width が設定されていないすべての列に設定されるデフォルトの列幅。

 
				// Initialize
				$(".selector").igTreeGrid({
					defaultColumnWidth : 100
				});
				// Get
				var width = $(".selector").igTreeGrid("option", "defaultColumnWidth");
			 

マウスがレコードの上にある場合、ui-state-hover クラスの描画を有効 / 無効にします。テンプレート化されるコンテンツにホバー スタイルを適用しないテンプレート シナリオなどの場合に便利です。

 
				//Initialize
				$(".selector").igTreeGrid({
					enableHoverStyles : false
				});

				//Get
				var enableHoverStyles = $(".selector").igTreeGrid("option", "enableHoverStyles");
			 

ツリー グリッドのデータがリモート サーバーからオンデマンドで読み込まれるかどうかを指定します。デフォルトは False です。

 
				//Initialize
				$(".selector").igTreeGrid({
					enableRemoteLoadOnDemand : true
				});

				//Get
				var enableRemoteLoadOnDemand = $(".selector").igTreeGrid("option", "enableRemoteLoadOnDemand");
			 

width および height、またはそのいずれかがパーセント (%) で設定され、グリッドの親 DOM コンテナーがサイズ変更された場合にグリッドのサイズ変更を有効/無効にします。

 
				//Initialize
				$(".selector").igTreeGrid({
					enableResizeContainerCheck : false
				});

				//Get
				var enableResizeContainerCheck = $(".selector").igTreeGrid("option", "enableResizeContainerCheck");

				//Set
				$(".selector").igTreeGrid("option", "enableResizeContainerCheck", false);
			 

ローカル時間およびゾーン値の代わりにクライアント側の日付を UTC ISO 8061 文字列としてのシリアル化を有効/無効にします。

 
				//Initialize
				$(".selector").igTreeGrid({
					enableUTCDates : true
				});

				//Get
				var enableUTCDates = $(".selector").igTreeGrid("option", "enableUTCDates");

				//Set
				$(".selector").igTreeGrid("option", "enableUTCDates", true);
			 

このオプションは 2017.2 バージョン以降サポートされません。
展開インジケーター ツールチップ テキストを指定します。
locale.expandTooltipText オプションを使用します。

 
				//Initialize
				$(".selector").igTreeGrid({
					expandTooltipText : "Click here to expand the row"
				});

				//Get
				var collapseTooltip = $(".selector").igTreeGrid("option", "expandTooltipText");
			 

機能セレクター アイコンがヘッダー セルで表示する方法を構成します。オプションは、ギア アイコンとして表示するか、ギア アイコンを表示せずにヘッダー セルにクリック/タップすると機能セレクターを表示します。

 
				//Initialize
				$(".selector").igTreeGrid({
					featureChooserIconDisplay : "always"
				});
				//Get
				var featureChooserIconDisplay = $(".selector").igTreeGrid("option", "featureChooserIconDisplay");
			 

並べ替え、ページングなどのグリッド機能の定義のリスト。各機能はそれぞれ別のオプションを使用します。オプションについては機能ごとに説明があります。詳細については、igGrid の機能をご覧ください。

 
				//Initialize
				$(".selector").igTreeGrid({
			features: [
				{
							name: "Paging",
							type: "local",
							pageSize: 13
						},
						{
							name: "Sorting",
							type: "local"
						},
						{
							name: "Selection"
						},
						{
							name: "Filtering",
							type: "local",
							filterDropDownItemIcons: false,
							filterDropDownWidth: 200
						}
					]
				});

				//Get
				var features = $(".selector").igTreeGrid("option", "features");
			 

• name

  タイプ:

  string

  デフォルト:

  null

  追加する機能の名前。

このオプションが true の場合はフッターが固定されるため、グリッド データのみがスクロール可能になります。virtualization が有効な場合、fixedFooters は、どの値が設定されていても常に true として機能します。

 
				//Initialize
				$(".selector").igTreeGrid({
					fixedFooters : false
				});

				//Get
				var fixed = $(".selector").igTreeGrid("option", "fixedFooters");

				//Set
				$(".selector").igTreeGrid("option", "fixedFooters", false);
			 

このオプションが True の場合、ヘッダーが固定されるので、グリッド データのみがスクロール可能です。virtualization が有効な場合、fixedHeaders は、どの値が設定されていても常に true として機能します。

 
				//Initialize
				$(".selector").igTreeGrid({
					fixedHeaders : false
				});

				//Get
				var fixedHeaders = $(".selector").igTreeGrid("option", "fixedHeaders");
			 

自己参照フラット データ ソースで使用される一意識別子。フラット データ ソースの間の関係を作成するために primaryKey と使用されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					foreignKey: "PID"
				});

				//Get
				var foreignKey = $(".selector").igTreeGrid("option", "foreignKey");
			 

グリッドがデータ バインドされた後、ルート レベルとして使用するデータ ソースの外部キー値を指定します。デフォルト値は -1 (データ ソースをすべて含む) です。

 
				//Initialize
				$(".selector").igTreeGrid({
					foreignKeyRootValue: "FKRV"
				});
				//Get
				var foreignKeyRootValue = $(".selector").igTreeGrid("option", "foreignKeyRootValue");
			 

これは、データ行のあるスクロール コンテナー、ヘッダー、フッター、フィルター行など (もしあれば)、すべての UI 要素を含むグリッドの合計の高さです。詳細については、幅と高さの定義をご覧ください。

 
				//Initialize
				$(".selector").igTreeGrid({
					height : "850px"
				});
				// Get
				var height = $(".selector").igTreeGrid("option", "height");
				// Set
				$(".selector").igTreeGrid("option", "height", "800px");
			 

ツリー グリッド行のインデント (ピクセルまたはパーセンテージ) を指定します。ネスト インデントは、レベルをインデント値と乗算されます。例: '10px' または '5%'。デフォルトは 30 です。

 
				//Initialize
				$(".selector").igTreeGrid({
					indentation: "50px"
				});

				//Get
				var indentation = $(".selector").igTreeGrid("option", "indentation");
			 

初回の描画時にツリー グリッドが展開される深さを指定します。すべての行を展開するには、値を -1 に設定します。デフォルトは -1 です。

 
				//Initialize
				$(".selector").igTreeGrid({
					initialExpandDepth: 3
				});

				//Get
				var initialExpandDepth = $(".selector").igTreeGrid("option", "initialExpandDepth");
			 

最初のインデント レベルが設定されている場合、データ スキップ列の幅を計算するために使用されます。リモートのロード オン デマンドが有効な場合に使用されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					initialIndentationLevel : 10
				});

				//Get
				var initialIndentationLevel = $(".selector").igTreeGrid("option", "initialIndentationLevel");
			 

dataSource が文字列の場合、JSONP タイプのデータ ソースを設定するかどうかを定義します。

 
				//Initialize
				$(".selector").igTreeGrid({
					jsonpRequest : true
				});

				//Get
				var jsonpRequest = $(".selector").igTreeGrid("option", "jsonpRequest");
			 

• collapseTooltipText

  タイプ:

  string

  デフォルト:

  ""

  縮小インジケーター ツールチップ テキストを指定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						locale: {
  							collapseTooltip : "Click here to collapse the row"
  						}
  					});
  
  					//Get
  					var collapseTooltip = $(".selector").igTreeGrid("option", "locale").collapseTooltipText;
  				 

• expandTooltipText

  タイプ:

  string

  デフォルト:

  ""

  展開インジケーター ツールチップ テキストを指定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						locale: {
  							expandTooltipText : "Click here to expand the row"
  						}
  					});
  
  					//Get
  					var collapseTooltip = $(".selector").igTreeGrid("option", "locale").expandTooltipText;
  				 

このオプションが False の場合、グリッドがバインドされるデータは、定義された columns に基づく追加の変換なく「そのまま」で使用されます。定義済みの columns で使用されるデータ プロパティのサブセットのみが新しいオブジェクトに抽出され、使用されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					localSchemaTransform : false
				});

				//Get
				var schemaTransform = $(".selector").igTreeGrid("option", "localSchemaTransform");
			 

データ ソースがリモートの場合、datasource 内に非バインド列を結合します。true の場合、非バインド列がランタイムでデータソースにマージされます。DataSource が新しいデータで展開され、データソースのサイズが大きい場合にパフォーマンスに影響があります。false の場合は非バインドデータがクライアントに送信されます。このオプションは、igGrid MVC ヘルパーで使用されます。
詳細については、非バインド列をリモートに生成 (igGrid) トピックを参照してください。

 
				//Initialize
				$(".selector").igTreeGrid({
					mergeUnboundColumns : true,
					dataSource : REMOTE_URL
				});

				//Get
				var mergeUC = $(".selector").igTreeGrid("option", "mergeUnboundColumns");
			 

一意の識別子を含む列のプライマリ キー名。

 
				//Initialize
				$(".selector").igTreeGrid({
					primaryKey : "CustomerID"
				});

				//Get
				var key = $(".selector").igTreeGrid("option", "primaryKey");
			 

列の dataType が bool の場合、チェックボックスを描画してチェックボックス エディターを使用する機能を取得または設定します。列 template のある列でブール値にチェックボックスは描画されません。

 
				//Initialize
				$(".selector").igTreeGrid({
					renderCheckboxes : true
				});

				//Get
				var renderCheckboxes = $(".selector").igTreeGrid("option", "renderCheckboxes");

				//Set
				$(".selector").igTreeGrid("option", "renderCheckboxes", true);
			 

展開インジケーターを描画する javascript 関数の名前または参照。renderExpansionIndicatorColumn オプションが True の場合のみに呼び出されます。

 
				//Initialize
				$(".selector").igTreeGrid({
					renderExpansionCellFunction :  function(rowData) {
							var html = '<td data-expand-cell="1" data-skip="true">', span = "";
							if(rowData.hasExpandCell){
								if(rowData.expand){
									span = '<span data-expandcell-indicator="1" class="ui-igtreegrid-expansion-column-container" style="padding-left:30px;"><span data-expand-button class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-minus" title="Click here to collapse the row" tabIndex="0"></span></span>';
								} else {
									span = '<span data-expandcell-indicator="1" class="ui-igtreegrid-expansion-column-container" style="padding-left:30px;"><span data-expand-button class="ui-icon ui-igtreegrid-expansion-indicator ui-icon-plus" title="Click here to expand the row" tabIndex="0"></span></span>';
								}
								html += span;
							html +=	'</td>';
							return html;
					}
				});
				//Get
				var renderExpansionCellFunction = $(".selector").igTreeGrid("option", "renderExpansionCellFunction");
			 

展開インジケーターを含むデータなしの列を描画するかどうかを指定します。

 
				//Initialize
				$(".selector").igTreeGrid({
					renderExpansionIndicatorColumn : true
				});

				//Get
				var renderExpansionIndicatorColumn = $(".selector").igTreeGrid("option", "renderExpansionIndicatorColumn");
			 

最初のデータ セルを変更する javascript 関数の名前または参照。データバインドされたレベルに基づいてインデントを描画します。

 
				//Initialize
				$(".selector").igTreeGrid({
					renderFirstDataCellFunction : function(markup, rowData){
						var idxStart, TDSmarkup;
						idxStart = markup.indexOf("<td");
						TDSmarkup = markup.substring(idxStart);
						return TDSmarkup;
					}
				});
				//Get
				var renderFirstDataCellFunction = $(".selector").igTreeGrid("option", "renderFirstDataCellFunction");
			 

要求を送信する HTTP 動詞を指定します。

 
				//Initialize
				$(".selector").igTreeGrid({
					requestType : "POST"
				});

				//Get
				var requestType = $(".selector").igTreeGrid("option", "requestType");
			 

応答のコンテンツ タイプ。http://api.jquery.com/jQuery.ajax/ => contentType を参照してください。

 
				//Initialize
				$(".selector").igTreeGrid({
					responseContentType : "application/json; charset=utf-8"
				});

				//Get
				var responseContentType = $(".selector").igTreeGrid("option", "responseContentType");
			 

$.ig.DataSource responseDataKey を参照してください。応答がラップされる場合、これは基本的に、データ レコードが保持される応答内のプロパティです。

 
				//Initialize
				$(".selector").igTreeGrid({
					responseDataKey : "records"
				});

				//Get
				var responseKey = $(".selector").igTreeGrid("option", "responseDataKey");
			 

$.ig.DataSource responseTotalRecCountKey を参照してください。サーバー上のレコード総数を指定する応答内のプロパティです。

 
				//Initialize
				$(".selector").igTreeGrid({
					responseTotalRecCountKey : "totalRecords"
				});

				//Get
				var recordsCount = $(".selector").igTreeGrid("option", "responseTotalRecCountKey");
			 

行のみ (垂直方向) の仮想化を有効にするオプション。詳細については、仮想化概要 (igGrid) をご覧ください。

 
				// Initialize
				$(".selector").igTreeGrid({
					rowVirtualization : true
				});

				// Get
				var virtualization = $(".selector").igTreeGrid("option", "rowVirtualization");
			 

コンテンツのスクロールに関連する設定。

 
				//Initialize
				$(".selector").igTreeGrid({
					scrollSettings: {
						scrollTop: 100,
						smoothing: true,
						smoothingStep: 2.5
					}
				});

				//Get
				var scrollSettings = $(".selector").igTreeGrid("option", "scrollSettings");

				//Set
				var newSettings = {
					scrollTop: 100,
					smoothing: true,
					smoothingStep: 2.5
				}
				$(".selector").igTreeGrid("option", "scrollSettings", newSettings);
			 

• inertiaDuration

  タイプ:

  number

  デフォルト:

  1

  モバイル デバイスで慣性が持続する時間の修飾子を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							inertiaDuration: 0.75
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").inertiaDuration;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { inertiaDuration: 0.75 });
  				 

• inertiaStep

  タイプ:

  number

  デフォルト:

  1

  モバイル デバイスで慣性がスクロールする量の修飾子を取得または設定します。注: 値を 0 に設定するとタッチ動作を無効にします。値を -1 に設定すると、反転します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							inertiaStep: 2
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").inertiaStep;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { inertiaStep: 2 });
  				 

• scrollLeft

  タイプ:

  number

  デフォルト:

  0

  現在の水平位置を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							scrollLeft: 200
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").scrollLeft;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { scrollLeft: 300 });
  				 

• scrollTop

  タイプ:

  number

  デフォルト:

  0

  現在の垂直位置を取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							scrollTop: 500
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").scrollTop;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { scrollTop: 600 });
  				 

• smoothing

  タイプ:

  bool

  デフォルト:

  false

  マウス ホイールを使用する場合、小さい慣性を持つスムーズ スクロールを使用するかどうかを取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							smoothing: true
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").smoothing;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { smoothing: true });
  				 

• smoothingDuration

  タイプ:

  number

  デフォルト:

  1

  マウス ホイールを一度使用した場合にスクロールのアニメーションが持続する時間の修飾子を取得または設定します。これは、スムーズ スクロール動作のみで使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							smoothingDuration: 1.25
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").smoothingDuration;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { smoothingDuration: 1.25 });
  				 

• smoothingStep

  タイプ:

  number

  デフォルト:

  1

  マウス ホイールを一度使用した場合にスクロールするピクセルを決定する修飾子を取得または設定します。これは、スムーズ スクロール動作のみで使用されます。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							smoothingStep: 2.5
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").smoothingStep;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { smoothingStep: 2.5 });
  				 

• wheelStep

  タイプ:

  number

  デフォルト:

  50

  マウス ホイールを使用する場合、デフォルトのスクロール動作のステップを取得または設定します。

  コード サンプル

   
  					//Initialize
  					$(".selector").igTreeGrid({
  						scrollSettings: {
  							wheelStep: 100
  						}
  					});
  
  					//Get
  					var value = $(".selector").igTreeGrid("option", "scrollSettings").wheelStep;
  
  					//Set
  					$(".selector").igTreeGrid("option", "scrollSettings", { wheelStep: 50 });
  				 

True の場合、トランザクション ログがデータ ソースによってリモート データの要求に常に送られます。また、これは、ログに値がある場合、GET ではなく POST が実行されることを意味します。

 
				//Initialize
				$(".selector").igTreeGrid({
					serializeTransactionLog : false
				});

				//Get
				var log = $(".selector").igTreeGrid("option", "serializeTransactionLog");
			 

子行を持つ行に、エンド ユーザーが展開または折りたたむことができる展開画像が含まれるかどうかを指定します。このオプションは初期化のみに設定できます。

 
				//Initialize
				$(".selector").igTreeGrid({
					showExpansionIndicator : false
				});

				//Get
				var log = $(".selector").igTreeGrid("option", "showExpansionIndicator");
			 

グリッドのフッターの可視性を制御するオプション。

 
				//Initialize
				$(".selector").igTreeGrid({
					showFooter : false
				});

				//Get
				var showFooter = $(".selector").igTreeGrid("option", "showFooter");

				//Set
				$(".selector").igTreeGrid("option", "showFooter", false);
			 

グリッド ヘッダーの可視性をコントロールするオプション。

 
				//Initialize
				$(".selector").igTreeGrid({
					showHeader : false
				});

				//Get
				var showHeader = $(".selector").igTreeGrid("option", "showHeader");

				//Set
				$(".selector").igTreeGrid("option", "showHeader", false);
			 

コンテナー要素に設定される初期 tabIndex 属性。

 
				//Initialize
				$(".selector").igTreeGrid({
					tabIndex : 3
				});

				//Get
				var tabIndex = $(".selector").igTreeGrid("option", "tabIndex");
			 

グリッド列テンプレートを描画するために使用されるテンプレート エンジン。

 
				// Initialize
				$(".selector").igTreeGrid({
					templatingEngine : "jsRender"
				});
				// Get
				var templatingEngine = $(".selector").igTreeGrid("option", "templatingEngine");
			 

更新リクエスト先の URL。

 
				//Initialize
				$(".selector").igTreeGrid({
					updateUrl : "http://mydomain.com/UpdateCustomer"
				});

				//Get
				var updateUrl = $(".selector").igTreeGrid("option", "updateUrl");
			 

仮想化を有効／無効にします。仮想化が描画のパフォーマンスを向上します。有効な場合、描画される行 (DOM 要素) の数は定数で、グリッドの表示可能なビューポートに関連します。エンド ユーザーがスクロールされると、新しいデータを描画するために DOM 要素を動的に更新されます。詳細については、パフォーマンス ガイド (igGrid)についてご覧ください。

 
				// Initialize
				$(".selector").igTreeGrid({
					virtualization : true
				});

				// Get
				var virtualization = $(".selector").igTreeGrid("option", "virtualization");
			 

仮想化モードを決定します。

 
				// Initialize
				$(".selector").igTreeGrid({
					virtualizationMode : "continuous"
				});

				// Get
				var virtualizationMode = $(".selector").igTreeGrid("option", "virtualizationMode");

				// Set
				$(".selector").igTreeGrid("option", "virtualizationMode", "continuous");
			 

仮想化が有効で、仮想グリッド領域上でマウス ホイールのスクロールを実行するときにグリッドの移動するピクセル数。null 値の場合、手順は avgRowHeight と同じです。

 
				// Initialize
				$(".selector").igTreeGrid({
					virtualizationMouseWheelStep : 50
				});

				// Get
				var virtualizationStep = $(".selector").igTreeGrid("option", "virtualizationMouseWheelStep");

				// Set
				$(".selector").igTreeGrid("option", "virtualizationMouseWheelStep", 50);
			 

グリッドの幅をピクセル単位またはパーセントで定義します。詳細については、igGrid の width の設定の詳細をご覧ください。

 
				// Initialize
				$(".selector").igTreeGrid({
					width : "800px"
				});
				// Get
				var width = $(".selector").igTreeGrid("option", "width");
				// Set
				$(".selector").igTreeGrid("option", "width", "850px");