Create Custom ToolBar Templates
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Operating System | All |
Browser | All |
Browser Version | All |
Description
How can I create a custom ToolBar template in an AngularJS application using the Kendo UI Grid for jQuery?
Solution
The following example demonstrates how to create a custom ToolBar template in AngularJS applications.
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" ng-click="toolbarClick()">Command</a>
</script>
<div kendo-grid
k-toolbar="toolbarTemplate"
k-columns="[{ title: 'foo' , field: 'foo' },
{ title: 'bar' , field: 'bar' }]"
k-data-source="data">
</div>
</div>
</div>
<script>
function MyCtrl($scope) {
$scope.data = new kendo.data.DataSource({ data: [{foo: "foo", bar: "bar"}] });
$scope.gridName = "My Grid";
$scope.toolbarTemplate = $("#template").html();
$scope.toolbarClick = function() { console.log("click"); }
}
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", MyCtrl);
</script>
See Also
- JavaScript API Reference of the Data Grid
- Bind to Telerik Backend Services
- Change Languages Dynamically
- Create Custom Editors
- Create Custom Edit Buttons
- Use AngularJS in Popup Editor Templates
- Use Resize Columns from a Button
For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.