Tree view Filter child node

10 posts, 0 answers
  1. Santhosh
    Santhosh avatar
    9 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    Dear all,
                 i'd tried the samples of Treeview 
    but the filter is able to filter only the parent node 
    but i want to filter parent node and as well as child node too
    could anyone give me the samples of this thread
    thanks in advance
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 31 Jul 2013 Link to this post

    Hello Santhosh,

    You need to manually filter the children of the TreeView and display only the relevant nodes. I have prepared a demo with a possible implementation of this functionality in this jsBin.
     
    Regards,
    Kiril Nikolov
    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. Santhosh
    Santhosh avatar
    9 posts
    Member since:
    Jul 2013

    Posted 01 Aug 2013 Link to this post

    dear Kiril Nikolov ,

    it showing error when tried this sample below
    this is my template for treeview
    <script id="treeview-template" type="text/template">
               <span class="node" >
              #: item.caption #              
             </span>
                   <input type='hidden' class='data_id' value='#: item.reportid #'>
     
        </script>
    and this is my Treeview init 
    $.ajax({
                url: url + "reportname",
                dataType: "json",
                async: false,
                success: function (result) {
                    val = JSON.parse(result.d.toString());
                     },
                error: function (result) {
                    falert("Alert", "error");
                }
            });
            var TreeViewDataSource = new kendo.data.HierarchicalDataSource({
                data: val,
                schema: {
                    model: {
                        children: "items"
                    }
                }
            });
    and i'd placed the text box to search in treeview

    and the code shown below

    $(document).on("input", "#txtsearchtree", function () {
               var val = $("#txtsearchtree").val();
                   var treeview = $("#treeview").data("kendoTreeView"),
                       item = treeview.findByText(val), // find the node that will be shown
                       dataItem = treeview.dataItem(item),
                       nodeText = dataItem.caption;
     
                   // loop through the parents of the given node, filtering them to only one item
                   while (dataItem.parentNode()) {
                       dataItem = dataItem.parentNode();
                       dataItem.children.filter({ field: "caption", operator: "contains", value: nodeText });
                       nodeText = dataItem.caption;
                   }
     
                   treeview.dataSource.filter({ field: "caption", operator: "contains", value: nodeText });
                   treeview.expand(".k-item");
              
           });
    here it shows an error as 
    Uncaught TypeError: Cannot read property 'caption' of undefined

    please suggest me where i'd done wrong in above example


    and i'd worked by your example in Jsbin
    it shows an error so please see below link and suggest me what can i done wrong

    http://jsbin.com/ikejig/10/edit


    thanks in advance
    -santhosh
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 02 Aug 2013 Link to this post

    Hello Santhosh,

    I have reviewed your jsBin, and your implementation is not working, because the function inside $(document).on() is execute each time the user enters something in the input and when you use treeview.findByText(val) this method cannot find the data entered (the first time it will be just the first entry in the input) and return an undefined value, which causes the errors that you see in the console. 

    This is not a problem related to Kendo UI itself, so please reconsider the way you implement your functionality.

    If you need any questions, please do not hesitate to contact us. 

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Santhosh
    Santhosh avatar
    9 posts
    Member since:
    Jul 2013

    Posted 03 Aug 2013 Link to this post

    Dear Kiril Nikolov,
                             thanks for your Early Reply
    but i want to filter the treeview  by every single word or alphabet,
    eg: if i'd press 'B' 
    it will show all the datas  both parent and child node related to the alphabet 'B'

    please send me the sample for above technique
    thanks & regards
    -Santhosh
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Aug 2013 Link to this post

    Hello Santhosh,

    The functionality that you are looking for is not currently supported in Kendo UI. If you think that this is something that should be implemented, please submit it in our feedback forum, so it can be taken into consideration for future releases.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 18 Oct Link to this post

    Hi,

     

    I've found this conversation from 2013.

    I'd like to know if the filtering in the treeview component has been improved to allow searching also in the children nodes.

    Thanks

     

     

    (Obviusly a complete search feature must implement also a 'contains' match, not only the exact match!)

    Best,

    M

     

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Oct Link to this post

    Hi,

    The findByText() and findByUid() methods of the TreeView will search for child nodes as well. You can test them here:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#methods-findByText

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  10. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 19 Oct in reply to Kiril Nikolov Link to this post

    Kiril, please read accurately my post and the documentation you have linked:

    findByText(): "Searches for a node that has specific text."

    That means that the node text is "foobar" and you search for "foo" you don't get any result.

    This is called Exact Match and in most of the search functionality is useless. In fact in the built in search function of your treeview.datasource you can specify the matching operator, "StartsWith", "Contains", etc... but unfortunately it works only on the root nodes (obviously useless for a treeview!)

     

    So do you have a solution or a plan for fixing that?

     

     

     

     

  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 20 Oct Link to this post

    Hi,

    Currently we do no have such functionality. However you can submit this as a feature request in our feedback platform:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

    Regards,
    Kiril Nikolov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready