このトピックでは、igGrid™ コントロールの列チューザーの非表示方法について説明します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックでは、Ignite UI for jQuery™ コントロールのタッチ サポート インタラクションの更新内容を紹介します。
igGrid 機能セレクター: このトピックでは、igGrid 機能セレクター メニューおよびそのセクションについて説明します。
igGrid 非表示概要: igGrid コントロールの非表示機能の概要。
このトピックは、以下のセクションで構成されます。
このトピックでは、列チューザーとしても知られる igGrid 非表示ダイアログを使用して作業する方法を示します。列チューザー ウィンドウは 2 種類の方法で起動できます。最初の方法は、列チューザー リスト項目を igGrid 機能セレクターの詳細セクションから選択します。2 番目の方法は、非表示列コンテキスト メニューの列チューザー ボタンを押します。
以下の表は、列チューザー ウィンドウの状態を簡単に説明しています。ウィンドウには、columnChooserHideOnClick オプションの値によって定義された 2 つの状態が含まれています (デフォルト値は false)。true に設定した場合、列チューザーで列名をクリックするとすぐにその列は非表示になります。
詳細は、概要表の後に記載されています。
| 状態 | columnChooserHideOnClick 値 |
説明 |
|---|---|---|
| 複数列を一度に非表示 | false |
複数列を列チューザー ウィンドウから選択し、ウィンドウで変更が適用されると列は非表示になります。 |
| クリックで列を非表示 | true |
列チューザー ウィンドウから列を選択することによって、列は即座に非表示になります。 |
デフォルトで、columnChooserHideOnClick プロパティは false に設定されています。つまり、表示/非表示にする列を選択してから、変更をグリッドに適用する必要があります。
以下のボタンを使用します。
columnChooserHideOnClick プロパティを true に設定してから、表示または非表示ボタンをクリックすると、選択したアクションが、列に対して即座に有効になります。
ウィンドウを閉じるには、右上のボタンをクリック、または ESC キーを押します。
以下のボタンを使用します。
このセクションでは、列チューザーに影響を及ぼす、igGrid コントロールの非表示プロパティについて説明します。
以下の表は、列チューザーの構成を担当する、igGrid コントロールの非表示プロパティを示しています。
| プロパティ | 説明 |
|---|---|
| columnChooserHideOnClick | 列チューザーで列名をクリックしたときに、グリッドが列を表示または非表示にするかどうかを指定します。 |
| columnChooserWidth | デフォルトの列チューザーの幅 (ピクセル)。 |
| columnChooserHeight | デフォルトの列チューザーの高さ (ピクセル)。 |
| columnChooserAnimationDuration | 列チューザーを表示または非表示にするための、アニメーションの時間を指定します (ミリ秒)。 |
| columnChooserCaptionText | 列チューザー ダイアログのキャプション。 |
| columnChooserDisplayText | 列チューザー ダイアログを起動するための、ドロップダウンのツール メニュー (機能セレクター) 使用するテキスト。 |
| hiddenColumnIndicatorTooltipText | 非表示の列インジケーターのツールチップに表示されるテキスト。 |
| columnHideText | 列を非表示にするための、ドロップダウンのツール メニュー (機能セレクター) で使用するテキスト (機能セレクター)。 |
| columnChooserShowText | 列を表示するための、Column Chooser で使用するテキスト。 |
| columnChooserHideText | 列を非表示にするための、Column Chooser で使用するテキスト。 |
| columnChooserResetButtonLabel | リセット ボタン用のテキストラベル。 |
| columnChooserButtonApplyText | モーダル ダイアログで変更を適用するボタンのテキストを指定します。 |
| columnChooserButtonCancelText | モーダル ダイアログで変更をキャンセルするボタンのテキストを指定します。 |
このセクションでは、列チューザーに影響を及ぼす、igGrid コントロールの非表示メソッドについて説明します。
以下の表は、列チューザー API が公開する igGrid コントロールの非表示メソッドを示しています。
| メソッド | 説明 |
|---|---|
| showColumnChooser | 列チューザー ダイアログを表示します。表示されている場合、メソッドは何も行いません。 |
| hideColumnChooser | 列チューザー ダイアログを非表示にします。非表示の場合、メソッドは何も行いません。 |
| resetHidingColumnChooser | 非表示表示列を、ダイアログの初期状態にリセットします (それが開いている場合) |
| removeColumnChooserResetButton | 列チューザーのモーダル ダイアログからリセット ボタンを削除します |
このセクションでは、モーダル ウィンドウが起動する、igGrid コントロールの非表示イベントについて説明します。
以下の表は、ユーザーが列チューザーを操作しているときに発生する、igGrid コントロールの非表示イベントを示しています。
| イベント | 説明 |
|---|---|
| columnChooserOpening | 列チューザーが開く前に発生するイベント。 |
| columnChooserOpened | 列チューザーが開いた後に発生するイベント。 |
| columnChooserMoving | 列チューザーの位置が変わるたびに発生するイベント。 |
| columnChooserClosing | 列チューザーが閉じる前に発生するイベント。 |
| columnChooserClosed | 列チューザーが閉じた後に発生するイベント。 |
| columnChooserContentsRendering | 列チューザーのコンテンツが描画される前に発生するイベント。 |
| columnChooserContentsRendered | 列チューザーのコンテンツが描画された後に発生するイベント。 |
| columnChooserButtonApplyClick | 列チューザーのリセット ボタンをクリックすると発生するイベント |
| columnChooserButtonResetClick | 列チューザーのリセット ボタンをクリックすると発生するイベント |
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックでは、Ignite UI for jQuery™ コントロールのタッチ サポート インタラクションの更新内容を紹介します。
igGrid 機能セレクター: このトピックでは、igGrid 機能セレクター メニューおよびそのセクションについて説明します。
igGrid 非表示概要: igGrid コントロールの非表示機能の概要。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub