Ignite UI™ API ヘルプ

ui.igTreeGridHiding

igTreeGrid の列の非表示機能を使用すると、ユーザーは、グリッドの表示レイアウトから列を削除および復元できます。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

この 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: "Hiding",
                     columnSettings: [
                     {
                        columnKey: "employeeId",
                        allowHiding: true,
                        hidden: true
                     },
                     {
                        columnKey: "lastName",
                        allowHiding: false
                     }
                  ]
                 }
             ]
           });
       });
    </script>
</head>
<body>
    <table id="treegrid"></table>
</body>
</html>

columnChooserAnimationDuration
継承

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

モーダルダイアログを表示/非表示にするためにアニメーション期間のミリ秒の時間を指定します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserAnimationDuration: 300
        }
    ]
});
//Get
var duration = $(".selector").igTreeGridHiding("option", "columnChooserAnimationDuration");

columnChooserButtonApplyText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
モーダルダイアログで変更を適用するボタンのテキストを指定します。locale.columnChooserButtonApplyText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserButtonApplyText: "Apply"
        }
    ]
});
//Get
var text = $(".selector").igTreeGridHiding("option", "columnChooserButtonApplyText");

columnChooserButtonCancelText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
モーダルダイアログで変更をキャンセルするボタンのテキストを指定します。locale.columnChooserButtonCancelText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserButtonCancelText: "Cancel"
        }
    ]
});
//Get
var text = $(".selector").igTreeGridHiding("option", "columnChooserButtonCancelText");

columnChooserCaptionText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
列チューザーダイアログのキャプション。locale.columnChooserCaptionText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserCaptionText: "New Caption"
        }
    ]
});
//Get
var columnChooserCaptionText = $(".selector").igTreeGridHiding("option", "columnChooserCaptionText");

columnChooserContainment
継承

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

コンテインメント動作を制御します。
owner 列選択ダイアログはグリッド領域のみにドラッグ可能です。
window 列選択ダイアログはウィンドウ領域の全体にドラッグ可能です。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserContainment: "window"
        }
    ]
});
 
//Get
var columnChooserContainment = $(".selector").igTreeGridHiding("option", "columnChooserContainment");

columnChooserDisplayText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
列チューザーダイアログを開始するために、ドロップダウンのツールメニュー (機能選択) で使用されるテキスト。locale.columnChooserDisplayText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserDisplayText: "New Text"
        }
    ]
});
 
//Get
var columnChooserDisplayText = $(".selector").igTreeGridHiding("option", "columnChooserDisplayText");

columnChooserHeight
継承

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

デフォルトの列セレクターの高さ。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserHeight: 100
        }
    ]
});
//Get
var columnChooserHeight = $(".selector").igTreeGridHiding("option", "columnChooserHeight");

columnChooserHideOnClick
継承

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

列を表示/非表示にするためにクリックして直接表示するか、それとも非表示にするかを指定します。columnChooserHideOnClick が false の場合、適用ボタンとキャンセルボタンがモーダルダイアログの下側に表示されます。[適用] ボタンがクリックされた後で列が表示/非表示になります。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserHideOnClick: true
        }
    ]
});
//Get
var onClick = $(".selector").igTreeGridHiding("option", "columnChooserHideOnClick");

columnChooserHideText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
列を非表示にするために列選択で使用されるテキスト。locale.columnChooserHideText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserHideText: "Hide column"
        }
    ]
});
//Get
var text = $(".selector").igTreeGridHiding("option", "columnChooserHideText");

columnChooserResetButtonLabel
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
リセットボタン用のテキストラベル。locale.columnChooserResetButtonLabel オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserResetButtonLabel: "Reset"
        }
    ]
});
//Get
var text = $(".selector").igTreeGridHiding("option", "columnChooserResetButtonLabel");

columnChooserShowText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
列を表示するために列選択で使用されるテキスト。locale.columnChooserShowText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserShowText: "Show Column"
        }
    ]
});
//Get
var text = $(".selector").igTreeGridHiding("option", "columnChooserShowText");

columnChooserWidth
継承

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

