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

Define Node Template When TreeView Is within PanelBar

Kendo UI offers template support in AngularJS applications for both its TreeView and the PanelBar widgets.

If you define a template through the k-template directive, it will not be mapped correctly to the TreeView. To work around this issue, define the template in a <script type="text/x-kendo-template"> element. As a result, it will be programmatically assigned to the TreeView.

    <script id="treeview-template" type="text/x-kendo-template">

            <button class='k-button' ng-click='click(dataItem)'>Select</button>

    <div id="example" ng-app="KendoDemos">
        <div ng-controller="MyCtrl">
            <ul kendo-panel-bar>
                <li class="k-state-active">Folders
                    <div kendo-tree-view="tree"
                        k-on-change="selectedItem = dataItem"
            <div ng-show="selectedItem">
                <h4>Selected: </h4>

        angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function ($scope) {
                var serviceRoot = "";

                var homogeneous = new{
                    transport: {
                        read: {
                            url: serviceRoot + "/Employees",
                            dataType: "jsonp"
                    schema: {
                        model: {
                            id: "EmployeeId",
                            hasChildren: "HasEmployees"

                $scope.options = {
                    dataSource: homogeneous,
                    template: kendo.template($('#treeview-template').html())

                $ = function (dataItem) {

See Also

In this article
Not finding the help you need? Improve this article