Ignite UI™ API ヘルプ

ui.igTreeGridFiltering

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

igTreeGrid は、一致する行のコンテキストを表示するフィルター機能があります。フィルターオプションは、数値、文字列、日付フィルターを含み、子行を含むか、含まないで一致を結果で表示できます。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

以下のコードスニペットは、igTreeGrid コントロールを初期化する方法を示します。

この API を使用して作業を開始するための情報はここをクリックしてください。igGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、「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">
                var employees = [
                    { "employeeId": 0, "supervisorId": -1, "firstName": "Andrew", "lastName": "Fuller" },
                    { "employeeId": 1, "supervisorId": -1, "firstName": "Jonathan", "lastName": "Smith" },
                    { "employeeId": 2, "supervisorId": -1, "firstName": "Nancy", "lastName": "Davolio" },
                    { "employeeId": 3, "supervisorId": -1, "firstName": "Steven", "lastName": "Buchanan" },

                    // Andrew Fuller's direct reports
                    { "employeeId": 4, "supervisorId": 0, "firstName": "Janet", "lastName": "Leverling" },
                    { "employeeId": 5, "supervisorId": 0, "firstName": "Laura", "lastName": "Callahan" },
                    { "employeeId": 6, "supervisorId": 0, "firstName": "Margaret", "lastName": "Peacock" },
                    { "employeeId": 7, "supervisorId": 0, "firstName": "Michael", "lastName": "Suyama" },

                    // Janet Leverling's direct reports
                    { "employeeId": 8, "supervisorId": 4, "firstName": "Anne", "lastName": "Dodsworth" },
                    { "employeeId": 9, "supervisorId": 4, "firstName": "Danielle", "lastName": "Davis" },
                    { "employeeId": 10, "supervisorId": 4, "firstName": "Robert", "lastName": "King" },

                    // Nancy Davolio's direct reports
                    { "employeeId": 11, "supervisorId": 2, "firstName": "Peter", "lastName": "Lewis" },
                    { "employeeId": 12, "supervisorId": 2, "firstName": "Ryder", "lastName": "Zenaida" },
                    { "employeeId": 13, "supervisorId": 2, "firstName": "Wang", "lastName": "Mercedes" },

                    // Steve Buchanan's direct reports
                    { "employeeId": 14, "supervisorId": 3, "firstName": "Theodore", "lastName": "Zia" },
                    { "employeeId": 15, "supervisorId": 3, "firstName": "Lacota", "lastName": "Mufutau" },

                    // Lacota Mufutau's direct reports
                    { "employeeId": 16, "supervisorId": 15, "firstName": "Jin", "lastName": "Elliott" },
                    { "employeeId": 17, "supervisorId": 15, "firstName": "Armand", "lastName": "Ross" },
                    { "employeeId": 18, "supervisorId": 15, "firstName": "Dane", "lastName": "Rodriquez" },

                    // Dane Rodriquez's direct reports
                    { "employeeId": 19, "supervisorId": 18, "firstName": "Declan", "lastName": "Lester" },
                    { "employeeId": 20, "supervisorId": 18, "firstName": "Bernard", "lastName": "Jarvis" },

                    // Bernard Jarvis' direct report
                    { "employeeId": 21, "supervisorId": 20, "firstName": "Jeremy", "lastName": "Donaldson" }
                ];

               $(function () {
                   $("#treegrid").igTreeGrid({
                       dataSource: employees,
                       primaryKey: "employeeId",
                       foreignKey: "supervisorId",
                       autoGenerateColumns: false,
                       columns: [
                           { headerText: "ID", key: "employeeId", width: "150px", dataType: "number" },
                           { headerText: "First", key: "firstName", width: "150px", dataType: "string" },
                           { headerText: "Last", key: "lastName", width: "150px", dataType: "string" }
                       ],
                       features: [{
                           name: "Filtering",
                           displayMode: "showWithAncestors"
                           //displayMode: "showWithAncestorsAndDescendants"
                       }]
                   });
               });
            </script>
        </head>
        <body>
            <table id="treegrid"></table>
        </body>
        </html>

advancedModeEditorsVisible
継承

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

詳細モードでエディターを表示/非表示にするかを定義します。false の場合、詳細モードではエディターは描画されません。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						advancedModeEditorsVisible : true
					}
				]
			});

			// Get
			var editorsVisible = $(".selector").igTreeGridFiltering("option", "advancedModeEditorsVisible");

			// Set
			$(".selector").igTreeGridFiltering("option", "advancedModeEditorsVisible", true);

advancedModeHeaderButtonLocation
継承

タイプ:: enumeration
デフォルト:: left

advancedModeEditorsVisible が False のとき (つまり、ボタンがヘッダーに描画されるとき) の詳細フィルタリングボタンの場所。

メンバー

left
タイプ:string
right
タイプ:string

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							advancedModeHeaderButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igTreeGridFiltering("option", "advancedModeHeaderButtonLocation");
				// Set
				$(".selector").igTreeGridFiltering("option", "advancedModeHeaderButtonLocation", "right");

caseSensitive
継承

タイプ:

bool

デフォルト:

false
フィルタリングで大文字小文字の区別を有効化または無効化します。ローカルのフィルタリングでのみ使用できます。True の場合、フィルタリングで大文字小文字の区別を有効にします。False の場合、フィルタリングで大文字小文字の区別を無効にします。
コードサンプル
```
 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						caseSensitive : true
					}
				]
			});

			// Get
			var caseSensitive = $(".selector").igTreeGridFiltering("option", "caseSensitive");

			// Set
			$(".selector").igTreeGridFiltering("option", "caseSensitive", true);
			 
```

columnSettings
継承

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

カスタムフィルタリングオプションを列ごとに指定する列設定のリスト。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						columnSettings : [
							{
								columnKey: "ProductDescription", 
								condition: "endsWith"
							}
						]
					}
				]
			});

			// Get
			var colSettings = $(".selector").igTreeGridFiltering("option", "columnSettings");

			// Set
			$(".selector").igTreeGridFiltering("option", "columnSettings", 
				[{columnKey: "ProductDescription", 
					condition: "endsWith"
				}]
			);

allowFiltering

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

列のフィルタリングを有効/無効にします。

コードサンプル

 
					//Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igTreeGridFiltering("option", "columnSettings");
					var filterAllowed = colSettings[0].allowFiltering;

					// Set
					$(".selector").igTreeGridFiltering("option", "columnSettings", colSettings);

columnIndex

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

列インデックスを指定します。すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

コードサンプル

 
					// Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnIndex: 0,
										allowFiltering: false
									}
								]
							}
						]
					});

					// Get
					var colSettings = $(".selector").igTreeGridFiltering("option", "columnSettings");
					var colIndex = colSettings[0].columnIndex;

columnKey

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

列キーを指定します。すべての列設定にキーまたはインデックスのどちらかを設定する必要があります。

コードサンプル

 
					//Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										allowFiltering: false
									}
								]
							}
						]
					});

					//Get
					var colSettings = $(".selector").igTreeGridFiltering("option", "columnSettings");
					var colKey = colSettings[0].columnKey;

condition

タイプ:

enumeration

デフォルト:

null
列のデフォルトフィルタリング条件。
メンバー
- empty
- タイプ:string
- notEmpty
- タイプ:string
- null
- タイプ:string
- notNull
- タイプ:string
- equals
- タイプ:string
- doesNotEqual
- タイプ:string
- startsWith
- タイプ:string
- contains
- タイプ:string
- doesNotContain
- タイプ:string
- endsWith
- タイプ:string
- greaterThan
- タイプ:string
- lessThan
- タイプ:string
- greaterThanOrEqualTo
- タイプ:string
- lessThanOrEqualTo
- タイプ:string
- true
- タイプ:bool
- false
- タイプ:bool
- on
- タイプ:string
- notOn
- タイプ:string
- before
- タイプ:string
- after
- タイプ:string
- today
- タイプ:string
- yesterday
- タイプ:string
- thisMonth
- タイプ:string
- lastMonth
- タイプ:string
- nextMonth
- タイプ:string
- thisYear
- タイプ:string
- nextYear
- タイプ:string
- lastYear
- タイプ:string
- at
- タイプ:string
- notAt
- タイプ:string
- atBefore
- タイプ:string
- atAfter
- タイプ:string
コードサンプル
```
 
					// Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "ProductDescription", 
										condition: "startsWith"
									}
								]
							}
						]
					});
					// Get
					var colSettings = $(".selector").igTreeGridFiltering("option", "columnSettings");
					var condition = colSettings[0].condition;
					// Set
					$(".selector").igTreeGridFiltering("option", "columnSettings", colSettings);
					 
```

conditionList

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

この列に表示する conditions を決定する文字列の配列。

コードサンプル

 
					//Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									conditionList: ["startsWith", "contains"]
								}]
							}
						]
					});

					//Get
					var conditionList = $(".selector").igTreeGridFiltering("option", "columnSettings")[2].conditionList;

customConditions

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

カスタムフィルター条件をこの列のオブジェクトとして指定するためのオブジェクト。
labelText 列の条件ドロップダウンで表示するようなラベル。
expressionText requireExpr が false の場合にエディターに表示するテキスト。
requireExpr この条件にユーザーがフィルター式を入力する必要がある場合
filterImgIcon simple モードでドロップダウン項目に適用されるクラス。
filterFunc カスタム比較フィルター関数。定義: function (value, expression, dataType, ignoreCase, preciseDateFormat)。

コードサンプル

 
					// Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [{
									columnKey: "ProductNumber",
									customConditions: {
										BE: {
											labelText: "BE",
											expressionText: "BE-####",
											requireExpr: false,
											filterFunc: filterProductNumber
										},
										CA: {
											labelText: "CA",
											expressionText: "CA-####",
											requireExpr: false,
											filterFunc: filterProductNumber1
										}
									}
								}]
							}
						]
					});

					function filterProductNumber(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("BE");
					}

					function filterProductNumber1(value, expression, dataType, ignoreCase, preciseDateFormat) {
						return value.startsWith("CA");
					}
					// Get
					var customConditions = $(".selector").igTreeGridFiltering("option", "columnSettings")[2].customConditions;

defaultExpressions

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

最初のフィルタリング式。設定された場合、初期化で適用されます。

コードサンプル

 
					// Initialize
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								columnSettings : [
									{
										columnKey: "Name", 
										defaultExpressions: [
											{ expr: "B", cond: "startsWith" }
										]
									}
								]
							}
						]
					});

					// Get
					var defaultExpressions = $(".selector").igTreeGridFiltering("option", "columnSettings")[0].defaultExpressions;

editorOptions

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

相対するエディターの初期化オプションを指定します。

コードサンプル

 
						//Initialize
						$("#grid").igTreeGrid({
							features: [
								{
									name: "Filtering",
									columnSettings: [
										{
											columnKey : "Name",
											editorType: "text",
											editorOptions: {
												buttonType: "dropdown",
												listItems: names,
												readOnly: true
											}
										}
									]
								}
							]
						});

						//Get
						var columnSettings = $("#grid").igTreeGridFiltering("option", "columnSettings")[0].editorOptions;

						//Set
						$("#grid").igTreeGridFiltering("option", "columnSettings", columnSettings);

editorProvider

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

カスタムエディタープロバイダーインスタンスを指定します。エディタープロバイダーの詳細については、ここおよびここを参照してください。
$.ig.EditorProvider を拡張機能するか、以下のメソッドの定義を含む必要があります:
$.ig.EditorProvider = $.ig.EditorProvider|| $.ig.EditorProvider.extend({
createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {},
attachErrorEvents: function (errorShowing, errorShown, errorHidden) {},
getEditor: function () {},
refreshValue: function () {},
getValue: function () {},
setValue: function (val) {},
setSize: function (width, height) {},
setFocus: function () {},
removeFromParent: function () {},
destroy: function () {},
validator: function () {},
validate: function (noLabel) {},
isValid: function () {}
});

コードサンプル

 
							// This editor provider demonstrates how to wrap HTML 5 number INPUT into editor provider for the igTreeGridFiltering
							$.ig.EditorProviderNumber = $.ig.EditorProviderNumber || $.ig.EditorProvider.extend({
								// initialize the editor
								createEditor: function (callbacks, key, editorOptions, tabIndex, format, element) {
									element = element || $('<input  />');
									// call parent createEditor
									this._super(callbacks, key, editorOptions, tabIndex, format, element);

									element.on("keydown", $.proxy(this.keyDown, this));
									element.on("change", $.proxy(this.change, this));

									this.editor = {};
									this.editor.element = element;
										return element;
								},
								keyDown: function(evt) {
									var ui = {};
									ui.owner = this.editor.element;
									ui.owner.element = this.editor.element;
									this.callbacks.keyDown(evt, ui, this.columnKey);
									// enable "Done" button only for numeric character
									if ((evt.keyCode >= 48 && evt.keyCode <= 57) || (evt.keyCode >= 96 && evt.keyCode <= 105)) {
										this.callbacks.textChanged(evt, ui, this.columnKey);
									}
								},
								change: function (evt) {
									var ui = {};
									ui.owner = this.editor.element;
									ui.owner.element = this.editor.element;
									this.callbacks.textChanged(evt, ui, this.columnKey);
								},
								// get editor value
								getValue: function () {
									return parseFloat(this.editor.element.val());
								},
								// set editor value
								setValue: function (val) {
									return this.editor.element.val(val || 0);
								},
								// size the editor into the TD cell
								setSize: function (width, height) {
									this.editor.element.css({
									width: width - 2,
									height: height - 2,
									borderWidth: "1px",
									backgroundPositionY: "9px"
								});
								},
								// focus the editor
								setFocus: function () {
									this.editor.element.select();
								},
								// validate the editor
								validator: function () {
									// no validator
									return null;
								},
								// destroy the editor
								destroy: function () {
									this.editor.remove();
								}
							});

							//Initialize
							$("#grid").igTreeGrid({
								features: [
									{
										name: "Filtering",
										columnSettings: [
											{
												columnKey : "SafetyStockLevel",
												editorProvider: new $.ig.EditorProviderNumber()
											}
										]
									}
								]
							});

							//Get
							var columnSettings = $("#grid").igTreeGridFiltering("option", "columnSettings")[0].editorProvider;

editorType

タイプ:

enumeration

デフォルト:

null
列に使用するエディターの型を指定します。
メンバー
- text
- タイプ:string
- igTextEditor は作成されます。
- mask
- タイプ:string
- igMaskEditor は作成されます。
- date
- タイプ:string
- igDateEditor は作成されます。
- datepicker
- タイプ:string
- igDatePicker は作成されます。
- timepicker
- タイプ:string
- igTimePicker は作成されます。
- numeric
- タイプ:string
- igNumericEditor は作成されます。
- checkbox
- タイプ:string
- igCheckboxEditor は作成されます。
- currency
- タイプ:string
- igCurrencyEditor は作成されます。
- percent
- タイプ:string
- igPercentEditor は作成されます。
- combo
- タイプ:string
- igCombo エディターは作成されます。ui.igCombo によって使用される css および js ファイルが利用可能です。
- rating
- タイプ:string
- igRating エディターは作成されます。ui.igRating によって使用される css および js ファイルが利用可能です。
コードサンプル
```
 
						//Initialize
						$("#grid").igTreeGrid({
							features: [
								{
									name: "Filtering",
									columnSettings: [
										{
											columnKey : "BirthDate",
											editorType: "datepicker"
										}
									]
								}
							]
						});
						//Get
						var columnSettings = $("#grid").igTreeGridFiltering("option", "columnSettings")[0].editorType;
						//Set
						$("#grid").igTreeGridFiltering("option", "columnSettings", columnSettings);
					 
```

dialogWidget
継承

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

