Customize the icon for column menu

17 Feb 20221 minute to read

You can customize the column menu icon by overriding the default grid class .e-icons.e-columnmenu with a custom property content as mentioned below,

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

In the below sample, grid is rendered with a customized column menu icon.

CSHTML

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).ShowColumnMenu(true).Columns(col =>
{
  col.Field("OrderID").HeaderText("Order ID").Width("120").Add();
  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
  col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").Add();
  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").Add();
  col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();

 }).Render()

<style>
    .e-grid .e-columnheader .e-icons.e-columnmenu::before {
        content: "\e969";
    }
</style>

Column-icon.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}