Vue Data GridTool Panels

Enterprise

This section covers Tool Panels, available via the grid's Side Bar, which allow for easy access to powerful grid operations such as grouping, pivoting, and filtering. Custom Tool Panels can also be provided to the grid.

Overview Copy

Tool Panels are panels that sit in the Side Bar to the right of the grid. The Side Bar allows access to the tool panels via buttons that work like tabs. The Side Bar and a Tool Panel are shown in the screenshot below.

Side Bar

Provided Tool Panels Copy

The grid provides the following Tool Panels:

Custom Tool Panels Copy

In addition to the provided Tool Panels, it is also possible to provide custom Tool Panels.

For more details refer to the section: Custom Panel.

API Copy

The gridApi has the following methods that can be used to interact with the tool panel.

openToolPanelCopy
Function
Opens a particular tool panel. Provide the ID of the tool panel to open.
closeToolPanelCopy
Function
Closes the currently open tool panel (if any).
getOpenedToolPanelCopy
Function
Returns the ID of the currently shown tool panel if any, otherwise null.
isToolPanelShowingCopy
Function
Returns true if the tool panel is showing, otherwise false.
refreshToolPanelCopy
Function
Force refreshes all tool panels by calling their refresh method.
getToolPanelInstanceCopy
Function
Gets the tool panel instance corresponding to the supplied id.

Events Copy

The following events are emitted from the tool panel.

toolPanelVisibleChangedCopy
ToolPanelVisibleChangedEvent
The tool panel visibility has changed. Fires twice if switching between panels - once with the old panel and once with the new panel.
toolPanelSizeChangedCopy
ToolPanelSizeChangedEvent
The tool panel size has been changed.
columnMenuVisibleChangedCopy
ColumnMenuVisibleChangedEvent
The column menu visibility has changed. Fires twice if switching between tabs - once with the old tab and once with the new tab.
contextMenuVisibleChangedCopy
ContextMenuVisibleChangedEvent
The context menu visibility has changed (opened or closed).

Next Up Copy

Before covering the Tool Panels in detail, continue to the next section to learn about the Side Bar.