使用するダイアログウィジェットの名前。$.ui.igGridModalDialog から継承します。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						dialogWidget: "advancedModalDialog"
					}
				]
			});

			// Get
			var widgetName = $(".selector").igTreeGridFiltering("option", "dialogWidget");

displayMode

タイプ:

enumeration

デフォルト:

showWithAncestors
displayMode が showWithAncestorsAndDescendants の場合、子レコードがフィルター条件と一致しなくても子レコードを表示します。displayMode が showWithAncestors の場合、フィルター条件と一致するレコードのみを表示し、子レコードがフィルター条件と一致しない場合、子レコードを表示しません。
コードサンプル
```
 
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
								displayMode : "showWithAncestorsAndDescendants"
							}
						]
					});
					//Get
					var displayMode = $(".selector").igTreeGridFiltering("option", "displayMode");
				 
```

featureChooserText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルターが表示され、mode が simple である場合、フィルターの内容が表示されます。locale.featureChooserText オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						featureChooserText : "Hide Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igTreeGridFiltering("option", "featureChooserText");

			// Set
			$(".selector").igTreeGridFiltering("option", "featureChooserText", "Hide Filter");

featureChooserTextAdvancedFilter
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルターモードが詳細である場合、フィルターの内容が表示されます。locale.featureChooserTextAdvancedFilter オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextAdvancedFilter : "Advanced Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igTreeGridFiltering("option", "featureChooserTextAdvancedFilter");

			// Set
			$(".selector").igTreeGridFiltering("option", "featureChooserTextAdvancedFilter", "Advanced Filter");

featureChooserTextHide
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルターが非表示で、mode が simple である場合の機能セレクターのテキスト。locale.featureChooserTextHide オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						featureChooserTextHide : "Show Filter"
					}
				]
			});

			// Get
			var text = $(".selector").igTreeGridFiltering("option", "featureChooserTextHide");

			// Set
			$(".selector").igTreeGridFiltering("option", "featureChooserTextHide", "Show Filter");

filterButtonLocation
継承

タイプ:

enumeration

デフォルト:

left
フィルタードロップダウンのフィルタリングボタンは、フィルターエディターの左側または右側に描画できます。
メンバー
- left
- タイプ:string
- ボタンが左側に描画されます。
- right
- タイプ:string
- ボタンが右側に描画されます。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterButtonLocation : "right"
						}
					]
				});
				// Get
				var location = $(".selector").igTreeGridFiltering("option", "filterButtonLocation");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterButtonLocation", "right");
				 
```

filterDelay
継承

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

フィルタリング要求を送信する前に、キー入力までのウィジェットの待機時間 (ミリ秒)。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDelay : 1000
					}
				]
			});

			// Get
			var delay = $(".selector").igTreeGridFiltering("option", "filterDelay");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterDelay", 1000);

filterDialogAddButtonWidth
継承

タイプ:: enumeration
デフォルト:: 100

詳細フィルターダイアログ内の [追加] ボタンの幅。

メンバー

string
タイプ:string
ピクセルのダイアログ追加ボタン幅 (100px)
number
タイプ:number
数値のダイアログ追加ボタン幅 (100)

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogAddButtonWidth : 75
						}
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogAddButtonWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogAddButtonWidth", 75);

filterDialogAddConditionDropDownTemplate
継承

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

フィルターダイアログの追加条件領域のドロップダウンのオプションのカスタムテンプレート。
デフォルトテンプレートは "<option value='${value}'>${text}</option>" です。filterDialogAddConditionTemplate が適用される場合に使用されます。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionDropDownTemplate: "<option value='${text}'>${text}</option>"
					}
				]
			});

			// Get
			var dropDownTemplate = $(".selector").igTreeGridFiltering("option", "filterDialogAddConditionDropDownTemplate");

			// Set
			$(".selector").igTreeGridFiltering("option",
										   "filterDialogAddConditionDropDownTemplate",
										   "<option value='${text}'>${text}</option>");

filterDialogAddConditionTemplate
継承

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

フィルターダイアログの追加条件領域のカスタムテンプレート。
デフォルトのテンプレートは "

${label1}

${label2}

"。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDialogAddConditionTemplate: "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>"
					}
				]
			});

			// Get
			var addConditionTemplate = $(".selector").igTreeGridFiltering("option", "filterDialogAddConditionTemplate");

			// Set
			$(".selector").igTreeGridFiltering("option",
										   "filterDialogAddConditionTemplate",
										   "<div><div><select></select></div><span>${label1}</span><span>${label2}</span></div>");

filterDialogColumnDropDownDefaultWidth
継承

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

詳細フィルターダイアログ内の列選択ドロップダウンの幅。

メンバー

string
タイプ:string
ピクセルの列選択ドロップダウンの幅 (80px)。
number
タイプ:number
数値の列選択ドロップダウンの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogColumnDropDownDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogColumnDropDownDefaultWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogColumnDropDownDefaultWidth", 100);

filterDialogContainment
継承

タイプ:

string

デフォルト:

"owner"
コンテインメント動作を制御します。
owner - フィルターダイアログはグリッド領域でのみドラッグ可能です。
window - フィルターダイアログはウィンドウ領域全体でドラッグ可能です。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogContainment : "window"
					    }
					]
				});

				// Get
				var filterDialogContainment = $(".selector").igTreeGridFiltering("option", "filterDialogContainment");
				 
```

