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>