Filtering Kendo UI Menu

[Vedad]

Hi,

I have Menu component in my app, and it is dynamically filled in depending on a few parameters. As a result, I can have 4-5 menus and each of them 10-20 sub-options. 

I would like to implement "search" option for the menu.

I tried implementing datasource filter, but for some reason it always filters only 0-level and not children or their subelements.

I used standard datasource filter with field name, contains clause and value.

Am I doing something wrong or there is some better approach for this?

Thank you and regards,

Vedad

[Martin]

Could you please share a small Dojo example demonstrating the scenario and the issue you are experiencing? That would allow me to directly debug and look for a solution. Thank you in advance!

[Vedad]

Hi Martin,

please find the dojo below:

https://dojo.telerik.com/OlIPEXEm/2

If you type part of the keyword and press <enter> it should filter.. However, it filters only on the first level (Furniture or Decor) and doesn't filter its children.

If there are any questions or additional info you need, please let me know.

Best

Vedad

[Neli]

Hi Vedad, 

Initially, only the parent items are loaded in the Menu dataSource. If you try to log the datasouce.data() you will see that the items collection for each parent item is initially empty. To load the submenu items the parent item needs to be opened. Thus I would suggest after the Menu is initialized to programmatically open and close the parent items. Thus, the subitems will be loaded and the filter will be applied to all the items.

var men = $("#menu").data("kendoMenu");
var items = $('#menu>li')

 for(var i = 0; i<=items.length; i++){
      men.open($('#menu>li')[i])              
      men.close($('#menu>li')[i])            
 } 

Here you will find the modified Dojo example. 

Regards,

Neli

[Vedad]

Hi Neli,

thank you for you answer, and you are right about part with children loading - I forgot about this in the dojo (In my local case I had full datasource loaded).

However, even with your modification menu is not filtered correctly (at least not as I expected with filter with contains)

If I type "Sof" in the search box, it should only leave Sofas and Corner Sofas under Furniture.. but that is not the case.

Please see attached image from your demo (I just moved textbox on top so I could show contents of both textbox and menu).

Interesting thing is also that Filter gets additional "OR" part with _matchfilter.

filters: Array(2)
0:
field: "text"
operator: "contains"
value: "sof"
[[Prototype]]: Object
1:
field: "_matchFilter"
operator: "eq"
value: true
[[Prototype]]: Object
length: 2
[[Prototype]]: Array(0)
logic: "or"
[[Prototype]]: Object

If there is anything else I could do please let me know.

Thank you and regards,

Vedad

[Vedad]

Hi Neli,

thank you very much. This solves the problem indeed. I somehow focused on dataSource filtering that I didn't consider this.

I accepted original reply as answer, if you want you can make answer separate reply and I will accept it.

Thanks and have a nice day

Vedad

[Neli]

Hi Vedad,

I am glad to hear that the provided information was helpful in resolving the issue.

I converted my previous reply to an answer as well.

Regards,

Neli

[Neli]

Hi Vedad,

To achieve the desired behavior you will need a custom implementation. For example, when an item is about to be opened, you can handle the open event of the Menu and hide the subitems that does not match the filter:

 open: function(e){             
              var items = $(e.item).find('.k-item .k-menu-link-text')
              
              for(var i = 0; i < items.length; i++){
                var isVisible = items[i].textContent.toLowerCase().includes($('#search').val())
                if(!isVisible){                  
                  $(items[i]).closest('.k-menu-item').hide()
                }
                
              }
            }

Here you will find the modified Dojo example. 

Regards,

Neli

[Vedad]

Hi Neli, 

it is me again..

Neither solution seems to work with hierarchy.. Please find attached dojo

https://dojo.telerik.com/uQILINEJ

If I try ti find "chi" it filters everything and nothing works.

Thank you very much

Vedad

[Neli]

Hi Vedad,

I am afraid that the provided suggestion is nto suitable for a Menu with multuple nested level sub-items.

Note, that having a searching functionality is not a supported built-in option in Kendo Menu widget. If you think that such a feature will be a valuable addition to the suite I would suggest you to log the idea in our Feedback Portal.

- https://feedback.telerik.com/kendo-jquery-ui

Thus, the other user could vote for it and we could consider it for adding for implementation in a future release.

Regards,

Neli

[Vedad]

Hi Neli, 

Thank you for your answer, but from my experience, even features with better use cases never made it, so I won't add it to feature list. 

However, I think that the fact that menu uses hierarchical data source and ignoring datasource filtering might be considered a bug. I will try to find a solution, but please reconsider using datasource filtering in widget.

THanks and have a nice day

Vedad

[Neli]

Hi Vedad,

Thank you for your comment. I will forward you feedback to the team. However, please note that the Feature Requests are added for implementation based on the demand. The more votes a requests get by the users in the portal, the bigger chance it gets to be considered for implementation. 

Regarding the filtering of the hierarchical data I will discuss the issue with the developers and will come back to you once I have more infromation on the matter.

Regards,

Neli

[Neli]

Hi Vedad, 

After additional review of the example I would suggest to add change event hanlder to the Hierarchical DataSource as demonstrated in our API:

- https://docs.telerik.com/kendo-ui/api/javascript/data/hierarchicaldatasource/configuration/filter

 change: function(e) {
             for (var i = 0; i < e.items.length; i++) {
                e.items[i].load();
             }
        },

I modified the example and added the change event handler. I also commented the code for hiding the Menu items, thus the parent of the filtered Menu item to remain visible. Here you will find the modified Dojo example. 

Please review the example and let me know in case you have any comments.

Regards,

Neli

[Vedad]

Hi Neli, 

Thank you very much for your effort and suggestion. I will take a look and try to use it.

I will let you know of the outcome.

All the best

Vedad