New to Kendo UI for jQuery? Download free 30-day trial

Create Custom ToolBar Templates


Product Progress® Kendo UI® Grid for jQuery
Operating System All
Browser All
Browser Version All


How can I create a custom ToolBar template in an AngularJS application using the Kendo UI Grid for jQuery?


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>

      <div kendo-grid
         k-columns="[{ title: 'foo' , field: 'foo' },
                    { title: 'bar' , field: 'bar' }]"

    function MyCtrl($scope) {
        $ = new{ 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);

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

In this article