filterDialogExprInputDefaultWidth
継承

タイプ:: enumeration
デフォルト:: 100

詳細フィルターダイアログ内のフィルタリングの式の入力ボックスの幅。

メンバー

string
タイプ:string
ピクセルのフィルター式入力ボックスの幅 (80px)。
number
タイプ:number
数値のフィルター式入力ボックスの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogExprInputDefaultWidth : 100
					    }
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogExprInputDefaultWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogExprInputDefaultWidth", 100);

filterDialogFilterConditionTemplate
継承

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

フィルターダイアログにある条件リストのオプションのカスタムテンプレート。
デフォルトテンプレートは "<option value='${condition}'>${text}</option>" です。"data-af-cond" 属性がある DOM 要素をカスタマイズ化するために使用されます。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDialogFilterConditionTemplate: "<option value='${conditionName}'>${conditionLabel}</option>"
					}
				]
			});

			// Get
			var filterConditionTemplate = $(".selector").igTreeGridFiltering("option", "filterDialogFilterConditionTemplate");

			// Set
			$(".selector").igTreeGridFiltering("option",
										   "filterDialogFilterConditionTemplate",
										   "<option value='${conditionName}'>${conditionLabel}</option>");

filterDialogFilterDropDownDefaultWidth
継承

タイプ:: enumeration
デフォルト:: 150

詳細フィルターダイアログ内のフィルタリング条件ドロップダウンの幅。

メンバー

string
タイプ:string
ピクセルのフィルター条件ドロップダウンの幅 (80px)。
number
タイプ:number
数値のフィルター条件ドロップダウンの幅 (80)

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterDropDownDefaultWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogFilterDropDownDefaultWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogFilterDropDownDefaultWidth", 100);

filterDialogFilterTemplate
継承

タイプ:

string

デフォルト:

null
フィルターダイアログのカスタムテンプレート。
フィルター条件/列/フィルター式を選択するために使用される各 DOM 要素は "data-*" 属性があります。
例: 列を選択するための DOM 要素は "data-af-col" 属性があります。フィルター条件の選択で使用される要素は "data-af-cond" があります。フィルター式の要素は "data-af-expr" があります。
注: テンプレートは <tr /> のみでサポートされます。
デフォルトテンプレートは「<tr data-af-row><td><input data-af-col/></td><td><input data-af-cond/></td><td><input data-af-expr /> </td><td><span data-af-rmv></span></td></tr>」。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogFilterTemplate: "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>"
						}
					]
				});

				// Get
				var dialogFilterTemplate = $(".selector").igTreeGridFiltering("option", "filterDialogFilterTemplate");

				// Set
				$(".selector").igTreeGridFiltering("option",
											   "filterDialogFilterTemplate",
											   "<tr><td>Choose column<input/></td><td>Condition<select></select></td><td>Search value<input /> </td><td><span></span></td></tr>");
				 
