Column with DropDown Menu in Blazor Grid
In this document, you will learn how to add a custom dropdown menu to grid columns. IntegralUI Grid component for Blazor .NET has a built-in option that when enabled shows a breadcrumb button in column header, which when clicked will show a dropdown menu with provided options.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, each column that has a dropdown menu will show a breadcrumb button in its header. When this button is clicked, the column menu will popup. In addition, you can sort grid data and show/hide columns using this menu options.
How to Add DropDown Menu to Grid Columns
To add a dropdown menu to grid columns is simple. Each column has MenuItems property that holds a reference to a list of menu options. In addition, to adjust the menu position, you can use the MenuPositionAdjustment property, which accepts an IntegralUIPosition value where you can specify the Top and Left position of the menu.
The menu internally is created using the IntegralUI ContextMenu component, which means all features for the context menu are also available for column menu, like having a menu with header, items with checkboxes or radio buttons, separators etc.
You can create one menu and shared it between all columns, or each column can have its own unique menu options.
Column Menu Events
The following events are available for column menu:
- ColumnMenuCheckedChanged - occurs when menu check box is clicked
- ColumnMenuClick - occurs when menu item is clicked
- ColumnMenuOpened - occurs after menu opens
- ColumnMenuOpening - occurs before the menu opens
You can handle these events in your code and provide specific action, depending on the event data, which includes:
- Column - the column object to which menu is attached
- MenuItem - an object that contains data about the menu option
Using the event data you can determine which menu option is clicked and from which grid column.
In this example of Blazor Grid component, the column menu has options that allow you to sort grid data by specified column in ascending or descending order. In addition, menu lists all columns that you can show or hide during run-time.
How to Set Up Column Menu Initially
For static menu options like with sorting, you can set them initially in the menu options list. You only need to attach this list to the MenuItems property of grid column:
However, for dynamic menu options, like a list of columns that are present in the grid, you can do it after the grid is populated with data during initialization by overriding the OnInitializedAsync or OnAfterRenderAsync methods.
You can get a list of all columns present in the Blazor Grid component using the GetColumns method. Then using this list you can create a loop and choose which columns will be included in the menu list. In this example, the “OrderID” and “Customer” columns are excluded from the menu, so you can't change their visibility during run-time from the menu.
You will notice that each menu option here has AllowCheck set and Checked properties set to true. This means that a check box will appear before the menu label that will determine whether the column is visible or not.
How to Handle Column Menu Events
Once you have the menu ready, you can handle the ColumnMenuClick event to add functionality when specific menu option is clicked. In this example, if a sort menu option is clicked, the grid will sort the data based on specified column by changing the column's Sorting property and calling the Sort method. If a menu option that changes the column visibility is clicked, you can update the column's Visible property accordingly.
In addition, if you need to update the menu before it opens, you can handle the ColumnMenuOpening event for the Blazor Grid component. This is useful, for example if a menu is shared between columns, you can update the menu title to a column title from where the menu opens.
Conclusion
IntegralUI Grid component for Blazor .NET allows you to add custom dropdown menus with different functionalities to each column. You can apply this menu to all columns or only specified columns. In addition, you can also provide a different menu options by setting conditions in your code.
The Grid is a native component, part of IntegralUI for Blazor that you can use to create web application is Blazor .NET framework.