Toolbar
The ToolBar() configuration option of the Grid allows you to add command buttons and allow the user to invoke built-in Grid funcitionalities. 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:
.ToolBar(toolbar=> {
toolbar.Create();
toolbar.Save();
toolbar.Pdf();
toolbar.Excel();
toolbar.Search();
})
| Command | Description | Resources |
|---|---|---|
| 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 |
| 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 |
Custom Commands
The Telerik UI for ASP.NET MVC Grid supports adding custom commands to it's Toolbar.
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").click(function (e) {
e.preventDefault();
alert('click')
//add custom command logic here
});
})
</script>
Toolbar Template
The Telerik UI for ASP.NET MVC Grid also supports using a template for the Toolbar. You can define a template by using the ClientTemplate() or the ClientTemplateId() configuration options.
.ToolBar(toolbar => {
toolbar.ClientTemplateId("GridToolbarTemplate");
})
When you use a Toolbar Template, and you also want to use a built-in command, then add the markup for the desired command. The following example demonstrates how to add the Pdf and Search commands to the Toolbar Template demonstrated in the Telerik UI for ASP.NET MVC Grid Toolbar Template Demo.
<script id="GridToolbarTemplate" type="text/x-kendo-template">
<div class="refreshBtnContainer">
<a href="\\#" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-rectangle k-button-md k-rounded-md k-button-icon" title="Refresh"><span class="k-icon k-i-reload"></span></a>
</div>
<a role="button" class="k-button k-button-solid-base k-button-solid k-button-rectangle 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>