This is a migrated thread and some comments may be shown as answers.

Error message on using findByText function for TreeView

5 Answers 226 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 04 Jul 2015, 05:20 PM

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

Sort by
0
Alexander Popov
Telerik team
answered on 07 Jul 2015, 12:35 PM
Hi Tayger,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 12 Aug 2015, 11:45 PM

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

0
Tayger
Top achievements
Rank 1
Iron
answered on 13 Aug 2015, 11:00 PM

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

0
Alexander Popov
Telerik team
answered on 14 Aug 2015, 02:14 PM
Hi Tayger,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 15 Aug 2015, 11:33 AM

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

Tags
TreeView
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Alexander Popov
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or