Grid Sorting
The Grid component offers support for sorting.
In this article:
Basics
To enable sorting, set the grid's Sortable property to true.
When the user clicks the column header, the grid will sort the data according to the column's data type, and an arrow indicator of the sorting direction will be shown 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 Telerik Grid
Click a column header to sort by its data
<TelerikGrid Data="@MyData" Sortable="true" Height="500px">
<GridColumns>
<GridColumn Field="ID"></GridColumn>
<GridColumn Field="TheName" Title="Employee Name"></GridColumn>
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<object> MyData = Enumerable.Range(1, 50).Select(x => new { ID = x, TheName = "name " + x });
}
The result from the code snippet above, after the user clicked on the "Employee Name" header to sort
You can sort this grid on the different columns to see the results. The Name column is a string, and sorting is done according to the rules for strings, while the ID column sorts acording to rules for integers.
Multi Column Sorting
To allow sorting on more than one column at a time, set the SortMode parameter of the grid to Telerik.Blazor.SortMode.Multiple.
Enable multi column sorting
@* Try sorting by Team, then by Name to see how the multiple sorts apply *@
<TelerikGrid Data=@GridData Sortable="true" SortMode="@SortMode.Multiple"
Pageable="true" Height="400px">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
<GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3,
IsOnLeave = i % 2 == 0
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public bool IsOnLeave { get; set; }
}
}
Numbers in the column headers indicate the order by which the grid is sorted
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" />
Reset Existing Sort State
</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.