TreeView expands over the top of itself when using a filter

8 posts, 0 answers
  1. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 08 Dec 2014 Link to this post

    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
  2. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 08 Dec 2014 in reply to Ryan Link to this post

    (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.
  3. Kendo UI is VS 2017 Ready
  4. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 10 Dec 2014 Link to this post

    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!
     
  5. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 10 Dec 2014 in reply to Nikolay Rusev Link to this post

    Thanks very much Nikolay.
  6. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 05 Feb 2015 in reply to Nikolay Rusev Link to this post

    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
  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 09 Feb 2015 Link to this post

    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!
     
  8. Ryan
    Ryan avatar
    27 posts
    Member since:
    Jan 2013

    Posted 09 Feb 2015 in reply to Nikolay Rusev Link to this post

    It looks like that example comes up with a blank code window.
  9. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2285 posts

    Posted 11 Feb 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready