Column Menu in ASP.NET MVC Tree Grid Component

17 Feb 20236 minutes to read

The column menu has options to integrate features like sorting, filtering, 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.

By default, column menu is enabled for all columns and you can disable column menu for a particular column by defining the [ShowColumnMenu] as false in Column property.

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.
AutoFit Auto fit the current column.
AutoFitAll Auto fit all columns.
Filter Show the filter option as given in filterSettings.type 
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("ColumnMenu").AllowFiltering().AllowSorting().AllowResizing()
      .ShowColumnMenu()
      .PageSettings(p => p.PageSize(10))
      .FilterSettings(f => f.Type(Syncfusion.EJ2.TreeGrid.FilterType.Menu))
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").ShowColumnMenu(false).Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).Add();

       }).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)
public ActionResult ColumnMenu()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

Custom column menu item

The custom column menu items can be added to the column menu by defining the ColumnMenuItems as a collection of the MenuItemModel.

The action for custom column menu items can be performed using ColumnMenuClick event.

Refer to the below complete code example about how to use custom column menu item.

@using Syncfusion.EJ2.Grids

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

@(Html.EJS().TreeGrid("ColumnMenu").AllowSorting()
      .ShowColumnMenu()
      .PageSettings(p => p.PageSize(10))
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).Add();

       }).Height(315).ChildMapping("Children").SortSettings(sort => sort.Columns(cols)).ColumnMenuItems(columnMenuitems).ColumnMenuClick("columnMenuClick").TreeColumnIndex(1).Render()
)

<script>

    function columnMenuClick(args) {
        if (args.item.id === 'clearsorting') {
            this.clearSorting();
        }
    }
    
</script>
public ActionResult ColumnMenu()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

Customize menu items for particular columns

It is possible to customize specific items from the column menu for particular Columns using ColumnMenuOpen event. ColumnMenuOpen event can be utilized to determine which items to customize in column menu.

The following example shows how to hide the built-in Filter menu item when the column menu is opened for the taskName column, while allowing it to remain visible for all other columns.

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("ColumnMenu").AllowFiltering(true).AllowSorting().AllowResizing()
      .ShowColumnMenu()
      .PageSettings(p => p.PageSize(10))
      .FilterSettings(f => f.Type(Syncfusion.EJ2.TreeGrid.FilterType.Menu))
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
         col.Field("Duration").HeaderText("Duration").Width(80).Add();

       }).Height(315).ChildMapping("Children").TreeColumnIndex(1).ColumnMenuOpen("columnMenuOpen").Render()
)

<script>
    function columnMenuOpen(args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'TaskId') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
</script>
public ActionResult ColumnMenu()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.