This recipe demonstrates how to use custom toolbars in your grid.
Copy the following code into your new document:
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid How-to</title>
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="kendo/styles/kendo.default.min.css">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.web.min.js"></script>
<script src="js/personData.js"></script>
</head>
<body>
<h3 style="color:#4f90ea;">Exercise 9 - Getting a Handle on Toolbar Templates</h3>
<p><a href="index.html">Home</a></p>
<script type="text/javascript">
$(document).ready(function() {
var myDataSource = new kendo.data.DataSource({
data: personData,
schema: {
model: {
fields: {
FirstName: { type: "string" },
LastName: { type: "string" },
Rank: { type: "string" },
DOB: { type: "date" },
PersonId: { type: "number" }
}
}
}
} );
$("#myGrid").kendoGrid({
dataSource: myDataSource,
toolbar: [
{ template: kendo.template($("#toolbarTemplate").html()) }
],
columns: [
{ field: "Name", title: "Full Name", width: "300px", template: '#=FirstName# #=LastName#' },
{ field: "DOB", title: "Date of Birth", width: "300px" },
{ field: "Rank", title: "Rank", width: "300px" }
]
});
});
function toolClick() {
alert('You clicked me!');
}
</script>
<script id="toolbarTemplate" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolClick()">Custom Toolbar</a>
</script>
<div id="myGrid"></div>
</body>
</html>There are several ways to add a toolbar to a Kendo Grid, but this recipe demonstrates the most accessible and extensible way. We simply added the toolbar parameter and passed it the toolbarTemplate template that we created. We could have simply included the markup we used in the toolbarTemplate template as a string argument to the toolbar parameter. A toolbar can be just about anything you want, but in this case, we simply made it a button that fires some JavaScript function.
There is a nice example on the Kendo Grid demo website that shows how to bind the Kendo Grid to a Kendo dropdown. There are also ways to specify the create, save, cancel, and destroy toolbars, but we will use those later in the book when we perform Create Read Update Delete (CRUD) operations in our grid.