Column Menu

8 Mar 20226 minutes to read

The column menu has options to integrate features like sorting, grouping, filtering, column chooser, and autofit. It will show a menu with the integrated feature when users click on multiple icon of the column. To enable column menu, you need to define the ShowColumnMenu property as true.

The default items are displayed in 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 
@Html.EJS().Grid("ColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col => {

  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();

}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().Render()
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

You can disable column menu for a particular column by defining the ShowColumnMenu property of Columns as false.
You can customize the default items by defining the ColumnMenuItems with required items.

Column menu Events

During the resizing action, the grid component triggers the below two events.

  1. The ColumnMenuOpen event triggers before the column menu opens.
  2. The ColumnMenuClick event triggers when the user clicks the column menu of the grid.
@Html.EJS().Grid("ColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().Columns(col => {

  col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
  col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
  col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
  col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();

}).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group => { group.ShowGroupedColumn(true); }).AllowPaging().ColumnMenuOpen("columnMenuOpen").ColumnMenuClick("columnMenuClick").Render()

<script>

  function columnMenuOpen() {
    alert('columnMenuOpen event is triggered')
  }

  function columnMenuClick() {
    alert('columnMenuClick event is triggered')
  }

</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Custom column menu item

Custom column menu items can be added by defining the ColumnMenuItems as collection of the ColumnMenuItemModel.

Actions for this customized items can be defined in the ColumnMenuClick event.

@{
    List<object> columnMenuitems = new List<object>();
    columnMenuitems.Add(new { text = "Clear Sorting", id = "gridclearsorting" });
    List<object> cols = new List<object>();
    cols.Add(new { field = "CustomerID", direction = "Ascending" });
}

@Html.EJS().Grid("CustomColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().Columns(col =>
{
    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();

}).AllowPaging().SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).ColumnMenuClick("columnMenuClick").ShowColumnMenu(true).Render()

<script>

    function columnMenuClick(args) {
        if (args.item.id === 'gridclearsorting') {
            this.clearSorting();
        }
    }
    
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Customize menu items for particular columns

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the hide as true in the arguments of ColumnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the OrderID column.

@Html.EJS().Grid("CustomizeColumnMenu").DataSource((IEnumerable<object>)ViewBag.dataSource).ShowColumnMenu(true).AllowSorting().AllowFiltering(true).AllowGrouping().ColumnMenuOpen("columnMenuOpen").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
   col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();

}).FilterSettings(filter=> { filter.Type(Syncfusion.EJ2.Grids.FilterType.CheckBox); }).GroupSettings(group=>group.ShowGroupedColumn(true)).AllowPaging().Render()


<script>
    function columnMenuOpen(args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'OrderID') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

Customize the icon of column menu

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.

@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>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}