Hello
I'm using a TreeView that is working fine but I always got an error message when using the findByText function. It took my a good time to find out what the problem is: I am using a template on initializing the TreeView. If I disable/remove the template on initializing the TreeView the findByText function works great. If the template is active I got an error message on using findByText function:
[Error] TypeError: undefined is not an object (evaluating 'o.loaded') kendo.all.min.js :38:19209
var objectView = $("#treeview").data("kendoTreeView");
objectView.append({ text: "append1" }, $("#treeview .k-item:last")); // --> Works with and without template
var foo = objectView.findByText("Game");
objectView.append({ text: "append2" }, test); // --> Works only without template
DataSource used in TreeView:
var treeEmpty = [
{text: "Game",id: -1, type: "game", expanded: true, spriteCssClass: "fa fa-globe fa-fw", items: [
//{ text: "Mein Game", id: -2, type: "spot"},
{ text: "Spots", id: -2, type: "spot", spriteCssClass: "fa fa-map-marker fa-fw"},
{ text: "Characters", id: -3, type: "character", spriteCssClass: "fa fa-user fa-fw"},
{ text: "Items", id: -4, type: "item", spriteCssClass: "fa fa-key fa-fw"}
]
}
];
Template used in TreeView:
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
# item.id #
# if (item.id < 0) { #
<a class="fa fa-plus-circle fa-fw handpointer"> </a>
# } #
</script>
I must assume that the usage of a template in a TreeView changes the default structure so certain functions do not work anymore. How else can I append entries/items to TreeView when using a template?
5 Answers, 1 is accepted
I am not exactly sure why this happens and so far I was not able to reproduce it. Would you please share an example where the error is reproducible? Also, keep in mind that the findByText method is looking for an exact match. The template however, includes some whitespace characters. Removing the extra spaces and new lines should give you the expected results. Additionally, you can use a custom jQuery selector instead of the findByText method. For example:
var text = "Game";var node = $("#treeview li:contains('"+text+"')");Regards,
Alexander Popov
Telerik
Rank 1
Iron
Hi
Sorry for delay! I created now a working sample you can reproduce the "error" By creating it I'm now sure the problem is created by using a html template. Here is the example in which you have to set the script paths for your local JQuery and Kendo UI:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Find text in treeview with a template</title>
<script src="telerik/js/jquery.min.js"></script>
<script src="telerik/js/kendo.all.min.js"></script>
</head>
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
# item.id #
# item.type #
</script>
<script language="JavaScript" type="text/javascript">
var treeGame = [
{ text: "Boardgames",id: -1, type: "indoor", expanded: true, items: [{ text: "Chess" },{ text: "TicTacToe" }] },
{ text: "Outdoor games", id: -2, type: "outdoor", expanded: true, items: [{ text: "Soccer" },{ text: "Tennis" }] }
];
$(document).ready(function() {
// Init game treeview
$("#treeview").kendoTreeView({
// This template does not work for findByText
template: kendo.template($("#treeview-template").html()),
// This template works for findByText
//template :"<span class='#: item.items ? 'k-i-plus' : 'k-i-refresh' #'></span>#: item.text #",
animation: false,
dataSource: treeGame,
select: function(e) {
// alert(treeview.dataItem(e.node).id);
var selItem = $('#treeview').data('kendoTreeView').dataItem(e.node);
}
});
var treeview = $("#treeview").data("kendoTreeView");
// Find "Chess" in treeview
var findchess = treeview.findByText("Chess");
console.log(findchess);
});
</script>
<body>
<div id="treeview" ></div>
</body>
</html>
The current state of the script will show [] in the console log. This is because the HTML template (treeview-template) is used. If you deactivate it (line 30) there will be a valid output in the console (findByText works). It also works on using the inline template at line 32. It doesn't matter switching the important template part from #: item.text # to #= item.text #
Template A still wont work in conjunction with "findByText" for either #= or #: while template B works with both settings.
Am I doing something wrong or is there a bug?
Kind Regards
Rank 1
Iron
I'm sorry I forgot to add the append code so the initial mentioned error message appears. The error message is obvious if no node is found and thats the case with active template (A).
Here is a complete and functional sample with two templates (template (A) does not find the node and produces the error message while template (B) works find and does the append operation):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Find text in treeview with template</title>
<script src="telerik/js/jquery.min.js"></script>
<script src="telerik/js/kendo.all.min.js"></script>
</head>
<script id="treeview-template" type="text/kendo-ui-template">
#: item.text #
# item.id #
# item.type #
</script>
<script language="JavaScript" type="text/javascript">
var treeGame = [
{ text: "Boardgames",id: -1, type: "indoor", expanded: true, items: [{ text: "Chess" },{ text: "TicTacToe" }] },
{ text: "Outdoor games", id: -2, type: "outdoor", expanded: true, items: [{ text: "Soccer" },{ text: "Tennis" }] }
];
$(document).ready(function() {
// Init game treeview
$("#treeview").kendoTreeView({
// This template (A) does not work for findByText
template: kendo.template($("#treeview-template").html()),
// This template (B) works for findByText
// template :"<span class='#: item.items ? 'k-i-plus' : 'k-i-refresh' #'></span>#: item.text #",
animation: false,
dataSource: treeGame
});
var treeview = $("#treeview").data("kendoTreeView");
// Find "Chess" in treeview
var findchess = treeview.findByText("Chess");
console.log(findchess);
// This produces the error message: TypeError: undefined is not an object (evaluating 'o.loaded')
// when template (A) is active because it wont find "Chess" and therefore no node to append
treeview.append({
text: 'Something'
}, findchess);
});
The big question: Why is no node found on template (A)?
Greetings
This happens because there are blank spaces in the template, which are later rendered in the TreeView's nodes. As a result, the findByText method fails to find a node, as it works with an exact match only. A workaround for this limitation can be found below. I have also prepared a small Dojo example.
Regards,
Alexander Popov
Telerik
Rank 1
Iron
Thank you for checking this out. I saw your previous workaround but just was curious what/if I did wrong. I will use then the JQuery solution you provided. Maybe the can be fixed in a future Release of Kendo UI so that FindByText will also work for such templates.
Regards