Column Menu in Blazor DataGrid
7 Nov 202324 minutes to read
The column menu in the Syncfusion Blazor Grid component provides options to enable features such as sorting, grouping, filtering, column chooser, and autofit. When users click on the column header’s menu icon, a menu will be displayed with these integrated features. To enable the column menu, you need to set the ShowColumnMenu property to true in the Grid configuration.
The default menu items are displayed in the following table,
| Item | Description |
|---|---|
| SortAscending | Sort the current column in ascending order. |
| SortDescending | Sort the current column in descending order. |
| Group | Group the current column. |
| Ungroup | Ungroup the current column. |
| AutoFit | Auto fit the current column. |
| AutoFitAll | Auto fit all columns. |
| ColumnChooser | Choose the column visibility. |
| Filter | Show the filter option as given in filterSettings Type property |
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" Height="315" AllowGrouping="true" ColumnMenuItems=@MenuItems AllowFiltering="true" ShowColumnMenu="true" AllowPaging="true">
<GridFilterSettings Type="FilterType.CheckBox"></GridFilterSettings>
<GridGroupSettings ShowGroupedColumn="true"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" TextAlign="TextAlign.Center" ShowColumnMenu="false"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Center" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public string[] MenuItems = new string[] { "Group", "Ungroup", "ColumnChooser", "Filter" };
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, DateTime OrderDate, double Freight,string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "ALFKI",33.32, "Reims"));
Orders.Add(new OrderData(10249, "ANANTR",34.32, "Münster"));
Orders.Add(new OrderData(10250, "ANTON", 36.32, "Rio de Janeiro"));
Orders.Add(new OrderData(10251, "BLONP", 54.31, "Lyon"));
Orders.Add(new OrderData(10252, "BOLID",35.36, "Charleroi"));
Orders.Add(new OrderData(10253, "ANTON", 37.35, "Lyon"));
Orders.Add(new OrderData(10254, "BLONP", 33.32, "Rio de Janeiro"));
Orders.Add(new OrderData(10255, "BOLID", 76.74, "Münster"));
Orders.Add(new OrderData(10256, "ALFKI",55.43, "Reims"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
}You can disable column menu for a particular column by defining the column’s ShowColumnMenu property as false.
You can customize the default menu items by defining the ColumnMenuItems with the required items.
Add custom column menu item
The custom column menu item feature allows you to add additional menu items to the column menu in the Syncfusion Grid. These custom menu items can be defined using the ColumnMenuItems property, which accepts a collection of ColumnMenuItemModel class.You can define the actions for these custom items in the ColumnMenuItemClicked event.
In the following sample, Order ID, Order Date, and Freight columns are sorted at initial rendering. When clicking the custom column menu item in the OrderID column, sorting will be cleared using the ClearSortingAsync method in the ColumnMenuItemClicked event.
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid @ref="Grid" DataSource="@Orders" Height="315" ColumnMenuItems="@(new List<ColumnMenuItemModel>() { new ColumnMenuItemModel { Text = "Clear Sorting", Id = "OrderID" } })" ShowColumnMenu="true" AllowPaging="true" AllowSorting="true">
<GridSortSettings>
<GridSortColumns>
<GridSortColumn Field="OrderID" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="OrderDate" Direction="SortDirection.Ascending"></GridSortColumn>
<GridSortColumn Field="Freight" Direction="SortDirection.Descending"></GridSortColumn>
</GridSortColumns>
</GridSortSettings>
<GridEvents ColumnMenuItemClicked="ColumnMenuItemClickedHandler" TValue="Order"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" TextAlign="TextAlign.Center" ShowColumnMenu="false"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Center" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<string> columns = new List<string>() { "OrderID" };
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void ColumnMenuItemClickedHandler(ColumnMenuClickEventArgs args)
{
Grid.ClearSortingAsync(columns);
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, DateTime OrderDate, double Freight,string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.OrderDate = OrderDate;
this.Freight = Freight;
this.ShipCity = ShipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "ALFKI",new DateTime(1996,07,08),33.32));
Orders.Add(new OrderData(10249, "ANANTR", new DateTime(1996,07,09),34.32));
Orders.Add(new OrderData(10250, "ANTON", new DateTime(1996,07,10),36.32));
Orders.Add(new OrderData(10251, "BLONP", new DateTime(1996,07,11),54.31));
Orders.Add(new OrderData(10252, "BOLID", new DateTime(1996,07,12),35.36));
Orders.Add(new OrderData(10253, "ANTON", new DateTime(1996,07,13),37.35));
Orders.Add(new OrderData(10254, "BLONP", new DateTime(1996,07,14),33.32));
Orders.Add(new OrderData(10255, "BOLID", new DateTime(1996,07,15),76.74));
Orders.Add(new OrderData(10256, "ALFKI",new DateTime(1996,07,16),55.43));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}Render nested column menu
The nested column menu feature provides an extended menu option in the grid column headers, allows you to access additional actions and options related to the columns.
To enable the nested column menu feature, you need to define the ColumnMenuItems property in your component. The ColumnMenuItems property is an array that contains the items for the column menu. Each item can be a string representing a built-in menu item or an object defining a custom menu item.
Here is an example of how to configure the ColumnMenuItems property to include a nested menu:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations
@using BlazorApp1.Data
<SfGrid @ref="DefaultGrid" DataSource="@Orders" Height="315" AllowGrouping="true" ShowColumnChooser="true" AllowSorting="true" ShowColumnMenu="true" ColumnMenuItems=@menuItem>
<GridEvents ColumnMenuItemClicked="ColumnMenuItemClickedHandler" TValue="Order"></GridEvents>
<GridFilterSettings Type="FilterType.CheckBox"></GridFilterSettings>
<GridGroupSettings ShowGroupedColumn="true"></GridGroupSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" TextAlign="TextAlign.Center" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> DefaultGrid;
public List<ColumnMenuItemModel> menuItem = new List<ColumnMenuItemModel> { new ContextMenuItemModel { Text = "Group", Id = "group" }, new ContextMenuItemModel { Text = "UnGroup", Id = "UnGroup" }, new ContextMenuItemModel { Text = "ColumnChooser", Id = "ColumnChooser" }, new ContextMenuItemModel { Text = "SubMenu", Id = "SubMenu", Items = (new List<MenuItem> { new MenuItem { Text = "Option1", Id = "Uniq", Items = (new List<MenuItem> { new MenuItem { Text = "Nested", Id = "New" } }) } }) } };
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void ColumnMenuItemClickedHandler(ColumnMenuClickEventArgs args)
{
if (args.Item.Text == "Group")
{
DefaultGrid.GroupColumnAsync("CustomerID");
}
else if (args.Item.Text == "UnGroup")
{
DefaultGrid.UngroupColumnAsync("CustomerID");
}
else if (args.Item.Text == "ColumnChooser")
{
DefaultGrid.OpenColumnChooserAsync(10, 10);
}
else if (args.Item.Text == "Option1")
{
// custom function
// Here, you can customize your code.
}
else
{
// Here, you can customize your code.
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, double Freight,string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipCountry = ShipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "ALFKI",33.32, "France"));
Orders.Add(new OrderData(10249, "ANANTR", 34.32, "Germany"));
Orders.Add(new OrderData(10250, "ANTON", 36.32, "Brazil"));
Orders.Add(new OrderData(10251, "BLONP", 54.31, "Belgium"));
Orders.Add(new OrderData(10252, "BOLID",35.36, "Switzerland"));
Orders.Add(new OrderData(10253, "ANTON", 37.35, "Switzerland"));
Orders.Add(new OrderData(10254, "BLONP", 33.32, "Germany"));
Orders.Add(new OrderData(10255, "BOLID", 76.74, "Germany"));
Orders.Add(new OrderData(10256, "ALFKI",55.43, "Belgium"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipCountry { get; set; }
}Customize the icon of column menu
To customize the column menu icon, you need to override the default grid class .e-icons.e-columnmenu with a custom CSS property called content. By specifying a Unicode character or an icon font’s CSS class, you can change the icon displayed in the column menu.
1.Add the necessary CSS code to override the default grid class:
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e99a";
}2.Import the required icon stylesheets. You can use either the material or bootstrap5 style, depending on your preference. Add the following code to import the stylesheets:
<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />Here is an example that demonstrates how to customize the column menu icon in the Syncfusion Grid:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" AllowPaging="true" ShowColumnMenu="true">
<GridPageSettings PageSize="8"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Center" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Center" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
<style>
.e-grid .e-columnheader .e-icons.e-columnmenu::before {
content: "\e99a";
}
</style>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, double Freight,string ShipCity)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.Freight = Freight;
this.ShipName = ShipCity;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "ALFKI",33.32, "France"));
Orders.Add(new OrderData(10249, "ANANTR", 34.32, "Germany"));
Orders.Add(new OrderData(10250, "ANTON", 36.32, "Brazil"));
Orders.Add(new OrderData(10251, "BLONP", 54.31, "Belgium"));
Orders.Add(new OrderData(10252, "BOLID", 35.36, "Switzerland"));
Orders.Add(new OrderData(10253, "ANTON", 37.35, "Switzerland"));
Orders.Add(new OrderData(10254, "BLONP", 33.32, "Germany"));
Orders.Add(new OrderData(10255, "BOLID", 76.74, "Germany"));
Orders.Add(new OrderData(10256, "ALFKI",55.43, "Belgium"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public double? Freight { get; set; }
public string ShipName { get; set; }
}