Infragistics(R) IgniteUI
Multiple Sorting Dialog
E-mail your feedback on this topic.

Glossary Item Box

Topic Overview

Purpose

This topic demonstrates how to use the igGrid control’s Multiple Sorting Dialog Window.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic

Purpose

This topic introduces the updates to IgniteUI™ controls for touch-support interactions.

This topic explains the igGrid™ Feature Chooser menu and its sections.

This sample shows you how to enable and use igGrid Sorting feature.


In this topic


Introduction

Introduction

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.


Dialog Window States

Modal Window

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.


Sort by Multiple Columns at Once

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:

  1. Sort by – to sort by the current column in ascending order (the whole row is clickable)
  2. Up arrow – the columns is sorted ascending. Press the button to sort it descending (the whole row is clickable)
  3. Down arrow – the columns is sorted descending. Press the button to sort it ascending (the whole row is clickable)
  4. Unsort by – to unsort by the current column. You can achieve that outside the Modal Dialog context, by pressing SHIFT and the header of the igGird column you want to ungroup
  5. Apply – to apply the sorted columns, you want to sort by and their order
  6. Cancel – to close the Modal Dialog and don’t apply any changes
  7. Reset – to return the default state of all the columns, like they are defined when the Modal Dialog was opened
  8. ESC (key) - close the modal dialog

Sort by Column on click

When 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:

  1. Sort by – to sort by the current column ( the whole row is clickable)
  2. Up arrow – the columns is sorted ascending. Press the button to sort it descending (the whole row is clickable)
  3. Down arrow – the columns is sorted descending. Press the button to sort it ascending (the whole row is clickable)
  4. Unsort by – to unsort by the current column. You can achieve that outside the Modal Dialog context, by pressing SHIFT plus the header of the igGrid control’s column you want to unsort.
  5. Close button - close the modal dialog
  6. ESC (key) - close the modal dialog

Property Reference

Introduction

This section explains igGrid control’s Sorting properties that affect the Modal Dialog.

Property reference summary

The following table shows the igGrid Sorting properties that are responsible for the configuration of the Modal Dialog

Property

Description

Specifies whether sorting is applied immediately when users click sort/unsort columns in multiple sorting dialog.

Specifies the text in feature chooser.

Specifies the width of multiple sorting dialog

Specifies the width of the multiple sorting dialog

Specifies the time in milliseconds for the animation duration to show/hide modal dialog

Specifies the Sort By button text for each unsorted column in the multiple sorting dialog window.

Specifies Sort By button label for each unsorted column in multiple sorting dialog.

Specifies caption for each descending sorted column in multiple sorting dialog.

Specifies the caption for each ascending sorted column in the multiple sorting dialog.

Specifies caption for unsort button in multiple sorting dialog.

Custom unsorted column tooltip in IgniteUI templating format.

Specifies caption text for multiple sorting dialog.

Specifies the text of the button which applies changes in modal dialog.

Specifies the text of the button which cancels changes in modal dialog.



Method Reference

Introduction

This section explains igGrid Sorting methods that affect modal dialog.

Property reference summary

The following table shows the igGrid control’s Sorting methods, which allows using Modal Dialog API.

Method

Description

Shows the Modal Dialog. If it is visible the method does nothing.

Hides the Modal Dialog. If it is not visible the method does nothing.

Renders content of multiple sorting dialog for sorted and unsorted columns

Removes the clear button for the multiple sorting dialog



Event Reference

Introduction

This section explains igGrid control’s Sorting events, responsible for the Modal Windows.

Event reference summary

The following table shows the igGrid Sorting events that are fired during interacting with the Modal Dialog.

Event

Description

Event fired before the modal dialog is opened

Event fired after the modal dialog is opened

Event fired every time the modal dialog changes its position

   

Event fired before the modal dialog is closed

Event fired after the modal dialog is closed

Event fired before the contents of the modal dialog are rendered

Event fired after the contents of the modal dialog are rendered

Event fired when sorting of column is changed in modal dialog

Event fired when button to unsort column is clicked in modal dialog

Event fired when column(which is not sorted) is clicked to be sorted in the modal dialog

Event fired when Apply button in the modal dialog is clicked

Event fired when the button to reset sorting is clicked



Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

Touch Support for IgniteUI Controls

This topic introduces the updates to IgniteUI controls for touch-support interactions.

igGrid Feature Chooser

This topic explains the igGrid Feature Chooser menu and its sections.

This sample shows you how to enable and use igGrid Sorting feature.


Samples

The following samples provide additional information related to this topic.

Sample

Purpose

Sample that demonstrates which events are raised for the Column Choosers when sorting and hiding occur during user interaction.