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.

Example

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

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

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

    <script>
        angular.module("KendoDemos", ["kendo.directives"])
            .controller("MyCtrl", function ($scope) {
                var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

                var homogeneous = new kendo.data.HierarchicalDataSource({
                    transport: {
                        read: {
                            url: serviceRoot + "/Employees",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "EmployeeId",
                            hasChildren: "HasEmployees"
                        }
                    }
                });

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

                $scope.click = function (dataItem) {
                    alert(dataItem.FullName);
                };
            });
    </script>

See Also

• TreeView JavaScript API Reference
• How to Customize Checkbox Templates
• How to Render Multiple TreeViews Using HTML Source Binding
• How to Edit Nodes via Form
• How to Filter Out Search Results
• How to Hide Checkboxes for Root Level
• How to Persist Expanded State

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