# ToolBar

The [`ToolBar()`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory) configuration option of the Grid allows you to add command buttons and allow the user to invoke built-in Grid functionalities. You can also define custom commands or use templates to customize the Toolbar of the Telerik UI for ASP.NET MVC Grid.

## Built-In Commands

You can configure the Toolbar and include any of the built-in commands:

```Razor HtmlHelper
    .ToolBar(toolbar=> {
           toolbar.Columns();
           toolbar.Create();
           toolbar.Save();
           toolbar.Paste();
           toolbar.Pdf();
           toolbar.Excel();
           toolbar.Search();
           toolbar.Spacer();
           toolbar.Separator();
        toolbar.Create();
        toolbar.Save();
        toolbar.Paste();
        toolbar.Pdf();
        toolbar.Excel();
        toolbar.Search();
        toolbar.Spacer();
        toolbar.Separator();
    })
```

In the 2025 Q2 release an alternative way to configure the tools has been implemented. It relies on the `Items` configuration of the Grid toolbar:

```Razor HtmlHelper
    .ToolBar(toolbar => toolbar
        .Items(itm=>{
            itm.Edit();
            itm.Update();
            itm.CancelEdit();
            itm.Destroy();
            itm.Search();
            itm.Excel();
            itm.Sort();
            itm.Filter();
            itm.ColumnChooser();
            itm.Group().ReorderButtons(true);
            itm.Pdf();
        })
        .Overflow(overflow => overflow
            .Mode(ToolBarOverflowMode.Scroll)
            .ScrollButtons(ScrollButtonsType.Visible)
            .ScrollButtonsPosition(ScrollButtonsPositionType.Split)
        )
    )
```

| Command   | Description                                                                  | Resources                                                                                                                                              |
| --------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Columns   | Displays a global column menu.                                               | [Column menu documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/columns/column-menu#global-column-menu) |
| Create    | Adds an empty data item to the grid.                                         | [Editing functionality documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/overview)             |
| Save      | Persists any data changes done by the end user.                              | [Editing functionality documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/editing/overview)             |
| Paste     | Enables the built-in paste operations.                                       | [Clipboard documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/clipboard)                                |
| Pdf       | Exports the grid data in PDF format.                                         | [PDF Export documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/export/pdf-export)                       |
| Excel     | Exports the grid data in MS Excel format.                                    | [Excel Export documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/export/excel-export)                   |
| Search    | Adds the built-in search panel for the Grid.                                 | [Search Panel documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/search-panel)                          |
| Spacer    | Moves the tools that are declared after it to the right side of the ToolBar. |                                                                                                                                                        |
| Separator | Acts as a delimiter between the ToolBar commands.                            |                                                                                                                                                        |
| Group     | Allows grouping the data from the ToolBar tool.                              | [Grouping tool documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/adaptive-tools#grouping)   |
| Sort      | Displays a sort tool.                                                        | [Sorting tool documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/adaptive-tools#sorting)     |
| Filter    | Allows column filtering from the ToolBar tool.                               | [Filtering tool documentation](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/appearance/adaptive-tools#filtering) |

### Overflow

The built-in Toolbar provides properties for customizing its overflow behavior and appearance.

The following example demonstrates how to modify the default overflow settings of the Toolbar through the `Oveflow()` configuration.

```Razor
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
            .Name("grid")
            .ToolBar(toolbar => toolbar
                .Items(itm =>
                {
                    itm.Create();
                    itm.Edit();
                    itm.Destroy();
                    itm.Separator();
                    itm.Filter();
                    itm.Sort();
                    itm.Group();
                    itm.Spacer();
                    itm.ColumnChooser();
                })
            )
            .Overflow(o => o
               .Mode(ToolBarOverflowMode.Scroll)
               .ScrollButtons(ScrollButtonsType.Auto)
               .ScrollButtonsPosition(ScrollButtonsPositionType.Start)
               .ScrollDistance(50))
            )
            ... // Additional configuration.
         )
```

For more information on the available overflow options, refer to the [Appearance documentation of the ToolBar component](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/toolbar/appearance).

## Disable Inactive Tools

Starting with 2025 Q2 release the Grid component provides the possibility to disable or hide the inactive tools when editing. By default the inactive tools will be hidden. When the `ToolBar.ShowInactiveTools` option is enabled the inactive tools will be displayed as disabled.
In the example below, the inactive buttons will be disabled until a change in the Grid data is made:

The following example demonstrates how to add a custom command to the Toolbar:

```Razor HtmlHelper
    @(Html.Kendo().Grid<MyApplication1.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns => {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(140);
            columns.Bound(p => p.UnitsInStock).Width(140);
            columns.Bound(p => p.Discontinued).Width(100);
            columns.Command(command => command.Destroy()).Width(150);
        })
        .ToolBar(toolbar => toolbar
            .Items(itm =>
            {
                itm.Create();
                itm.Edit();
                itm.Destroy();
                itm.Separator();
                itm.Filter();
                itm.Sort();
                itm.Group();
                itm.Spacer();
                itm.ColumnChooser();
            })
            .ShowInactiveTools(true)
            .Overflow(overflow => overflow
                .Mode(ToolBarOverflowMode.Scroll)
                .ScrollButtons(ScrollButtonsType.Visible)
                .ScrollButtonsPosition(ScrollButtonsPositionType.Split)
            )
        )
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        //additional configuration omitted for brevity
    )
    </script>
```

## Custom Commands

The Toolbar of the Grid component supports custom commands.

The following example demonstrates how to add a custom command to the Toolbar:

```Razor HtmlHelper
    .ToolBar(toolbar=> {
           toolbar.Columns();
           toolbar.Create();
           toolbar.Save();
           toolbar.Paste();
           toolbar.Pdf();
           toolbar.Excel();
           toolbar.Search();
           toolbar.Spacer();
           toolbar.Separator();
    })

    <script>
    $(document).ready(function(){
        $("#customCommand").on("click", function(event) {
            alert('Custom command is clicked.');
            // Add the custom command logic here.
        });
    })
    </script>
```

If you are using the `Toolbar.Items` configuration (available since the Q2 2025 release), you can add a custom command as shown below:

```Razor HtmlHelper
    .ToolBar(toolbar => toolbar
        .Items(itm=>{
            itm.Excel();
            itm.Pdf();
            itm.Custom().ClientTemplate(
                Html.Kendo().Template().AddComponent(c => c
                    .Button()
                    .Name("refresh")
                    .Icon("arrow-rotate-cw")
                    .HtmlAttributes(new { title = "Refresh" })
                ));
        })
    )
```

## Toolbar Template

The Grid also supports using a template for the Toolbar. You can define the template as a string or return its content using a JavaScript function. For more information on the available template options, refer to the [`ToolBar()`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory) API.

The following example shows how to create a template for the Toolbar using the `ClientTemplateHandler()` option, which returns an [external Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/get-started-external).

```Razor HtmlHelper
    .ToolBar(toolbar => {
        toolbar.ClientTemplateHandler("getToolbarTemplate");
    })
```

```JS
    <script id="GridToolbarTemplate" type="text/x-kendo-template">
        <button class="k-button">Custom command</button>
    </script>

    <script>
        function getToolbarTemplate(data) {
            var template = $("#GridToolbarTemplate").html();
            return template;
        }
    </script>
```

### Built-In and Custom Commands in the Toolbar Template

To use the built-in commands in the Toolbar template, add the `HTML` markup of the respective command.

The following example demonstrates how to add the built-in `Pdf` and `Search` commands together with custom commands to the Toolbar template.

```Razor HtmlHelper
    <script id="GridToolbarTemplate" type="text/x-kendo-template">
        <div class="refreshBtnContainer">
            @(Html.Kendo().Button()
                .Name("refresh")
                .Icon("arrow-rotate-cw")
                .ToClientTemplate()
            )
        </div>

        <a role="button" class="k-button k-button-icontext k-grid-pdf" href="\\#"><span class="k-icon k-i-file-pdf"></span>Export to PDF</a>

        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            @(Html.Kendo().DropDownList()
            .Name("categories")
            .OptionLabel("All")
            .DataTextField("CategoryName")
            .DataValueField("CategoryID")
            .AutoBind(false)
            .Events(e => e.Change("categoriesChange"))
            .HtmlAttributes(new { style = "width: 150px;" })
            .DataSource(ds =>
            {
                ds.Read("ToolbarTemplate_Categories", "Grid");
            })
            .ToClientTemplate()
        )
        </div>

        <span class="k-textbox k-grid-search k-display-flex">
            <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
            <span class="k-input-icon"><span class="k-icon k-i-search"></span></span>
        </span>
    </script>
```

Starting with version R3 2023 SP1, you can use the [Template component](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/template/overview) to define custom Toolbar commands alongside the default ones.

The following example demonstrates how you can add [Button](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/navigation/button/overview) and [DropDownList](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/overview) components to the Grid's Toolbar, along with the default `Excel` command. For a live example, visit the [Toolbar Template Demo of the Grid](https://demos.telerik.com/aspnet-mvc/grid/toolbar-template).

```Razor HtmlHelper
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .ToolBar(toolbar=> {
               toolbar.Columns();
               toolbar.Create();
               toolbar.Save();
               toolbar.Paste();
               toolbar.Pdf();
               toolbar.Excel();
               toolbar.Search();
               toolbar.Spacer();
               toolbar.Separator();
                Html.Kendo().Template().AddComponent(c=>c
                    .Button()
                    .Name("refresh")
                    .Icon("arrow-rotate-cw")
                    .HtmlAttributes(new {title="Refresh"})
                    .Events(ev=>ev.Click("refresh"))
                ));
            toolbar.Spacer();
            toolbar.Custom().ClientTemplate(
                Html.Kendo().Template()
                .AddHtml("<label class=\"category-label\" for=\"category\">Show products by category:</label>")
                .AddComponent(c => c
                    .DropDownList()
                    .Name("categories")
                    .OptionLabel("All")
                    .DataTextField("CategoryName")
                    .DataValueField("CategoryID")
                    .AutoBind(false)
                    .Events(e => e.Change("categoriesChange"))
                    .HtmlAttributes(new { style = "width: 150px;" })
                    .DataSource(ds =>
                    {
                        ds.Read("ToolbarTemplate_Categories", "Grid");
                    })
                ));
            toolbar.Separator();
            toolbar.Excel();
        })
    )
```

```JavaScript
    <script>
        function refresh() {
            var grid = $("#grid").data("kendoGrid");
            grid.dataSource.read();
        }
        function categoriesChange() {
            var value = this.value(),
                grid = $("#grid").data("kendoGrid");

            if (value) {
                grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
            } else {
                grid.dataSource.filter({});
            }
        }
    </script>
```

### Server-Side Rendering of the Toolbar Template

Rendering of the Toolbar on the server is supported by using the [`Template()`](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/gridtoolbarcommandfactory#templatesystemaction) configuration option.

The following example demonstrates how to define a server-side Toolbar template.

```Razor HtmlHelper
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
        <div class="refreshBtnContainer">
            <a href="\\#" class="k-pager-refresh k-link k-button" title="Refresh"><span class="k-button-icon k-icon k-i-reload"></span></a>
        </div>
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            @(Html.Kendo().DropDownList()
                .Name("categories")
                .OptionLabel("All")
                .DataTextField("CategoryName")
                .DataValueField("CategoryID")
                .AutoBind(false)
                .Events(e => e.Change("categoriesChange"))
                .HtmlAttributes(new { style = "width: 150px;" })
                .DataSource(ds =>
                {
                    ds.Read("ToolbarTemplate_Categories", "Grid");
                })
            )
        </div>
        </text>);
    })
    ... // Additional configuration.
)
```

```JavaScript
    <script>
        $(document).ready(function() {
            var grid = $("#grid");
            grid.find(".k-grid-toolbar").on("click", ".k-pager-refresh", function (e) {
                e.preventDefault();
                grid.data("kendoGrid").dataSource.read();
            });
        });

        function categoriesChange() {
            var value = this.value(),
            grid = $("#grid").data("kendoGrid");

            if(value) {
                grid.dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
            } else {
                grid.dataSource.filter({});
            }
        }
    </script>
```

```CSS
    <style>
        #grid .k-grid-toolbar
        {
            padding: .6em 1.3em .6em .4em;
        }
        .category-label
        {
            vertical-align: middle;
            padding-right: .5em;
        }
        #category
        {
            vertical-align: middle;
        }
        .refreshBtnContainer {
            display: inline-block;
        }
        .k-grid .toolbar {
            margin-left: auto;
            margin-right: 0;
        }
    </style>
```

## See Also

* [Toolbar Template of the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/toolbar-template)
* [Toolbar Columns Menu of the Grid HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/grid/toolbar-columns-menu)
* [Server-Side API of the Grid HtmlHelper](https://www.telerik.com/aspnet-mvc/documentation/api/grid)