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: "\e969";
}

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

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" showColumnMenu="true">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"  width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<style>
   .e-grid .e-columnheader .e-icons.e-columnmenu::before {
        content: "\e969";
    }   
</style>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}