Filtering Kendo UI Menu

2 Answers 43 Views
Menu
Vedad
Top achievements
Rank 2
Bronze
Iron
Veteran
Vedad asked on 24 Apr 2022, 06:07 PM

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
Telerik team
commented on 27 Apr 2022, 04:35 PM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 03 May 2022, 12:59 PM

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

2 Answers, 1 is accepted

Sort by
1
Accepted
Neli
Telerik team
answered on 06 May 2022, 07:18 AM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 06 May 2022, 08:02 AM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 11 May 2022, 07:32 AM | edited

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
Telerik team
commented on 16 May 2022, 06:13 AM

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

0
Neli
Telerik team
answered on 11 May 2022, 06:57 AM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 08 Jul 2022, 09:13 AM

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
Telerik team
commented on 13 Jul 2022, 06:59 AM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 13 Jul 2022, 07:49 AM

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
Telerik team
commented on 18 Jul 2022, 06:41 AM

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
Telerik team
commented on 19 Jul 2022, 07:21 AM

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
Top achievements
Rank 2
Bronze
Iron
Veteran
commented on 25 Jul 2022, 11:02 AM

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

Tags
Menu
Asked by
Vedad
Top achievements
Rank 2
Bronze
Iron
Veteran
Answers by
Neli
Telerik team
Share this question
or