Toolbar
The toolBar configuration option of the Grid allows you to add command buttons and allows the user to invoke built-in Grid functionalities. You can also define custom commands or use templates to customize the Toolbar of the Kendo UI for jQuery Grid.
Built-In Commands
You can configure the Toolbar and include any of the built-in commands:
$("#grid").kendoGrid({
toolbar: [
{ name: "create" },
{ name: "save" },
{ name: "cancel" },
{ name: "pdf" },
{ name: "paste" },
{ name: "excel" },
{ name: "search" },
{ name: "columns" },
]
....
});
</script>| Command | Description | Resources |
|---|---|---|
| columns | Displays a global column menu. | Column menu documentation |
| create | Adds an empty data item to the Grid. | Editing functionality documentation |
| cancel | Reverts any data changes done by the end user. | 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 |
Custom Commands
The Toolbar of the Grid component supports custom commands.
The following example demonstrates how to add a custom command to the Toolbar:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: [ {
type: "button",
text: "Button"
}, {
type: "splitButton",
text: "SplitButton",
menuButtons: [{text: "Option 1"}, {text: "Option 2"}]
},{
name: "dropDownButton",
type: "dropDownButton",
text: "Country",
menuButtons: [
{ id: "1", text: "Belgium" },
{ id: "2", text: "France" }
]
}],
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
],
schema: {
model: { id: "id" }
}
},
editable: true
});
</script>Toolbar Template
The Grid also supports using a template for the Toolbar. You can define the template as a string, as an external Kendo UI template, or return its content using a JavaScript function. For more information on the available template options, refer to the Toolbar Templates API.
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 showInactiveTools option is enabled the inactive tools will be displayed as disabled.
In the example below, the Save Changes and Cancel Changes buttons will be disabled until a change in the Grid is performed:
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
showInactiveTools: true,
toolbar: ["save", "cancel"],
columns: [{ field: "name" }, { field: "age" }],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 },
],
schema: {
model: {
id: "id",
fields: {
age: { type: "number" },
},
},
},
},
editable: true,
});
});
</script>
KB Articles on Toolbar Templates
- Place Edit or Update Buttons to Grid Toolbar
- Lock and Unlock Grid Columns by Using Toolbar instead of Column Menu
- Find Out More in the Knowledge Base