Error message on using findByText function for TreeView

6 posts, 0 answers
  1. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 04 Jul 2015 Link to this post

    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?

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 07 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 12 Aug 2015 in reply to Alexander Popov Link to this post

    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

  5. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 13 Aug 2015 in reply to Tayger Link to this post

    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

  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 14 Aug 2015 Link to this post

    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!
     
  7. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 15 Aug 2015 in reply to Alexander Popov Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready