Column Menu in ASP.NET CORE Tree Grid Component
21 Dec 20222 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.
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
|
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" showColumnMenu="true" childMapping="Children" treeColumnIndex="1" allowFiltering="true" allowResizing="true" allowSorting="true" allowPaging="true">
<e-treegrid-filtersettings type="Menu"></e-treegrid-filtersettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="100"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="190"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" type="date" width="120"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="110"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" width="110"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
NOTE
You can disable column menu for a particular column by defining the
showColumnMenu
property ofe-treegrid-column
tag helper as false.
You can refer to ourASP.NET Core Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid exampleASP.NET Core Tree Grid example
to knows how to present and manipulate data.