Menu Item Components allow you to customise the menu items shown in the Column Menu and Context Menu. Use these when the provided menu items do not meet your requirements.
The following example demonstrates a custom menu item component in both the column menu and context menu. Clicking on the buttons in the custom menu items will log to the developer console.
Implement this interface to provide a custom menu item.
interface IMenuItemComp {
getGui(): HTMLElement;
init(params: IMenuItemParams): void;
configureDefaults(): boolean | IMenuConfigParams;
setActive(active: boolean): void;
setExpanded(expanded: boolean): void;
select(): void;
}
To enable the default menu item behaviour, implement the configureDefaults method and return true (see Providing Custom Behaviour).
The interface for the menu item parameters is as follows:
Properties available on the IMenuItemParams<TData = any, TContext = any> interface.
Function
Callback to let the menu know that the current item has become active. Required if updating the active status within the menu item.
number
Level within the menu tree (starts at 0).
Function
Returns true if another sub menu is open.
Function
Open the sub menu for this item. activateFirstItem If true, activate the first item in the sub menu.
Function
Close the sub menu for this item.
Function
Close the entire menu.
Function
Updates the grid-provided tooltip this component. tooltip The value to be displayed by the tooltip shouldDisplayTooltip A function returning a boolean that allows the tooltip to be displayed conditionally. This option does not work when enableBrowserTooltips={true}.
(MenuItemDef | string)[]
If this item is a sub menu, contains a list of menu item definitions
'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
default: 'menu'
The aria role for the subMenu
any
Provide a custom menu item component. See
Menu Item Componentfor framework specific implementation details.
any
Parameters to be passed to the custom menu item component specified in menuItem.
string
Name of the menu item.
boolean
Set to true to display the menu item as disabled.
string
Shortcut text displayed inside menu item. Setting this doesnât actually create a keyboard shortcut binding.
Function
Function that gets executed when item is chosen.
boolean
Set to true to provide a check beside the option.
Element | string
The icon to display, either a DOM element or HTML string.
string[]
CSS classes to apply to the menu item.
string
Tooltip text to be displayed for the menu item.
boolean
If true, will keep the menu open when the item is selected. Note that if this item has a sub menu, it will always remain open regardless of this property.
The grid api.
TContextApplication context as set on gridOptions.context.
In order for the menu to size dynamically, the default styling is provided via display: table. This means that if custom menu item components are used alongside grid-provided menu items, then they must adhere to a certain structure, or the grid styles must be overridden.
The default structure consists of a parent element with display: table-row, and four children with display: table-cell. This can be seen in the example above. If using configureDefaults and not suppressing root styling, the grid will automatically add the correct styling to the parent element.
This format can be overridden by Styling the Menu, notably ag-menu-list, ag-menu-option, ag-menu-option-part, ag-menu-separator and ag-menu-separator-part. This is demonstrated in the Providing Custom Behaviour example below.
As described above, the easiest way to configure the behaviour of a custom menu item is returning true from configureDefaults.
If this is not done, then the custom menu item will need to implement all of the required behaviour itself.
It is also possible to disable certain parts of the behaviour by returning an object of type IMenuConfigParams from configureDefaults:
boolean
Suppress the grid-provided tooltip on hover.
boolean
Suppress handling of click events. If true, the component will need to implement its own click event handler. The grid will no longer handle performing the action and opening the sub menu (if appropriate).
boolean
Suppress handling of mouse down events.
boolean
Suppress handling of mouseenter and mouseleave events, If true, The grid will no longer update the active status of the menu item or open sub menus.
boolean
Suppress handling of keyboard events to select the current item. If true, the grid will not select the menu item on Enter or Space.
boolean
Suppress setting tabindex on the root element. If true, will need to set tabindex elsewhere for keyboard navigation to work.
boolean
Suppress setting Aria properties on the root element.
boolean
Suppress setting CSS classes on the root element. If true and mixing custom menu item components with grid-provided ones, will need to style with table display rules, as well as adding active and disabled styling.
boolean
Suppress focusing the root element when made active. If true, will need to handle keyboard navigation.
The following example demonstrates providing custom behaviour (in the column menu only) by including a filter as a menu item. To allow for a full-width custom menu item alongside grid-provided ones, the default menu styling is overridden (see Default Styling).
Note this shows a column filter in the custom menu item as an example for how complex items can be added. It is not meant to be used as a complete solution.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4