Filter MultiSelectTree show parent with child

[Ziggy]

Hi,

Is it possible to implement a filter in a multiSelectTree so that when a search term matches a parent item, it automatically displays all of its children as well?

example:

data = [

    {

        text: 'Furniture', id: 1, items: [

            { text: 'Tables & Chairs', id: 2 },

            { text: 'Sofas', id: 3 },

            { text: 'Occasional Furniture', id: 4 }

        ]

    }, {

        text: 'Decor', id: 5, items: [

            { text: 'Bed Linen', id: 6 },

            { text: 'Curtains & Blinds', id: 7 },

            { text: 'Carpets', id: 8 }

        ]

    }

];

 

For instance, if one were to search for "decor," would the system also show "Bed Linen," "Curtains & Blinds," and "Carpets"?

Thanks in advance,
Ziggy

[Konstantin Dikov]

Hello Ziggy,

The processTreeData helper method will return only the nodes satisfying the filter descriptor and it is not possible to modify it in a way that will return the child nodes as well. However, you can remove the filter from the processTreeData and manually filter the nodes before calling the processTreeData method with some custom filter logic that will return the nodes that you want to display:

  computed: {
    treeData () {
      return processTreeData(customFilter(this.dataItems, this.filter), { 
        expanded: this.expanded, 
        value: this.value,
      }, fields);
    }
  },

The customFilter function must return the filtered tree data using the current filter value. You will have to recursively go through the tree data and remove the items that you don't want to be displayed.

Regards,
Konstantin Dikov
Progress Telerik