Angular Grid Toolbar Configuring the ToolBar

New to Kendo UI for Angular? Start a free 30-day trial

Starting with version 17.0.0, you can use the ToolBar component in the Kendo UI for Angular Grid instead of the toolbar template. The ToolBar offers a set of built-in features and control types, and also allows you to include custom controls to enhance the Grid's functionality.

To use the ToolBar component in the Grid, define the kendo-toolbar component inside the <kendo-grid> tag, add the desired elements, and configure them.

html

<kendo-grid>
    <kendo-toolbar>
    </kendo-toolbar>
</kendo-grid>

Change Theme

Theme

Loading ...

With the introduction of the ToolBar component in the Grid, new directives have been added to integrate dedicated toolbar tools for performing common data operations. The following tables list all of the available built-in directives of the Grid's toolbar:

Tools for Common Grid Functionalitites

Toolbar Tool Directive	Description
`kendoGridFilterTool`	Directive for filtering the Grid component.
`kendoGridSortTool`	Directive for sorting the Grid component.
`kendoGridColumnChooserTool`	Directive that represents the column chooser component of the Grid.
`kendoGridPDFTool`	Directive that triggers the Grid's PDF export feature.
`kendoGridExcelTool`	Directive that triggers the Grid's Excel export feature.

Tools for Grid Editing

Toolbar Tool Directive	Description
`kendoGridAddTool`	Directive for adding a new item to the Grid. Triggers the Grid's `add` event.
`kendoGridEditTool`	Directive for editing an item. Triggers the Grid's `edit` event.
`kendoGridRemoveTool`	Directive for removing a record. Triggers the Grid's `remove` event.
`kendoGridSaveTool`	Directive for saving the changes. Triggers the Grid's `save` event.
`kendoGridCancelTool`	Directive for canceling the changes. Triggers the Grid's `cancel` event.

Tools for Grid State Management

Toolbar Tool Directive	Description
`kendoGridUndoTool`	Directive for triggering the `undo` action in the Grid.
`kendoGridRedoTool`	Directive for triggering the `redo` action in the Grid.

You can integrate each directive as a toolbar tool in the Grid by applying it to a <kendo-toolbar-button> component, nested within the Grid's toolbar:

html

<kendo-grid>
    <kendo-toolbar>
        <kendo-toolbar-button kendoGridAddTool></kendo-toolbar-button>
        <kendo-toolbar-button kendoGridEditTool></kendo-toolbar-button>
        <kendo-toolbar-button kendoGridSaveTool></kendo-toolbar-button>
        <kendo-toolbar-separator></kendo-toolbar-separator>
        <kendo-toolbar-spacer></kendo-toolbar-spacer>
        <kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
        ...
    </kendo-toolbar>
</kendo-grid>

You can control the visibility of the text and icons for the tools displayed in the Grid's toolbar or in its overflow popup. To customize the appearance of the text or icon for an individual toolbar tool, use the showText or showIcon properties of the corresponding tool.

You also have the ability to define the showText and showIcon properties on the ToolBar component itself to customize the appearance of the text and icons in all tools globally.

The showText and showIcon properties accept the following values of type DisplayMode:

always—The text or icon is always visible, regardless of the overflow mode set for the ToolBar.
toolbar—The text or icon is displayed in the ToolBar and in the overflow popup if section overflow mode is used.
menu—The text or icon is displayed only in the overflow popup if menu overflow mode is used.
never—The text or icon is never displayed.

html
<kendo-grid>
    <kendo-toolbar [showText]="showText" [showIcon]="showIcon">
        ...
    </kendo-toolbar>
</kendo-grid>
ts
public showText: DisplayMode = "menu";
public showIcon: DisplayMode = "always";

The following example demonstrates how the icons and text of the toolbar tools behave depending on the different values of the showText and showIcon properties.

Change Theme

Theme

Loading ...

By default, the toolbar tools that are currently inactive are not displayed in the Grid's toolbar. For example:

The kendoGridEditTool and kendoGridRemoveTool are initally hidden from the ToolBar and will appear when the user selects a row in the Grid.
The kendoGridEditTool and kendoGridRemoveTool will hide from the ToolBar when the Grid enters edit mode.
The kendoGridSaveTool and kendoGridCancelTool are initally hidden from the ToolBar and will only appear once the Grid enters edit mode.

To customize the default behavior and show the currently inactive tools in the Grid's toolbar at all times, you can use the showInactiveTools property of the Grid. By setting this property to true, the inactive tools will be always displayed in the Grid's toolbar, but in a disabled state.

html

<kendo-grid ... [showInactiveTools]="true">
    <kendo-toolbar>
        <kendo-toolbar-button kendoGridEditTool></kendo-toolbar-button>
        <kendo-toolbar-button kendoGridRemoveTool></kendo-toolbar-button>
        ...
    </kendo-toolbar>
</kendo-grid>

The following example demonstrates how to display the currently inactive tools in the Grid's toolbar by using the showInactiveTools property.

Change Theme

Theme

Loading ...

The Grid's toolbar inherits the responsive behavior of the ToolBar component and supports all of the different overflow modes that the ToolBar provides. The available overflow modes are:

Scroll Mode—The ToolBar becomes scrollable, which allows you to display all tools regardless of the component's width.
Section Mode—The toolbar tools that do not fit the component's width are displayed in a popup element while maintaining their initial rendering.
Menu Mode—The toolbar tools that do not fit the component's width are displayed in a popup list.

The following example demonstrates the behavior of the Grid's toolbar when the overflow mode is set to section.

Change Theme

Theme

Loading ...

Including Custom Control Types

The ToolBar component provides generic control types that can be added to the Grid's toolbar, alongside the built-in toolbar directives of the Grid. The ToolBar component also allows you to include custom control types in the Grid's toolbar such as dropdowns, inputs, and others.

The following example demonstrates how to include custom control types in the Grid's toolbar, different from the built-in toolbar directives.

Change Theme

Theme

Loading ...

Known Limitations

When menu overflow mode is set for the Grid's toolbar, the kendoGridFilterTool, kendoGridSortTool and kendoGridColumnChooserTool are not supported as a part of the popup list when they overflow the component's width.