Fixed Columns in Blazor Grid
IntegralUI Grid component is a native Blazor component that allows you to fix columns on left or right side of the grid during run-time. In this document, you will learn how to change the side at which grid column is frozen, using a column menu.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, each column header in the grid has a dropdown menu button. When clicked, a dropdown menu will appear with options stating the side at which the column is or can be fixed. There are three options: "Not Fixed", "Fixed on Left" and "Fixed on Right" that freezes the column at corresponding grid side. Only non-fixed columns are scrollable.
How to Fix Columns on Left or Right Side in Blazor Grid
To freeze a column at specific side is simple. Each column object has Fixed property, which can accept one of these three values from IntegralUIFIxedStyle enumeration:
- None - states that column is not frozen
- Left - column is frozen on left side of the grid
- Right - column is frozen on right side of the grid
By default, columns are not fixed and the value of Fixed property is set to None.
If the size of all fixed columns exceeds the grid width, the grid view will show the data with following priority:
- Columns fixed on left side will appear on top
- Following are columns fixed on right side
- At the end are non-fixed columns, which are scrollable
Fixed columns always appear on top of non-fixed scrollable columns. For this reason, it is best to allow freezing columns during run-time, for example using a dropdown or context menu where you can change the side to which column is fixed.
How to Add a DropDown Menu to Grid Column
There is a built-in option where each column can display a dropdown menu. You only need to create a list of options and attach it to the MenuItems property of specified column object. In addition, you can adjust position of the dropdown menu using the MenuPositionAdjustment property.
Whenever a menu opens or an option is clicked, a set of events can fire that you can handle in your code and add custom action. For example, to change the size at which column is fixed, you can handle the ColumnMenuClick event and change the Fixed property value for that column to desired value.
The event data contains the menu item and column objects which you can use to determine the option that is clicked and change the column’s fixed side accordingly:
Because only one option can appear as checked for fixing columns, you need to clear the checked state for other options whenever menu opens. Depending on side at which column is frozen, you can check only that value in the menu, by handling the ColumnMenuOpening event:
Conclusion
When you have a grid with many columns, you may need to fix some of these columns on left or right side. The IntegralUI Grid component comes with a built-in option that allows you to freeze columns during run-time. One way to fix columns dynamically is by using a dropdown menu for each column that you want to freeze. By handing a corresponding event in your code, you can fix columns on specific grid side on the fly.
IntegralUI for Blazor is an UI library of native Blazor components that includes the Grid. You can use it to develop web apps in Blazor .NET framework.