Edit this page

Basic Sorting

Through SortingState property, RadGridView provides you with a built-in sorting functionality, which allows the user to easily sort the data by one or several columns. The data can be sorted in three ways:

  • Ascending
  • Descending
  • No Sort

SortingState property does not have sorting functionality. It just determines the way the data would be sorted.

RadGridView allows multi column sorting. You can check this topic for more information.

Sorting is a data operation and it is performed by building and executing a LINQ query over the source collection.

If the RadGridView is bound to a collection that inherits ICollectionView that has a CanSort property set to true, the RadGridView`s sorting is disabled and the sorting mechanism of the collection is used instead.

The data gets sorted as the user clicks the header of a column. When sorted you should see the header of the column highlighted and the appropriate arrow showing if the applied sorting is ascending or descending.

By clicking on the header a second time the sort direction is changed to descending and on the next click the sorting will be cleared. The header goes into its normal state and the arrow disappears.

You can set the SortMemberPath property of the column to specify the name of the property the data in the column will be sorted by.

Disabling Sorting

If you don't want your RadGridView to be sortable, you just have to set its CanUserSortColumns property to False:


<telerik:RadGridView CanUserSortColumns="False" />

In case you want to disable sorting for a particular column only, you can configure column's IsSortable property to False:


<telerik:GridViewColumn IsSortable="False" />


There are two events that are raised as the user apply sorting on any column. The first one is the Sorting event and it is raised before the data is sorted. The second one is the Sorted event and it is raised after the data is sorted.


<telerik:RadGridView Sorting="radGridView_Sorting" 
             Sorted="radGridView_Sorted" />

Via the GridViewSortingEventArgs of the Sorting event you can get the instance of the column that is being sorted (e.Column), the instance of the RadGridView that owns the column (e.DataControl), the sorting state (e.SortingState) and others.

You are also able to cancel the sorting operation by setting the e.Cancel property to True.


private void radGridView_Sorting(object sender, GridViewSortingEventArgs e)
    e.Cancel = true;


Private Sub radGridView_Sorting(ByVal sender As Object, ByVal e As GridViewSortingEventArgs)
    e.Cancel = True
End Sub

To learn how to use the Sorting event to overwrite the built-in sorting functionality take a look at the Custom Sorting topic.

The Sorted event allows you to get an instance of the column by which the data is sorted via its GridViewSortedEventArgs:

In the event handler you can place some code that has to be executed when the data in the RadGridView gets sorted. For example, you can change the background color of the sorted column:


private GridViewColumn previousColumn;
private void radGridView_Sorted(object sender, GridViewSortedEventArgs e)
    if (this.previousColumn != null)
        this.previousColumn.Background = new SolidColorBrush(Colors.Transparent);
    e.Column.Background = new SolidColorBrush(Colors.Green);
    this.previousColumn = e.Column;


Private previousColumn As GridViewColumn
Private Sub radGridView_Sorted(ByVal sender As Object, ByVal e As GridViewSortedEventArgs)
    If Me.previousColumn IsNot Nothing Then
        Me.previousColumn.Background = New SolidColorBrush(Colors.Transparent)
    End If

    e.Column.Background = New SolidColorBrush(Colors.Green)
    Me.previousColumn = e.Column
End Sub

In this example, the previous column field is used to store the currently sorted column. This is done in order to revert its background color when another column is selected.

Here is a snapshot of the final result.

Styling the Sorted Header

By editing the template of the header cell you are able to change its overall look and feeling. Making use of the VisualStateManager also allows you to adjust the visual behavior according to the actions of the user - sorted descending or ascending etc. You can also change the visual element that represents the direction of the sorting. To learn more about how to do that take a look at the Templating the Column Headers topic.

See Also