```
filterDialogHeight
継承

タイプ:

enumeration

デフォルト:

340
デフォルトフィルターダイアログの高さ (詳細フィルター mode で使用)。
メンバー
- string
- タイプ:string
- ピクセルでのダイアログウィンドウの高さ (350px)。
- number
- タイプ:number
- 数値のダイアログウィンドウの高さ (350)。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogHeight : 30
						}
					]
				});
				// Get
				var height = $(".selector").igTreeGridFiltering("option", "filterDialogHeight");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogHeight", 30);
				 
```

filterDialogMaxFilterCount
継承

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

詳細フィルタリングダイアログ内のフィルター行の最大数。この数を超えると、エラーメッセージが描画されます。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDialogMaxFilterCount : 3
					}
				]
			});

			// Get
			var count = $(".selector").igTreeGridFiltering("option", "filterDialogMaxFilterCount");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterDialogMaxFilterCount", 3);

filterDialogOkCancelButtonWidth
継承

タイプ:

enumeration

デフォルト:

120
詳細フィルタリングダイアログ内の [OK] および [キャンセル] ボタンの幅。
メンバー
- string
- タイプ:string
- ピクセルの詳細フィルターダイアログ OK およびキャンセルボタンの幅 (120 px)。
- number
- タイプ:number
- 数値の詳細フィルターダイアログ OK およびキャンセルボタンの幅 (120)。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogOkCancelButtonWidth : 120
						}
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogOkCancelButtonWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogOkCancelButtonWidth", 120);
				 
```

filterDialogWidth
継承

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

デフォルトフィルターダイアログの幅 (詳細フィルター mode で使用)。

メンバー

string
タイプ:string
ピクセルでのダイアログウィンドウ幅 (500 px)。
number
タイプ:number
数値のダイアログウィンドウの幅 (500)。

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDialogWidth : 500
						}
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDialogWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDialogWidth", 500);

filterDropDownAnimationDuration
継承

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

フィルタードロップダウンのアニメーションの期間 (ミリ秒単位)。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimationDuration : 300
					}
				]
			});

			// Get
			var duration = $(".selector").igTreeGridFiltering("option", "filterDropDownAnimationDuration");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterDropDownAnimationDuration", 300);

filterDropDownAnimations
継承

タイプ:

enumeration

デフォルト:

linear
列フィルタードロップダウンのアニメーションのタイプ。
メンバー
- linear
- タイプ:string
- 列フィルタードロップダウンがリニアアニメーションで表示されます。
- none
- タイプ:string
- フィルタードロップダウンの表示にアニメーションはありません。
コードサンプル
```
 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterDropDownAnimations : "none"
					}
				]
			});
			// Get
			var animation = $(".selector").igTreeGridFiltering("option", "filterDropDownAnimations");
			// Set
			$(".selector").igTreeGridFiltering("option", "filterDropDownAnimations", "none");
			 
```

filterDropDownHeight
継承

タイプ:: object
デフォルト:: 0

列フィルタードロップダウンの高さ。
ピクセルの列フィルタードロップダウンの高さ (0px)。
数値のフィルタードロップダウンの高さ (0)。

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownHeight : 30
						}
					]
				});

				// Get
				var height = $(".selector").igTreeGridFiltering("option", "filterDropDownHeight");

				// Set
				$(".selector").igTreeGridFiltering("option", "filterDropDownHeight", 30);

filterDropDownItemIcons
継承

タイプ:

enumeration

デフォルト:

true
フィルターアイコンの表示状態を有効/無効にします。
メンバー
- true
- タイプ:bool
- フィルタードロップダウン内のすべての定義済みのフィルターで、テキストの前にアイコンが描画されます。
- false
- タイプ:bool
- アイコンは描画されません。
コードサンプル
```
 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownItemIcons : false
						}
					]
				});
				// Get
				var showIcons = $(".selector").igTreeGridFiltering("option", "filterDropDownItemIcons");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDropDownItemIcons", false);
				 