デフォルトの列セレクターの幅。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserWidth: 100
        }
    ]
});
//Get
var columnChooserWidth = $(".selector").igTreeGridHiding("option", "columnChooserWidth");

columnHideText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
列を非表示にするために、ドロップダウンのツールメニュー (機能選択) で使用されるテキスト。locale.columnHideText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnHideText: "Functionallity to hide the column"
        }
    ]
});
//Get
var columnHideText = $(".selector").igTreeGridHiding("option", "columnHideText");

columnSettings
継承

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

非表示オプションを列ごとに指定する列設定のリスト。

コードサンプル

    //Initialize
    $(".selector").igTreeGrid({
        features : [
            {
                name : "Hiding",
columnSettings: [
                    { columnKey: "ProductID", allowHiding: true },
                ]
            }
        ]
    });
    //Get
    var columnSettings = $(".selector").igTreeGridHiding("option", "columnSettings");

allowHiding

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

列の非表示を許可します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Hiding",
            columnSettings: [
                { columnIndex: 0, allowHiding: true },
            ]
        }
    ]
});
//Get
var columnSettings = $(".selector").igTreeGridHiding("option", "columnSettings");
var allowHiding = columnSettings[0].allowHiding;

columnIndex

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

列インデックス。列キーの代わりに使用できます。列設定の生成には列を常に識別子として使用することを推奨します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Hiding",
            columnSettings: [
                { columnIndex: 0, allowHiding: true },
            ]
        }
    ]
});

columnKey

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

列キー。これは、columnIndex が設定されていない場合に各列設定で必要なプロパティです。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Hiding",
            columnSettings: [
                { columnKey: "ProductID", allowHiding: true },
            ]
        }
    ]
});

hidden

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

列の初期表示状態 (表示/非表示) を設定します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [
        {
            name: "Hiding",
            columnSettings: [
                { columnKey: "ProductID", hidden: true },
            ]
        }
    ]
});

dialogWidget
継承

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

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

コードサンプル

//create dialog widget that inherits from $.ui.igGridModalDialog
$.widget("ui.CustomDialog", $.ui.igGridModalDialog, {});
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            dialogWidget: "CustomDialog"
        }
    ]
});
 
    //Get
var dialogWidget = $(".selector").igTreeGridHiding("option", "dialogWidget");

dropDownAnimationDuration
継承

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

ドロップダウンアニメーションの時間 (ミリ秒)。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            dropDownAnimationDuration: 500
        }
    ]
});
//Get
var dropDownAnimationDuration = $(".selector").igTreeGridHiding("option", "dropDownAnimationDuration");

hiddenColumnIndicatorHeaderWidth
継承

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

ヘッダー内の非表示の列インジケーターの幅 (ピクセル)。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            hiddenColumnIndicatorHeaderWidth: 15
        }
    ]
});
//Get
var hiddenColumnIndicatorHeaderWidth = $(".selector").igTreeGridHiding("option", "hiddenColumnIndicatorHeaderWidth");

hiddenColumnIndicatorTooltipText
削除

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

このオプションは 2017.2 バージョン以降サポートされません。
非表示の列インジケーターのツールチップに表示されるテキスト。locale.hiddenColumnIndicatorTooltipText オプションを使用します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            hiddenColumnIndicatorTooltipText: "New Tooltip Text"
        }
    ]
});
//Get
var hiddenColumnIndicatorTooltipText = $(".selector").igTreeGridHiding("option", "hiddenColumnIndicatorTooltipText");

locale
継承

タイプ:: object
デフォルト:: {}

columnChooserButtonApplyText

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

モーダルダイアログで変更を適用するボタンのテキストを指定します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserButtonApplyText: "Apply"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserButtonApplyText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserButtonApplyText: "Apply" });

columnChooserButtonCancelText

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

モーダルダイアログで変更を取り消すボタンのテキストを指定します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserButtonCancelText: "Cancel"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserButtonCancelText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserButtonCancelText: "Cancel" });

columnChooserCaptionLabel

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

列チューザーダイアログのキャプション。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserCaptionLabel: "New Caption"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserCaptionLabel;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserCaptionLabel: "New Caption" });

