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

TreeView expands over the top of itself when using a filter

6 Answers 62 Views
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 08 Dec 2014, 07:21 PM
The treeview only supports filtering on the top level. I need every level to be filtered, so I am setting the datasource filter during the treeview expand event.

This works great in general. However, when you perform expansion in a certain order, the treeview nodes get corrupted and render over the top of themselves.

See example here

To repro:

Expand Furniture
Expand Tables & Chairs
Collapse Tables & Chairs
Collapse Furniture
Expand Furniture

Notice the tree rendering is messed up. I've attached an image.

What do you suggest to workaround this? Filtering at the dom-level is not an option. I need to base my filter on a field in my model.

Thanks,
Ryan

6 Answers, 1 is accepted

Sort by
0
Ryan
Top achievements
Rank 1
answered on 09 Dec 2014, 12:50 AM
(Am I missing a way to edit my original post? I did not see it)

I discovered I can work around the problem by not setting a filter, if it has already been set.

To recap:

Here is the working example.

Here is the broken example.
0
Nikolay Rusev
Telerik team
answered on 10 Dec 2014, 04:02 PM
Hello Ryan,

This behavior is due to re-bind which happens inside expand event. Calling filter method of the children data source will trigger data binding.

One way to achieve this is to bind to the change event of the child data source and inside it propagate the filter. Here is an example: http://dojo.telerik.com/@rusev/oWISI.

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ryan
Top achievements
Rank 1
answered on 06 Feb 2015, 12:03 AM
Hi Nikolay,

I am now attempting to follow your example and propagate the filter within a change event handler.

This mostly works, but I am running into a problem. Unfortunately, I am not able to reproduce it with a simple test case. But I am hoping you can shed some light anyway.

My scenario starts with a call to:

treeview.expandPath([1,2,3], function() {
     selectNode(); // selects a node in my tree with treeview.select(...)
});


So, my expand listener is being called in that context.

I can see all the calls to the expand listener (one for each level that is expanded). Inside there, I bind to the datasource change event as you demonstrated.

I notice that some of the datasource change events fire later on, after the expand finishes and calls selectNode(). That seems like maybe an issue. 

But the main problem is my datasource change listener is seeing more that just the "read" event (e.action == undefined). I also see "itemchange" actions for each node too. When the filter is set in response to these itemchange actions, then the problem is my selected node gets unselected.

If I ignore the events with action==itemchange, and set the filter during the event with action==undefined, then the selection is not lost.

So, I am wondering where these extra change events with action==itemchange are coming from. Because they seem to cause my selected node to get unselected, if I set a filter within such as callback. And, it seems like a hack to have to dance around them.

Thanks again,
Ryan
0
Nikolay Rusev
Telerik team
answered on 09 Feb 2015, 02:10 PM

Hello Ryan,

Alternatively to my original suggestion you can define filter expression in the DataSource configuration and it will apply recursively. Thus you'll avoid all the burden of handling change event. 

Example - http://dojo.telerik.com/@rusev/ubAbo

One thing that you should have in mind is that only initial/configuration filter will be applied recursively.

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ryan
Top achievements
Rank 1
answered on 09 Feb 2015, 09:30 PM
It looks like that example comes up with a blank code window.
0
Nikolay Rusev
Telerik team
answered on 11 Feb 2015, 03:21 PM

Hello Ryan,

Unfortunately it seems that something went wrong with the dojo. I'm referring again the example in question - http://dojo.telerik.com/@rusev/olukO

 var treeFilter = {
        field: "IsVisible",
        operator: "neq",
        value: false 
      };

      var inlineDefault = new kendo.data.HierarchicalDataSource({
        data: [
          { text: "Furniture", items: [
            { text: "Tables & Chairs", items:[
              { text: "Comfy 2000"},
              { text: "Comfinator 3000"},
              { text: "Comfster 99"}] },
            { text: "Sofas", IsVisible: false },
            { text: "Occasional Furniture" }
          ] },
          { text: "Decor", items: [
            { text: "Bed Linen" },
            { text: "Curtains & Blinds" },
            { text: "Carpets" }
          ] }
        ],
        filter: treeFilter
      });

      $("#tree").kendoTreeView({
        dataSource: inlineDefault
      });

 

The idea is that you could apply the filter in the data source configuraiton, thus it will be cloned recursively to the nested data sources.

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Nikolay Rusev
Telerik team
Share this question
or