このトピックでは、igGrid™ コントロールの [複数並べ替え] ダイアログ ウィンドウを使用する方法を紹介します。
以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックでは、Ignite UI for jQuery™ コントロールのタッチ サポート インタラクションの更新内容を紹介します。
igGrid 機能セレクター: このトピックでは、igGrid™ 機能セレクター] メニューとそのそのセクションについて説明します。
igGrid 並べ替えの概要: このサンプルでは、igGrid 並べ替え機能を有効にして、使用する方法を示します。
このトピックは、以下のセクションで構成されます。
このトピックでは、igGrid コントロールの [複数並べ替え] モーダル ダイアログを操作する方法を紹介します。igGrid 機能セレクター詳細セクションの複数並べ替えリスト項目を選択して、[複数並べ替え] モーダル ダイアログをアクティブ化できます。[複数並べ替え] ダイアログ ウィンドウと並べ替え API を使用することは、igGrid の複数列を並べ替える 2 種類の方法です。
並べ替えダイアログには、グリッドで並べ替えた複数列の順序が表示されます。また、並べ替え基準から列を削除できます。
以下の表に、[複数並べ替え] モーダル ダイアログ ウィンドウの状態をまとめています。ウィンドウには、modalDialogSortOnClick プロパティの値 (デフォルトは false) で定義された 2 種類の状態があります。デフォルトの状態では、ユーザーはダイアログに変更を行い、変更を適用する必要があります。プロパティが true に設定されている場合、並べ替えは即座に有効になります。
詳細は、概要表の後に記載されています。
| 状態 | modalDialogSortOnClick | 説明 |
|---|---|---|
| クリックで列を並べ替える | true | [列の選択] ウィンドウから列を選択することで、列は即座に並べ替えられます。 |
| 複数の列を一度に並べ替える | false | 複数列は [列の選択] ウィンドウから選択され、ウィンドウで変更が適用されると、列が並べ替えられます。 |
デフォルトで modalDialogSortOnClick プロパティは false に設定されます。つまり、どの列を並べ替えて、変更をグリッドに適用するか選択する必要があるということです。
以下のボタンを使用します。
igGrid 列のヘッダーを押して、モーダル ダイアログ コンテキスト外でそれを実現できますmodalDialogSortOnClick プロパティが true に設定されており、列の名前をクリックすると、グリッドで並べ替えが即座に実行されます。
以下のボタンを使用します。
igGird コントロールの列のヘッダーを押して、モーダル ダイアログ コンテキスト外でそれを実現できます。このセクションでは、モーダル ダイアログに影響を与える igGrid コントロールの Sorting プロパティについて説明します。
以下の表は、モーダル ダイアログの構成を行う igGrid Sorting プロパティを示します。
| プロパティ | 説明 |
|---|---|
| modalDialogSortOnClick | [複数並べ替え] ダイアログで sort/unsort 列をクリックすると並べ替えが即座に適用されるかどうかを指定します。 |
| featureChooserText | 機能セレクターのテキストを指定します。 |
| modalDialogWidth | [複数並べ替え] ダイアログの幅を指定します。 |
| modalDialogHeight | [複数並べ替え] ダイアログの高さを指定します。 |
| modalDialogAnimationDuration | モーダル ダイアログを表示または非表示にするアニメーション時間をミリ秒で指定します。 |
| modalDialogSortByButtonText | [複数並べ替え] ダイアログ ウィンドウの並べ替えられていない項目ごとに Sort By ボタンのテキストを指定します。 |
| modalDialogResetButtonLabel | [複数並べ替え] ダイアログの並べ替えられていない項目ごとに [並べ替え] ボタンのラベルを指定します。 |
| modalDialogCaptionButtonDesc | [複数並べ替え] ダイアログの降順に並べ替えられた項目ごとにキャプションを指定します。 |
| modalDialogCaptionButtonAsc | [複数並べ替え] ダイアログの昇順に並べ替えられた項目ごとにキャプションを指定します。 |
| modalDialogCaptionButtonUnsort | [複数並べ替え] ダイアログの [並べ替えなし]ボタンのキャプションを指定します。 |
| unsortedColumnTooltip | 並べ替えされていない列の Ignite UI for jQuery テンプレート化形式のカスタム ツールチップ。 |
| modalDialogCaptionText | [複数並べ替え] ダイアログのキャプションのテキストを指定します。 |
| modalDialogButtonApplyText | モーダル ダイアログで変更を適用するボタンのテキストを指定します。 |
| modalDialogButtonCancelText | モーダル ダイアログで変更を取り消すボタンのテキストを指定します。 |
このセクションでは、モーダル ダイアログに影響を与える igGrid の Sorting メソッドについて説明します。
以下の表は、モーダル ダイアログ API を使用できるようにする、igGrid コントロールの並べ替えメソッドを示します。
| メソッド | 説明 |
|---|---|
| openMultipleSortingDialog | モーダル ダイアログを表示します。表示されている場合、メソッドは何も行いません。 |
| closeMultipleSortingDialog | モーダル ダイアログを非表示にします。非表示の場合、メソッドは何も行いません。 |
| renderMultipleSortingDialogContent | 並べ替えられた項目および並べ替えられていない項目の [複数並べ替え] ダイアログの内容を描画します。 |
| removeDialogClearButton | [複数並べ替え] ダイアログの [クリア] ボタンを削除します。 |
このセクションでは、モーダル ウィンドウに関与する igGrid コントロールの並べ替えイベントについて説明します。
以下の表は、 モーダル ダイアログの操作中に発生する、igGrid の並べ替えイベントを示しています。
| イベント | 説明 |
|---|---|
| modalDialogOpening | モーダル ダイアログを開く前に発生するイベント |
| modalDialogOpened | モーダル ダイアログを開いた後に発生するイベント |
| modalDialogMoving | モーダル ダイアログの位置が変わるたびに発生するイベント |
| modalDialogClosing | モーダル ダイアログを閉じる前に発生するイベント |
| modalDialogClosed | モーダル ダイアログを閉じた後に発生するイベント |
| modalDialogContentsRendering | モーダル ダイアログのコンテンツが描画される前に発生するイベント |
| modalDialogContentsRendered | モーダル ダイアログのコンテンツが描画された後に発生するイベント |
| modalDialogSortingChanged | 列の並べ替えがモーダル ダイアログで変更された場合に発生するイベント |
| modalDialogButtonUnsortClick | 列の並べ替えをしないボタンをモーダル ダイアログでクリックした場合に発生するイベント |
| modalDialogSortClick | 並べ替えられていない列をクリックして、モーダル ダイアログで並べ替える場合に発生するイベント |
| modalDialogButtonApplyClick | モーダル ダイアログの [適用] ボタンをクリックしたときに発生するイベント |
| modalDialogButtonResetClick | 並べ替えをリセットするボタンをクリックしたときに発生するイベント |
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
Ignite UI for jQuery コントロールのタッチ サポート: このトピックでは、Ignite UI for jQuery™ コントロールのタッチ サポート インタラクションの更新内容を紹介します。
igGrid 機能セレクター: このトピックでは、igGrid™ 機能セレクター メニューとそのそのセクションについて説明します。
igGrid 並べ替えの概要: このサンプルでは、igGrid 並べ替え機能を有効にして、使用する方法を示します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub