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 オプションを使用します。