columnChooserCloseButtonTooltip

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

列チューザーダイアログの [閉じる] ボタンのツールチップ。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserCloseButtonTooltip: "Close"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserCloseButtonTooltip;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserCloseButtonTooltip: "Close" });

columnChooserDisplayText

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

列チューザーダイアログを開始するために、ドロップダウンのツールメニュー (機能選択) で使用されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserDisplayText: "New Text"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserDisplayText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserDisplayText: "New Text" });

columnChooserHideText

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

列を非表示にするために列選択で使用されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserHideText: "Hide Column"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserHideText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserHideText: "Hide Column" });

columnChooserResetButtonLabel

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

リセットボタン用のテキストラベル。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserResetButtonLabel: "Reset"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserResetButtonLabel;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserResetButtonLabel: "Reset" });

columnChooserShowText

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

列を表示するために列選択で使用されるテキスト

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnChooserShowText: "Show Column"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnChooserShowText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnChooserShowText: "Show Column" });

columnHideText

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

列を非表示にするために、ドロップダウンのツールメニュー (機能選択) で使用されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            columnHideText: "New Tooltip Text"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").columnHideText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { columnHideText: "New Tooltip Text" });

hiddenColumnIndicatorTooltipText

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

非表示の列インジケーターのツールチップに表示されるテキスト。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            hiddenColumnIndicatorTooltipText: "New Tooltip Text"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").hiddenColumnIndicatorTooltipText;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { hiddenColumnIndicatorTooltipText: "New Tooltip Text" });

hideColumnIconTooltip

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

非表示列アイコンのツールチップを指定します。

コードサンプル

//Initialize
$(".selector").igTreeGrid({
    features: [{
        name: "Hiding",
        locale: {
            hideColumnIconTooltip: "Hide"
        }
    }]
});
 
//  Get
var text = $(".selector").igTreeGridHiding("option", "locale").hideColumnIconTooltip;
 
//  Set
$(".selector").igTreeGridHiding("option", "locale", { hideColumnIconTooltip: "Hide" });

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

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

詳細の表示

columnChooserButtonApplyClick
継承

キャンセル可能:: false

列選択の [適用] ボタンがクリックされたときに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization       
  $(document).delegate(".selector", "igtreegridhidingcolumnchooserbuttonapplyclick", function (evt, ui) { 
      //return the triggered event
      evt;
       
      // reference to the igTreeGridHiding widget.
      ui.owner; 
       
      // reference to the grid widget.
      ui.owner.grid; 
       
      // reference to the Column Chooser jQuery element.
      ui.columnChooserElement;  
       
      // reference to array of columns identifiers which should be shown.
      ui.columnsToShow; 
       
      // reference to array of columns identifiers which should be hidden.
      ui.columnsToHide; 
  });
   
  //Initialize
  $(".selector").igTreeGrid({
      features : [
          {
              name : "Hiding",
              columnChooserButtonApplyClick: function(evt, ui){ ... }
          }
      ]
  });

columnChooserButtonResetClick
継承

キャンセル可能:: false

列セレクターの Reset ボタンをクリックすると、イベントが開始します。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchooserbuttonresetclick", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the igTreeGridHiding widget.
    ui.owner;
 
    // reference to the grid widget.
    ui.owner.grid;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserButtonResetClick: function(evt, ui){ ... }
        }
    ]
});

columnChooserClosed
継承

キャンセル可能:: false

列選択が閉じた後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchooserclosed", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserClosed: function(evt, ui){ ... }
        }
    ]
});

columnChooserClosing
継承

キャンセル可能:: true

列選択が閉じる前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchooserclosing", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserClosing: function(evt, ui){ ... }
        }
    ]
});

columnChooserContentsRendered
継承

キャンセル可能:: false

列選択のコンテンツが描画された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchoosercontentsrendered", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserContentsRendered: function(evt, ui){ ... }
        }
    ]
});

columnChooserContentsRendering
継承

キャンセル可能:: true

列選択のコンテンツが描画される前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchoosercontentsrendering", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserContentsRendering: function(evt, ui){ ... }
        }
    ]
});

