Grid Sorting
The Telerik Blazor Grid component supports single and multiple column sorting.
In this article:
Basics
To enable sorting, set the Grid Sortable property to true.
When the user clicks a column header, the Grid sorts the data according to the column's data type, and an arrow indicates the sorting direction next to the column title.
You can prevent the user from sorting a certain field by setting Sortable="false" on its column.
Enable Sorting in the Telerik Blazor Grid
<TelerikGrid Data="@GridData"
TItem="@Product"
Sortable="true"
Height="90vh">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.Category)" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
<GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Category = $"Category {i % 3 + 1}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 10000),
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
Discontinued = i % 4 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Category { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}Multi Column Sorting
To allow sorting on more than one column at a time, set the Grid SortMode parameter to Telerik.Blazor.SortMode.Multiple. After the user sorts by several columns, the Grid shows numbers in the column headers that indicate the sorting priority.
Enable multi column Grid sorting
<TelerikGrid Data="@GridData"
TItem="@Product"
Sortable="true"
SortMode="@SortMode.Multiple"
Height="90vh">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)" />
<GridColumn Field="@nameof(Product.CategoryA)" Title="Category A" />
<GridColumn Field="@nameof(Product.CategoryB)" Title="Category B" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 20; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i}",
CategoryA = $"A {rnd.Next(1, 4)}",
CategoryB = $"B {rnd.Next(1, 4)}",
Price = rnd.Next(10, 20),
Quantity = rnd.Next(0, 10),
Discontinued = i % 3 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string CategoryA { get; set; } = string.Empty;
public string CategoryB { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public bool Discontinued { get; set; }
}
}Sort From Code
You can sort the grid from your own code through its state.
If you want to set an initial state to the Grid, use a similar snippet, but in the
OnStateInit event
Set sorting programmatically
@using Telerik.DataSource
<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
SortMode="@SortMode.Multiple"
Height="400px">
<GridToolBarTemplate>
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@SetGridSort">Sort Grid by HireDate</TelerikButton>
<label>
<TelerikCheckBox @bind-Value="@ShouldResetSortState" />
Clear Existing Sorting On Button Click
</label>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@(nameof(Employee.Name))" Title="Employee Name" />
<GridColumn Field="@(nameof(Employee.Team))" Title="Team" />
<GridColumn Field="@(nameof(Employee.HireDate))" Title="Hire Date" DisplayFormat="{0:d}" />
<GridColumn Field="@(nameof(Employee.IsOnLeave))" Title="Is On Leave" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<Employee>? GridRef { get; set; }
private List<Employee> GridData { get; set; } = new();
private bool ShouldResetSortState { get; set; } = true;
private async Task SetGridSort()
{
if (GridRef != null)
{
var gridState = GridRef.GetState();
if (ShouldResetSortState)
{
// Remove any existing sorts.
gridState.SortDescriptors.Clear();
}
SortDescriptor? hireDateSortDescriptor = gridState.SortDescriptors
.Where(x => x.Member == nameof(Employee.HireDate)).FirstOrDefault();
if (hireDateSortDescriptor != null)
{
// Update the existing HireDate sort if it exists.
hireDateSortDescriptor.SortDirection = ListSortDirection.Descending;
}
else
{
// Add a new sort descriptor.
// In multi-column sorting scenarios
// you can also insert the new SortDescriptor
// before the existing ones to control the sort priority.
gridState.SortDescriptors.Add(new SortDescriptor()
{
Member = nameof(Employee.HireDate),
SortDirection = ListSortDirection.Descending
});
}
await GridRef.SetStateAsync(gridState);
}
}
protected override void OnInitialized()
{
for (int i = 1; i <= 30; i++)
{
GridData.Add(new Employee()
{
Id = i,
Name = $"Name {i}",
Team = $"Team {i % 5 + 1}",
HireDate = DateTime.Today.AddDays(-Random.Shared.Next(1, 3000)),
IsOnLeave = i % 4 == 0 ? true : false
});
}
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Team { get; set; } = string.Empty;
public DateTime HireDate { get; set; }
public bool IsOnLeave { get; set; }
}
}More Examples
The following articles and sample projects can be helpful when implementing sorting:
-
Capture Sorted event - the grid state lets you know when it changes so you can capture different aspects of the change
-
Server Sorting - this article explains how to implement manual data source operations so you can offload the work to the server. It provides the overview of how to setup the grid for that, and examples - several with local data and links a repository with examples using REST API endpoints.