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.