Search results

Customize column menu icon in Blazor DataGrid component

08 Apr 2021 / 1 minute to read

You can customize the column menu icon by overriding the default icon class .e-icons.e-columnmenu with the content property.

Copied to clipboard
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
    content: "\e941";

This is demonstrated in the below sample code,

Copied to clipboard
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" ShowColumnMenu="true">
    <GridPageSettings PageSize="8"></GridPageSettings>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date TextAlign="TextAlign.Center" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>


    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.5 * x,
            OrderDate = DateTime.Now.AddDays(-x),
    public class Order
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }

    .e-grid .e-columnheader .e-icons.e-columnmenu::before {
        .content: "\e84f";

The following image represents datagrid with customized column menu icon Customize column menu icon