New to Telerik UI for Blazor? Download free 30-day trial

Sort Grid from ColumnMenu only (no click in the Column Header).


Product Grid for Blazor


I use the Grid ColumnMenu which provides sorting functionality. By default, click in the column header also triggers the sorting (if enabled). I want to allow the user only sort from the ColumnMenu and prevent sorting the column on click in its header.

How to disable the built-in sorting on column header click?


To prevent the user from sorting on a column header click, use custom CSS - disable the pointer events of the header element. Make sure you target just the span and not the ColumnMenu button - if you stop the pointer events of the whole cell, the user will not be able to open the menu.

The sample below demonstrates the described approach.

@* No sort on column header click *@

    .my-grid .k-header .k-cell-inner .k-link{

<TelerikGrid Data="@MyData"
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date

    public class SampleData
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
In this article