How to Use Context Menu to Show/Hide Grid Columns
One of the ways to show or hide grid columns is by using a context menu. The menu is a list of grid columns where each item have the column name and a check mark stating whether column is visible or hidden. In this article, you will learn how to create a context menu for grid columns and how to use it change their visibility
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that presents how to show or hide columns in Grid component using a context menu.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As demo shows, whenever you right-click on a grid header a context menu will appear displaying the name of each column and a check mark stating whether the column is visible or hidden. By selecting the column from the menu option, you can change its visibility. In this way, you can show/hide only one column at time. There are also other ways, like using a dropdown menu to change column visibility for multiple columns at once.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Create a Context Menu for Grid Columns
One way to change column visibility is to use a context menu. In this example, the context menu displays a list of all columns and a check mark that states whether the column is currently visible or hidden.
To create the context menu is simple, you just need to create an array of objects with following data:
- id - equal to the column id value
- text - will hold the column name
- checked - determines whether the column is visible or hidden
- icon - a visual representation of column visibility, in this case a check mark
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Next, you need to apply the IntegralUI ContextMenu component to each column header template in Grid component. When you right-click on grid header the context menu is dynamically created and will appear on top of the grid.
Finally, you need to handle the menu click event and process selection of menu options. This event carries the item object that is clicked. Because previously the item object is set to have the id value equal to the column id value, we can quickly locate the specific column and make it visible or hidden.
You can use the menuOpening event to update the menu options prior the menu is shown. In this case, the menu list is recreated and the check mark is updated depending on which column is visible.
The check mark in the context menu appears only for columns that are visible.
There are also other ways to change column visibility, however all of them require changing the column's visible field to true or false and updating the grid layout.
Conclusion
One way to show or hide grid columns in IntegralUI Grid component is by using a context menu. You can create a menu that consists of all columns names and a check mark stating column whether column is visible or hidden. Using a context menu allows you to select which columns are currently visible in the grid, on demand during run-time. The only drawback here is that you can change column visibility of one column at time.
The Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.