Show or Hide Columns in Blazor Grid
When you have many columns in the Grid, to avoid scrolling to specific column you can fix columns on left or right side, or to clear the view reduce the number of visible columns by showing only those that are needed in the moment. During run-time, one way to hide columns is by using a dropdown column menu. In this document you will learn how to add a dropdown menu to grid columns from where you can change the column visibility.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, columns that show a breadcrumb button in the header have a dropdown menu attached. By clicking on this button, the menu will popup showing a list of grid columns. To hide column just uncheck the corresponding menu option.
In addition, using the dropdown menu you can also sort grid data by column in ascending or descending order.
How to Hide Column in Blazor Grid
Each column object has Visible property that determines whether it is currently visible or hidden in the grid. By default, this property value is true, to hide column you need to set this value to false.
One way to change the Visible property value for specific columns during run-time is using a dropdown menu. To make it simpler, the IntegralUI Grid component for Blazor .NET, already has a built-in option that allows you to display custom dropdown menu for each column. A more detailed information on how to add a menu to grid columns is available here: Add Column Menu in Blazor Grid.
For this example, once you have the menu ready showing a list of grid columns, you need to handle the ColumnMenuClick event and change the column's Visible property to the same value as menu Checked property, and then update the grid layout. When gird layout updates, those columns that have the Visible property set to false, will be excluded from the view.
Conclusion
Having option to hide columns is most useful when you have too many columns present in the view. You can reduce the number of columns visible initially in code or during run-time using a dropdown menu. IntegralUI Grid comes with a built-in option that allows you to create custom dropdown menus on the fly. You can share the same menu options between different columns, or each column can have its own unique menu.
In this case, an example is shown how to hide columns using a column menu. However, you can choose any other solution that is best suitable for your application.
The Grid is a native component, part of IntegralUI for Blazor that you can use to develop web applications in Blazor .NET framework.