When the Kendo UI TreeView (DropDownTree as well) is nested inside a template and the Checkboxes(true) property is set, Invalid Template error is thrown.
For instance:
<script type="text/x-kendo-template" id="template">
@(Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(true)
.Items(treeview =>
{
treeview.Add().Text("My Web Site")
.SpriteCssClasses("folder")
.Expanded(true)
.Checked(true)
.Items(root =>
{
root.Add().Text("images")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(images =>
{
images.Add().Text("logo.png")
.SpriteCssClasses("image");
images.Add().Text("body-back.png")
.SpriteCssClasses("image");
images.Add().Text("my-photo.jpg")
.SpriteCssClasses("image");
});
root.Add().Text("resources")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(resources =>
{
resources.Add().Text("pdf")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(pdf =>
{
pdf.Add().Text("brochure.pdf")
.SpriteCssClasses("pdf");
pdf.Add().Text("prices.pdf")
.SpriteCssClasses("pdf");
});
});
});
}).ToClientTemplate()
)
</script>
function showDetails(e) {
e.preventDefault();
var detailsTemplate = kendo.template($("#template").html());
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
$("#SendArtifactId").val(dataItem.ArtifactId);
wnd.center().open();
}
The same feature which is available for Angular:
https://www.telerik.com/kendo-angular-ui/components/treeview/load-more-button/
Load More button functionality for the entire TreeView: