Set MVVM Toolbar Template

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® TreeList for jQuery

Description

How can I set the toolbar template in a Kendo UI MVVM TreeList?

Solution

Use a function that will return the desired template.

<script id="toolbar-template" type="text/x-kendo-template">
    <div>
        <button id="myButton">
            Add New #=group.Name#
    </button>
    </div>
</script>
<script>
    function myTemplate() {
        var template = kendo.template($('#toolbar-template').html());
        var result = template({
            group: {
                Name: 'group1'
            }
        });
        return result
    }
</script>
<div id="example">
    <div data-role="treelist" data-selectable="true" data-columns="[
                        { 'field': 'Name' },
                        { 'field': 'Position', 'width': 270 },
                        ]" data-bind="source: employees" data-toolbar="#=myTemplate()#" style="height: 300px"></div>
    <script>
        var viewModel = kendo.observable({
            employees: new kendo.data.TreeListDataSource({
                data: [{
                        EmployeeID: 1,
                        ReportsTo: null,
                        Name: "Andrew Fuller",
                        Position: "CEO"
                    },
                    {
                        EmployeeID: 2,
                        ReportsTo: 1,
                        Name: "Andrew Hopkins",
                        Position: "Sales"
                    },
                    {
                        EmployeeID: 3,
                        ReportsTo: 1,
                        Name: "Betty Stewart",
                        Position: "Legal advisor"
                    },
                    {
                        EmployeeID: 4,
                        ReportsTo: 1,
                        Name: "Jon Michaels",
                        Position: "Product team lead"
                    },
                    {
                        EmployeeID: 5,
                        ReportsTo: 1,
                        Name: "Rebecca Williams",
                        Position: "Software developer"
                    },
                    {
                        EmployeeID: 6,
                        ReportsTo: 4,
                        Name: "John Smith",
                        Position: "Marketing associate"
                    },
                    {
                        EmployeeID: 7,
                        ReportsTo: 4,
                        Name: "Natasha Andrews",
                        Position: "System administrator"
                    },
                    {
                        EmployeeID: 8,
                        ReportsTo: 4,
                        Name: "Victoria Belmont",
                        Position: "Designer"
                    },
                    {
                        EmployeeID: 9,
                        ReportsTo: 4,
                        Name: "Emma Watkins",
                        Position: "Software developer"
                    }
                ],
                schema: {
                    model: {
                        id: "EmployeeID",
                        parentId: "ReportsTo",
                        fields: {
                            EmployeeId: {
                                type: "number",
                                editable: false,
                                nullable: false
                            },
                            ReportsTo: {
                                nullable: true,
                                type: "number"
                            },
                            Name: {
                                field: "Name",
                                type: "string"
                            },
                            Position: {
                                field: "Position",
                                type: "string"
                            }
                        }
                    }
                }
            })
        });
        kendo.bind($("#example"), viewModel);
    </script>
</div>