Configuring the ToolBar in the Angular Data Grid
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.
<kendo-grid>
<kendo-toolbar>
</kendo-toolbar>
</kendo-grid>Including the Grid Built-In Toolbar Directives
With the introduction of the ToolBar component in the Grid, new directives have been added to the Grid to provide additional functionality and customization options. These directives are:
kendoGridAddTool—Adds a button that triggers the Grid's add command.kendoGridPDFTool—Adds a button that triggers the Grid's PDF export.kendoGridExcelTool—Adds a button that triggers the Grid's Excel export.
<kendo-grid>
<kendo-toolbar>
<kendo-toolbar-button text="Add new" kendoGridAddTool></kendo-toolbar-button>
<kendo-toolbar-separator></kendo-toolbar-separator>
<kendo-toolbar-spacer></kendo-toolbar-spacer>
<kendo-toolbar-button text="PDF Export" kendoGridPDFTool></kendo-toolbar-button>
<kendo-toolbar-button text="Excel Export" kendoGridExcelTool></kendo-toolbar-button>
</kendo-toolbar>
</kendo-grid>The following example demonstrates the usage of the Grid built-in toolbar directives.
Including the ToolBar Built-In Controls
The ToolBar component provides built-in control types that can be added to the Grid toolbar. For more information, refer to the ToolBar Control Types article.
Including Custom Control Types
The ToolBar component allows you to include custom control types in the Grid Toolbar, such as buttons, dropdowns, inputs, and others. Refer to the Adding Custom Tools to the ToolBar article for more information.