Custom DropDown Menu in Grid Columns
In this article, you will learn how to create a custom dropdown menu that will display all grid columns with a check mark stating that column is visible or hidden. You will find sample code below in JavaScript, Angular, React and Vue.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As the demo shows, in each column header when selected or hovered you can see a dropdown button on right side. When you click this button, a dropdown menu will appear from where you can choose which columns will become visible or hidden. Clicking again on the dropdown menu button will apply this change and update the grid layout.
Using a dropdown menu allows you to change visibility of multiple columns at once. This is different functionality than using a context menu to change column visibility, where you can make column visible or hidden one by one.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Create a DropDown Menu for Grid Columns
There is no built-in dropdown menu option available in the Grid component, but you can easily create one but simply modifying the column header template. At first, you need to a add a dropdown button that will appear to the right of column header. When this button is clicked, a dropdown menu will pop up with a list of all columns available and whether they are visible or not.
As a dropdown button, you can use either the IntegraUIl DropDownButton component or any other 3-rd party web component or HTML element.
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.
In similar way like with context menu, you can use the same list of menu options. Just apply it to the items property of the DropDownButton component. This component can accept any custom HTML elements generated on your side. In case of the dropdown menu, a List component is used to create a list of menu options using a template. Then this template is applied to the contentTemplate property:
When this button is clicked from column header it will show the list of available options, in this case column names and their visibility status with a check mark. The dropdown menu will stay open until this button is clicked again, which will apply any changes made. The open/close status of the dropdown menu is determined by the expanded property and expandedChanged event:
Finally, when an option is selected from the dropdown menu, you can change column visibility by handling the itemClick event from the List component. Because each item id is equal to the column's id, you can easily locate the grid column and change its visibility to true or false.
To make column visible or hidden requires changing the visible field of each column object to true or false.
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
IntegralUI Grid component allows you to create custom dropdown menus with different functionalities, one of which is using it to select which columns are visible in the grid. You can apply this menu to all columns or only specified columns, furthermore you can also provide a different menu options by setting conditions.
A sample code is available in JavaScript, Angular, React and Vue that shows how to show or hide grid columns using a dropdown menu. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.