This topic demonstrates how to use the igGrid
™ control’s Multiple Sorting Dialog Window.
The following table lists the topics required as a prerequisite to understanding this topic.
Touch Support for Ignite UI for jQuery Controls: This topic introduces the updates to Ignite UI for jQuery™ controls for touch-support interactions.
igGrid Feature Chooser: This topic explains the igGrid
™ Feature Chooser menu and its sections.
igGrid Sorting Overview: This sample shows you how to enable and use igGrid
Sorting feature.
This topic contains the following sections:
This topic demonstrates how to work with the igGrid
control’s Multiple Sorting modal dialog. You can activate the Multiple Sorting Modal Dialog by selecting Sort on Multiple list item from the igGrid
Feature Chooser advanced section. Using the Multiple Sorting dialog window and the Sorting API are the two ways to sort multiple columns in igGrid
.
The sorting dialog displays the order of the multiple sorted columns in the grid. Additionally you may remove a column from the sort criteria.
The following table summarizes the states of the Multiple Sorting Modal Dialog window. The window has two states, defined by the value of the modalDialogSortOnClick
property (default false). In the default state the user must make changes in the dialog and then apply the changes. If the property is set to true then the sort takes effect immediately.
Additional details are available after the summary table.
State | modalDialogSortOnClick | Description |
---|---|---|
Sort by column on click) | true | Columns are immediately sorted by selecting a column from the column chooser window. |
Sort by multiple columns at once | false | Multiple columns are selected from the column chooser window and columns are sorted when changes are applied to the window. |
By default the modalDialogSortOnClick
property is set to false. This means that you must select, which columns to sort by and then apply the changes to the grid.
Use the following buttons:
igGird
column you want to ungroupWhen the modalDialogSortOnClick
property is set to true, when you click on a column name the sorting executes immediately on the grid.
Use the following buttons:
igGrid
control’s column you want to unsort.This section explains igGrid
control’s Sorting properties that affect the Modal Dialog.
The following table shows the igGrid
Sorting properties that are responsible for the configuration of the Modal Dialog
Property | Description |
---|---|
modalDialogSortOnClick | Specifies whether sorting is applied immediately when users click sort/unsort columns in multiple sorting dialog. |
featureChooserText | Specifies the text in feature chooser. |
modalDialogWidth | Specifies the width of multiple sorting dialog |
modalDialogHeight | Specifies the width of the multiple sorting dialog |
modalDialogAnimationDuration | Specifies the time in milliseconds for the animation duration to show/hide modal dialog |
modalDialogSortByButtonText | Specifies the Sort By button text for each unsorted column in the multiple sorting dialog window. |
modalDialogResetButtonLabel | Specifies Sort By button label for each unsorted column in multiple sorting dialog. |
modalDialogCaptionButtonDesc | Specifies caption for each descending sorted column in multiple sorting dialog. |
modalDialogCaptionButtonAsc | Specifies the caption for each ascending sorted column in the multiple sorting dialog. |
modalDialogCaptionButtonUnsort | Specifies caption for unsort button in multiple sorting dialog. |
unsortedColumnTooltip | Custom unsorted column tooltip in Ignite UI for jQuery templating format. |
modalDialogCaptionText | Specifies caption text for multiple sorting dialog. |
modalDialogButtonApplyText | Specifies the text of the button which applies changes in modal dialog. |
modalDialogButtonCancelText | Specifies the text of the button which cancels changes in modal dialog. |
This section explains igGrid
Sorting methods that affect modal dialog.
The following table shows the igGrid
control’s Sorting methods, which allows using Modal Dialog API.
Method | Description |
---|---|
openMultipleSortingDialog | Shows the Modal Dialog. If it is visible the method does nothing. |
closeMultipleSortingDialog | Hides the Modal Dialog. If it is not visible the method does nothing. |
renderMultipleSortingDialogContent | Renders content of multiple sorting dialog for sorted and unsorted columns |
removeDialogClearButton | Removes the clear button for the multiple sorting dialog |
This section explains igGrid
control’s Sorting events, responsible for the Modal Windows.
The following table shows the igGrid
Sorting events that are fired during interacting with the Modal Dialog.
Event | Description |
---|---|
modalDialogOpening | Event fired before the modal dialog is opened |
modalDialogOpened | Event fired after the modal dialog is opened |
modalDialogMoving | Event fired every time the modal dialog changes its position |
modalDialogClosing | Event fired before the modal dialog is closed |
modalDialogClosed | Event fired after the modal dialog is closed |
modalDialogContentsRendering | Event fired before the contents of the modal dialog are rendered |
modalDialogContentsRendered | Event fired after the contents of the modal dialog are rendered |
modalDialogSortingChanged | Event fired when sorting of column is changed in modal dialog |
modalDialogButtonUnsortClick | Event fired when button to unsort column is clicked in modal dialog |
modalDialogSortClick | Event fired when column(which is not sorted) is clicked to be sorted in the modal dialog |
modalDialogButtonApplyClick | Event fired when Apply button in the modal dialog is clicked |
modalDialogButtonResetClick | Event fired when the button to reset sorting is clicked |
The following topics provide additional information related to this topic.
Touch Support for Ignite UI for jQuery Controls: This topic introduces the updates to Ignite UI for jQuery™ controls for touch-support interactions.
igGrid Feature Chooser: This topic explains the igGrid
™ Feature Chooser menu and its sections.
igGrid Sorting Overview: This sample shows you how to enable and use igGrid
Sorting feature.
The following samples provide additional information related to this topic.
View on GitHub