columnChooserMoving
継承

キャンセル可能:: true

列選択の位置が変わるたびに発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchoosermoving", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
    // current postion
    ui.position;
 
    // previous position
    ui.originalPosition;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserMoving: function(evt, ui){ ... }
        }
    ]
});

columnChooserOpened
継承

キャンセル可能:: false

列選択が既に開いた後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchooseropened", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserOpened: function(evt, ui){ ... }
        }
    ]
});

columnChooserOpening
継承

キャンセル可能:: true

列選択が開く前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnchooseropening", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the Column Chooser jQuery element.
    ui.columnChooserElement;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnChooserOpening: function(evt, ui){ ... }
        }
    ]
});

columnHidden
継承

キャンセル可能:: false

非表示が実行され結果が描画された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnhidden", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // the index of the column, which is hidden
    ui.columnIndex;
 
    // the key of the column, which is hidden
    ui.columnKey;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnHidden: function(evt, ui){ ... }
        }
    ]
});

columnHiding
継承

キャンセル可能:: true

非表示操作が実行される前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnhiding", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // the index of the column, which is going to be hidden
    ui.columnIndex;
 
    // the key of the column, which is going to be hidden
    ui.columnKey;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnHiding: function(evt, ui){ ... }
        }
    ]
});

columnHidingRefused
継承

キャンセル可能:: false

固定または固定解除領域ですべての列を非表示するときに発生されるイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnhidingrefused", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // array of column keys, which are refused to hide
    ui.columnKeys;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnHidingRefused: function(evt, ui){ ... }
        },
        {
            name: "ColumnFixing"
        }
    ]
});

columnShowing
継承

キャンセル可能:: true

表示操作が実行される前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnshowing", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // the index of the column, which is going to be shown
    ui.columnIndex;
 
    // the key of the column, which is going to be shown
    ui.columnKey;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnShowing: function(evt, ui){ ... }
        }
    ]
});

columnShowingRefused
継承

キャンセル可能:: false

固定領域に列を表示し、固定領域の幅はグリッドの幅より大きい場合に発生されるイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnshowingrefused", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // array of column keys, which are refused to show
    ui.columnKeys;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnShowingRefused: function(evt, ui){ ... }
        },
        {
            name: "ColumnFixing"
        }
    ]
});

columnShown
継承

キャンセル可能:: false

表示が実行され結果が描画された後に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingcolumnshown", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // the index of the column, which is shown
    ui.columnIndex;
 
    // the key of the column, which is shown
    ui.columnKey;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
            columnShown: function(evt, ui){ ... }
        }
    ]
});

multiColumnHiding
継承

キャンセル可能:: true

非表示操作が実行される前に発生するイベント。

evt
タイプ: Event

jQuery イベントオブジェクト。
ui
タイプ: Object

コードサンプル

//Bind after initialization
$(document).on("igtreegridhidingmulticolumnhiding", ".selector", function (evt, ui) {
    //return the triggered event
    evt;
 
    // reference to the igTreeGridHiding widget
    ui.owner;
 
    // reference to the igTreeGrid widget
    ui.owner.grid;
 
    // array of the hidden column keys
    ui.columnKeys;
});
 
//Initialize
$(".selector").igTreeGrid({
    features : [
        {
            name : "Hiding",
                    multiColumnHiding: function(evt, ui){ ... }
        }
    ]
});

詳細の表示

changeLocale
継承

