TreeView expands over the top of itself when using a filter

[Ryan]

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

[Ryan]

(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.

[Nikolay Rusev]

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

 

 

[Ryan]

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

[Nikolay Rusev]

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

 

 

[Ryan]

It looks like that example comes up with a blank code window.

[Nikolay Rusev]

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