```

filterDropDownWidth
継承

タイプ:: enumeration
デフォルト:: 0

列フィルタードロップダウンの幅。

メンバー

string
タイプ:string
ピクセルの幅 (0 px)
number
タイプ:number
数値の幅 (0)。

コードサンプル

 
				// Initialize
				$(".selector").igTreeGrid({
					features: [
						{
							name : "Filtering",
							filterDropDownWidth : 100
						}
					]
				});
				// Get
				var width = $(".selector").igTreeGridFiltering("option", "filterDropDownWidth");
				// Set
				$(".selector").igTreeGridFiltering("option", "filterDropDownWidth", 100);

filterExprUrlKey
継承

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

リモート要求に対してフィルタリングの式をエンコードする方法を指定する URL キー名。たとえば、&filter('col') = startsWith。デフォルトは OData です。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterExprUrlKey : "filter"
					}
				]
			});

			// Get
			var key = $(".selector").igTreeGridFiltering("option", "filterExprUrlKey");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterExprUrlKey", "filter");

filterSummaryAlwaysVisible
継承

タイプ:

bool

デフォルト:

true
フィルターの概要情報でフッターの表示を有効または無効にします。
False の場合、(フッター内の) フィルター集計行はページング (または、フッターを描画する他の機能) が有効なときのみ表示されます。
True の場合、フィルター集計行はフィルターが適用されるときのみ表示されます。デフォルトでは表示されません。
コードサンプル
```
 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryAlwaysVisible : false
					}
				]
			});

			// Get
			var showSummary = $(".selector").igTreeGridFiltering("option", "filterSummaryAlwaysVisible");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterSummaryAlwaysVisible", false);
			 
```
filterSummaryInPagerTemplate
削除

タイプ:

string

デフォルト:

null
このオプションは 2017.2 バージョン以降サポートされません。
フィルタリングが適用され、ページングが有効な場合、ユーザーがその他のページに移動するときに使用されるテンプレート。igTreeGridPaging の pagerRecordsLabelTemplate より優先されます。null に設定される場合、igTreeGridPaging オプションを使用します。
サポートされるオプション:
$currentPageMatches (フィルター)
$totalMatches (フィルター)
$startRecord (ページング)
$endRecord (ページング)
$recordCount (ページング)。
locale.collapseTooltipText オプションを使用します。
コードサンプル
```
        //Initialize
        $(".selector").igTreeGrid({
            features: [
                {
                    name : "Filtering",
                    filterSummaryInPagerTemplate : "${startRecord} - ${endRecord} of ${recordCount} records"
                }
            ]
        });

        //Get
        var filterPagerSummary = $(".selector").igTreeGridFiltering("option", "filterSummaryInPagerTemplate");
      
```

filterSummaryTemplate
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フッターの左下隅に表示されるサマリーテンプレート。「${matches} の一致レコード」の形式を持っています。locale.filterSummaryTemplate オプションを使用します。

コードサンプル

 
			// Initialize
			$(".selector").igTreeGrid({
				features: [
					{
						name : "Filtering",
						filterSummaryTemplate: "${matches} products found"
					}
				]
			});

			// Get
			var summaryTemplate = $(".selector").igTreeGridFiltering("option", "filterSummaryTemplate");

			// Set
			$(".selector").igTreeGridFiltering("option", "filterSummaryTemplate", "${matches} products");

fromLevel

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

フィルターの適用を開始するデータバインドされたレベルを指定します。0 は最初のレベルです。

コードサンプル

 
					$(".selector").igTreeGrid({
						features: [
							{
								name : "Filtering",
									fromLevel: 1
							}
						]
					});

					//Get
					var fromLevel = $(".selector").igTreeGridFiltering("option", "fromLevel");

labels
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
フィルタードロップダウン内の定義済みのフィルタリング条件で使用する設定可能なローカライズ済みのラベルのリスト。locale オプションを使用します。