Menu Bar - Hide / Disable Logic is very difficult to work with.

[Mike Chafin]

Why is the menu bar component so hard to utilize? Most menu bars I've worked with you simply reference the menu item and set an Enabled / Hidden property to true or false and you're done.

This menu bar makes you create a list of menu item captions and then pass it to the HideItems, ShowItems, or EnabledItems methods when you have a menuitem object.

Which brings me to the question of setting the initial state of the menu bar. You can't use OnInitiaize as the ref to the menu bar is not initialized. If you use OnAfterRender it gets called for every menu interaction.

Is this just me? Am I missing some usage practice?

BTW, if you take the code from the documentation and try to run it won't run.

Mike

[Mohan Kumar Ramasamy]

Hi Mike 

 

We have checked your reported query. We can disable the sub menu item using EnableItems method in Created event. And we can hide the sub menu item using HideItems method in OnOpen event. Please find the below code snippet for reference.  

 

 

@using Syncfusion.Blazor.Buttons 

@using Syncfusion.Blazor.Navigations 

 

<SfMenu Items="@MenuItems" @ref="MenuObj"> 

    <MenuEvents Created="OnCreated" OnOpen="@BeforeOpen"></MenuEvents> 

</SfMenu> 

<br /> 

<br /> 

<SfButton @onclick="ShowItems">Show all items</SfButton> 

 

<br /> 

<br /> 

<SfButton @onclick="EnableItems">Enable all items</SfButton> 

 

 

@code { 

    SfMenu MenuObj; 

 

    public string[] EnableMenuItems = new string[] { "Conferences", "Directory", "Our Policy" }; 

    public string[] Items = new string[] { "Workshops", "Music", "Movies" }; 

 

    private void OnCreated() 

    { 

        this.MenuObj.EnableItems(EnableMenuItems, false); 

        this.MenuObj.HideItems(Items, false); 

    } 

 

    private void BeforeOpen(BeforeOpenCloseMenuEventArgs<MenuItemModel> args) 

    { 

        this.MenuObj.EnableItems(EnableMenuItems, false); 

        this.MenuObj.HideItems(Items, false); 

    } 

 

 

 

    public void ShowItems() 

    { 

        this.MenuObj.ShowItems(Items, false); 

    } 

    public void EnableItems() 

    { 

        this.MenuObj.EnableItems(EnableMenuItems, true); 

    } 

 

} 

 

 

For your reference, we have prepared a sample, please refer the below link. 

 

Link:  https://www.syncfusion.com/downloads/support/directtrac/157415/ze/157415-HideMenu-356470700  

 

we need to provide tag directive support (include disabled option), and logged this as an improvement.  We will provide this in our upcoming main release and appreciate your patience until then. You can track the status of this feature using below link.  

 

https://www.syncfusion.com/feedback/9230/need-to-provide-tag-helper-support-menu-item-property-in-menu 

 

Please let us know, if you need any further assistance, 

 

Regards, 

Mohankumar R