.igTreeGridHiding( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。
コードサンプル

$(".selector").igTreeGridHiding("changeLocale");
destroy

.igTreeGridHiding( "destroy" );
非表示ウィジェットを破棄します。
コードサンプル

$(".selector").igTreeGridHiding("destroy");

hideColumn
継承

.igTreeGridHiding( "hideColumn", column:object, [callback:function] );

表示される列を非表示にします。列が非表示の場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。

column
タイプ:object
列の識別子。数が提供した場合、列インデックスとして使用され、文字列が提供した場合、列キーとして使用されます。
callback
タイプ:function
オプション
列を非表示したときに呼び出すカスタム関数を指定します (オプション)。

コードサンプル

//Hide the column with columnIndex 0
$(".selector").igTreeGridHiding("hideColumn", 0);
 
//Hide the column with a key 'Name'
$(".selector").igTreeGridHiding("hideColumn", "Name");
 
//Hide the column with a key 'Name', with a callback function which executes after the column is hidden (hiding column operation is asynchronous)
$(".selector").igTreeGridHiding("hideColumn", "Name", function () {
    // Custom code which executes after the hide column operation is complete.
});

hideColumnChooser
継承

.igTreeGridHiding( "hideColumnChooser" );
列選択ダイアログを非表示にします。非表示の場合、メソッドは何も行いません。
コードサンプル

$(".selector").igTreeGridHiding("hideColumnChooser");

hideMultiColumns
継承

.igTreeGridHiding( "hideMultiColumns", columns:array, [callback:function] );

配列によって指定される表示列を非表示にします。列が非表示の場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。

columns
タイプ:array
列の識別子の配列。数が提供した場合、列インデックスとして使用され、文字列が提供した場合、列キーとして使用されます。
callback
タイプ:function
オプション
すべての列が非表示したときに呼び出すカスタム関数を指定します (オプション)。

コードサンプル

// the parameter is an array of the column keys
$(".selector").igTreeGridHiding("hideMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] );
 
// the parameter is an array of the column index
$(".selector").igTreeGridHiding("hideMultiColumns", [1, 3, 4] );
 
// the parameters are an array of column keys and a callback function which executes after the columns are hidden
$(".selector").igTreeGridHiding("hideMultiColumns", ['FirstName', 'Address', 'PhoneNumber'], function () {
    // Custom code which executes after the hide columns operation is complete.
});

isToRenderButtonReset
継承

.igTreeGridHiding( "isToRenderButtonReset" );
列チューザーダイアログのリセットボタンが描画されるかどうかを取得します。
コードサンプル

$(".selector").igTreeGridHiding("isToRenderButtonReset");
removeColumnChooserResetButton
継承

.igTreeGridHiding( "removeColumnChooserResetButton" );
列選択のモーダルダイアログから [リセット] ボタンを削除します
コードサンプル

$(".selector").igTreeGridHiding("removeColumnChooserResetButton");
renderColumnChooserResetButton
継承

.igTreeGridHiding( "renderColumnChooserResetButton" );
列チューザーダイアログのリセットボタンを描画します。
コードサンプル

$(".selector").igTreeGridHiding("renderColumnChooserResetButton");
resetHidingColumnChooser
継承

.igTreeGridHiding( "resetHidingColumnChooser" );
非表示 / 表示した列を、ダイアログの初期状態 (開いた状態) にリセットします。
コードサンプル

$(".selector").igTreeGridHiding("resetHidingColumnChooser");

showColumn
継承

.igTreeGridHiding( "showColumn", column:object, [callback:function] );

非表示の列を表示します。列が非表示でない場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。

column
タイプ:object
列の識別子。数が提供した場合、列インデックスとして使用され、文字列が提供した場合、列キーとして使用されます。
callback
タイプ:function
オプション
列が表示したときに呼び出すカスタム関数を指定します (オプション)。

コードサンプル

//Show the column with columnIndex 0
$(".selector").igTreeGridHiding("showColumn", 0);
 
//Show the column with a key 'Name'
$(".selector").igTreeGridHiding("showColumn", "Name");
 
//Show the column with a key 'Name', with a callback function which executes after the column is shown (showing column operation is asynchronous)
$(".selector").igTreeGridHiding("showColumn", "Name", function () {
    // Custom code which executes after the show column operation is complete.
});

showColumnChooser
継承

.igTreeGridHiding( "showColumnChooser" );
列選択ダイアログを表示します。表示されている場合、メソッドは何も行いません。
コードサンプル

$(".selector").igTreeGridHiding("showColumnChooser");

showMultiColumns
継承

.igTreeGridHiding( "showMultiColumns", columns:array, [callback:function] );

配列によって指定される表示列を表示にします。列が表示される場合、このメソッドは何もしません。
注: このメソッドは非同期です。ただちに返し、以後のコードは並行して実行されます。ランタイムエラーを発生する場合があります。エラーを回避するには、メソッドによって提供されるコールバックパラメーターに以後のコードを挿入します。

columns
タイプ:array
列の識別子の配列。数が提供した場合、列インデックスとして使用され、文字列が提供した場合、列キーとして使用されます。
callback
タイプ:function
オプション
すべての列が表示したときに呼び出すカスタム関数を指定します (オプション)。

コードサンプル

// the parameter is an array of the column keys
$(".selector").igTreeGridHiding("showMultiColumns", ['FirstName', 'Address', 'PhoneNumber'] );
 
// the parameter is an array of the column index
$(".selector").igTreeGridHiding("showMultiColumns", [1, 3, 4] );
 
// the parameters are an array of column keys and a callback function which executes after the columns are shown
$(".selector").igTreeGridHiding("showMultiColumns", ['FirstName', 'Address', 'PhoneNumber'], function () {
    // Custom code which executes after the show columns operation is complete.
});

ui-dialog ui-draggable ui-resizable ui-iggrid-dialog ui-widget ui-widget-content ui-corner-all

列選択要素に適用されるクラス。
ui-dialog-content ui-iggrid-columnchooser-content

列選択のダイアログコンテンツに適用されるクラス。
ui-iggrid-columnchooser-handlebar

下部にある列チューザーのハンドルバーに適用されるクラス。
ui-dialog-titlebar ui-iggrid-columnchooser-caption ui-widget-header ui-corner-top ui-helper-reset ui-helper-clearfix

列選択ダイアログのヘッダーキャプション領域に適用されるクラス。
ui-dialog-title ui-iggrid-columnchooser-caption-title

列選択ダイアログのヘッダーキャプションタイトルに適用されるクラス。
ui-iggrid-columnchooser-hidebutton

列選択の (単一の列を表示する) リスト項目の [非表示] ボタンに適用されるクラス。
ui-iggrid-columnchooser-item ui-widget-content

列選択の (単一の列を表示する) リスト項目に適用されるクラス。
ui-iggrid-columnchooser-itemhidden

列が非表示される場合、列選択の (単一の列を表示する) リスト項目に適用されるクラス。
ui-iggrid-dialog-text

列選択の (単一の列を表示する) リスト項目の [表示] ボタンに適用されるクラス。
ui-iggrid-columnchooser-listitems

列選択の (すべての列を表示する) リストに適用されるクラス。
ui-icon ui-iggrid-icon-hide

非表示機能の機能選択アイコンに適用されるクラス。
ui-icon ui-iggrid-icon-column-chooser

列選択機能の機能選択アイコンに適用されるクラス。
ui-iggrid-hiding-hiddencolumnindicator

ヘッダーの非表示の列インジケーターに適用されるクラス。
ui-iggrid-hiding-indicator-mouseover

マウスがその上にある時に、ヘッダーの非表示の列インジケーターに適用されるクラス。
ui-iggrid-hiding-indicator-selected

選択された (ユーザーがクリックし、ドロップダウンが表示されている) ときに、ヘッダーの非表示の列インジケーターに適用されるクラス。
ui-iggrid-hiding-dropdown-dialog ui-widget ui-widget-content ui-corner-all

非表示の列のドロップダウン div に適用されるクラス。
ui-iggrid-hiding-dropdown-ddlistitemicons ui-state-default

非表示の列のドロップダウン li に適用されるクラス。
ui-iggrid-hiding-dropdown-listitem-hover ui-state-active ui-state-hover

ホバー状態のときに、非表示の列のドロップダウン li に適用されるクラス。
ui-iggrid-hiding-dropdown-ddlistitemtext

li 内の非表示の列のドロップダウンスパンに適用されるクラス。
ui-iggrid-hiding-dropdown-list ui-menu

非表示の列のドロップダウン ul に適用されるクラス。
ui-iggrid-hiding-indicator

非表示のヘッダーアイコンに適用されるクラス。

Ignite UI for jQuery | API リファレンス

ui.igTreeGridHiding

コード サンプル

関連トピック

依存関係

継承

コードサンプル