Toolbar
The ToolBar()
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 Core Grid.
Built-In Commands
You can configure the Toolbar and include any of the built-in commands:
.ToolBar(toolbar=> {
toolbar.Columns();
toolbar.Create();
toolbar.Save();
toolbar.Paste();
toolbar.Pdf();
toolbar.Excel();
toolbar.Search();
toolbar.Spacer();
toolbar.Separator();
})
<toolbar>
<toolbar-button name="columns"></toolbar-button>
<toolbar-button name="create"></toolbar-button>
<toolbar-button name="save"></toolbar-button>
<toolbar-button name="paste"></toolbar-button>
<toolbar-button name="pdf"></toolbar-button>
<toolbar-button name="excel"></toolbar-button>
<toolbar-button name="search"></toolbar-button>
<toolbar-button name="spacer" type="spacer"></toolbar-button>
<toolbar-button name="separator" type="separator"></toolbar-button>
</toolbar>
Command | Description | Resources |
---|---|---|
Columns | Displays a global column menu. | Column menu documentation |
Create | Adds an empty data item to the grid. | Editing functionality documentation |
Save | Persists any data changes done by the end user. | Editing functionality documentation |
Paste | Enables the built-in paste operations. | Clipboard documentation |
Exports the grid data in PDF format. | PDF Export documentation | |
Excel | Exports the grid data in MS Excel format. | Excel Export documentation |
Search | Adds the built-in search panel for the Grid. | Search Panel documentation |
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. |
Custom Commands
The Toolbar of the Grid component supports custom commands.
The following example demonstrates how to add a custom command to the Toolbar:
.ToolBar(toolbar=> {
toolbar.Custom().Text("Click me").HtmlAttributes(new { id = "customCommand" });
})
<script>
$(document).ready(function(){
$("#customCommand").on("click", function(event) {
alert('Custom command is clicked.');
// Add the custom command logic here.
});
})
</script>
<toolbar>
<toolbar-button name="customCommand" text="Click me"></toolbar-button>
</toolbar>
<script>
$(document).ready(function(){
$(".k-grid-customCommand").on("click", function(event) {
alert('Custom command is clicked.');
// Add the custom command logic here.
});
})
</script>
Toolbar Template
The Grid also supports using a template for the Toolbar. You can define the template as a string or an external Kendo UI template, load it through a partial view, or return its content using a JavaScript function. For more information on the available template options, refer to the ToolBar()
API.
The following example shows how to create a template for the Toolbar using an external Kendo UI template.
.ToolBar(toolbar => {
toolbar.ClientTemplateId("GridToolbarTemplate");
})
<toolbar client-template-id="GridToolbarTemplate">
</toolbar>
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Custom command</button>
</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.
<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-solid-base k-button-solid k-button-md k-rounded-md 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>
<script id="GridToolbarTemplate" type="text/html">
<div class="refreshBtnContainer">
<kendo-button name="refresh" icon="arrow-rotate-cw" is-in-client-template="true">
</kendo-button>
</div>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md 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>
<kendo-dropdownlist name="categories" style="width:150px" is-in-client-template="true"
datatextfield="CategoryName"
datavaluefield="CategoryId"
option-label="All"
auto-bind="false"
on-change="categoriesChange">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("ToolbarTemplate_Categories", "Grid")" />
</transport>
</datasource>
</kendo-dropdownlist>
</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 to define custom Toolbar commands alongside the default ones.
The following example demonstrates how you can add Button and DropDownList components to the Grid's Toolbar, along with the default Excel
command. For a live example, visit the Toolbar Template Demo of the Grid.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("grid")
.ToolBar(toolbar=> {
toolbar.Custom().ClientTemplate(
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();
})
)
<kendo-grid name="grid" height="500">
<toolbar>
<toolbar-button>
<toolbar-command-template>
<kendo-button name="refresh" icon="arrow-rotate-cw" on-click="refresh">
</kendo-button>
</toolbar-command-template>
</toolbar-button>
<toolbar-button name="spacer" type="spacer" />
<toolbar-button>
<toolbar-command-template>
<label class="category-label" for="category">Show products by category:</label>
<kendo-dropdownlist name="categories" style="width:150px"
datatextfield="CategoryName"
datavaluefield="CategoryID"
option-label="All"
auto-bind="false"
on-change="categoriesChange">
<datasource type="DataSourceTagHelperType.Custom">
<transport>
<read url="@Url.Action("ToolbarTemplate_Categories", "Grid")" />
</transport>
</datasource>
</kendo-dropdownlist>
</toolbar-command-template>
</toolbar-button>
<toolbar-button name="separator" type="separator" />
<toolbar-button name="excel" />
</toolbar>
</kendo-grid>
<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>