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

Tree view Filter child node

9 Answers 457 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Santhosh
Top achievements
Rank 1
Santhosh asked on 30 Jul 2013, 06:40 AM
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

9 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 31 Jul 2013, 01:34 PM
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!
0
Santhosh
Top achievements
Rank 1
answered on 01 Aug 2013, 06:14 AM
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
0
Kiril Nikolov
Telerik team
answered on 02 Aug 2013, 10:22 AM
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!
0
Santhosh
Top achievements
Rank 1
answered on 03 Aug 2013, 11:05 AM
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
0
Kiril Nikolov
Telerik team
answered on 06 Aug 2013, 08:03 AM
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!
0
marco
Top achievements
Rank 2
answered on 18 Oct 2016, 01:21 PM

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

 

0
Kiril Nikolov
Telerik team
answered on 19 Oct 2016, 07:25 AM
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.
 
0
marco
Top achievements
Rank 2
answered on 19 Oct 2016, 07:58 AM

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?

 

 

 

 

0
Kiril Nikolov
Telerik team
answered on 20 Oct 2016, 06:23 AM
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.
 
Tags
TreeView
Asked by
Santhosh
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Santhosh
Top achievements
Rank 1
marco
Top achievements
Rank 2
Share this question
or