Disabled & Hidden property does not completely remove sub-menu item

[Kenney Phan]

Hi, I am trying to completely hide & disable the sub-menu item 'User' within 'Administrator' when the sidebar closes. Every time I do it and hover over 'Administrator', the text for 'User' is gone, but a border around the sub-menu item is still showing. 

How can I completely hide & disable 'User' whenever the sidebar closes? 

Thank you,

                                              

Attachment: MenuBarTest_f2b870e2.zip

[Gayathri KarunaiAnandam]

Hi Kenney, 

Thank you for contacting Syncfusion support. 

We have checked you reported query and sample. We can resolve the issue by using OnOpen event as demonstrated in the below code snippet. 

 

Code: 

<SfMenu TValue="MenuItem" Orientation="@VerOrientation" CssClass="container"> 

.. .. 

<MenuEvents OnOpen="OnOpen" TValue="MenuItem"></MenuEvents> 

</SfMenu> 

 

@code{ 

private void OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args) 

    { 

        if (args.Items[0].Text == "User" && args.Items[0].Hidden) 

        { 

            args.Cancel = true; 

        } 

    } 

} 

  

For your reference, we have prepared a sample based on your requirement. Please check the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/163045/ze/Menu_css499543551 

Please check the above link and get back to us, if you need further assistance. 

Regards, 

Gayathri K 

[Kenney Phan]

Hi thank you for your response.

This works, but when I expand the sidebar again by clicking on 'Administrator', hovering over 'Administrator' does not show 'User'. I have to hover over another menu-item and back to 'Administrator' in order for it to show 'User' again. Do you have a work around for this? Thanks.

[Gayathri KarunaiAnandam]

Hi Kenney, 

We have checked your reported query. We would like to let you know that the submenu in Menu component will hide when the Hidden property is set to true. If you need to make it appear, please set the Hidden property to false as per your required condition. 

Code Snippet:  

<SfMenu TValue="MenuItem" Orientation="@VerOrientation" CssClass="container"> 

                                <MenuEvents TValue="MenuItem" ItemSelected="@onMenuSelect"></MenuEvents> 

                                <MenuItems> 

                                    <MenuItem Text="Administrator" IconCss="fad fa-user-unlock"> 

                                        <MenuItems> 

                                            <MenuItem Text="User" Hidden="!sidebarOpen" Disabled="!sidebarOpen"></MenuItem> 

                                        </MenuItems> 

                                    </MenuItem> 

                                    <MenuItem Separator="true"></MenuItem> 

                                </MenuItems> 

                                <MenuEvents OnOpen="OnOpen" TValue="MenuItem"></MenuEvents> 

                            </SfMenu> 

 

@code 

{ 

private void OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args) 

    { 

        if (args.Items[0].Text == "User" && args.Items[0].Hidden) 

        { 

            args.Cancel = true; 

        } 

    } 

    public void Toggle() 

    { 

        sidebarOpen = !sidebarOpen; 

    } 

 

    public void onMenuSelect(MenuEventArgs<MenuItem> args) 

    { 

        if (args.Item.Text == "Administrator") 

        { 

            sidebarOpen = true; 

        } 

    } 

} 

Please get back to us if you need any further assistance. 

Regards, 

Gayathri 

[Kenney Phan]

Hi, this is the same logic for what I already have in my code. Even if I set hidden=true when sidebar opens, the sub-menu item does not show because the 'Cancel' property is still set to true. The sub-menu item will only show if I hover over another menu-item, such as 'Settings', and back to 'Administrator'. I want the sub-menu item to show after clicking on 'Administrator' to expand the sidebar.

[Gayathri KarunaiAnandam]

Hi Kenny, 

 

We have checked your reported query. We have added another submenu item to the menu bar. When the sidebar closes the submenu[“user”] is hidden. When the sidebar is opened the submenu is visible. 

 

Please check the below code snippet and video demonstration. 

 

<SfMenu TValue="MenuItem" Orientation="@VerOrientation" CssClass="container"> 

                                                     <MenuEvents TValue="MenuItem" ItemSelected="@onMenuSelect" OnOpen="@OnOpen"></MenuEvents> 

                                <MenuItems> 

                                    <MenuItem Text="Administrator" IconCss="fad fa-user-unlock"> 

                                        <MenuItems> 

                                            <MenuItem Text="User" Hidden="!sidebarOpen" Disabled="!sidebarOpen"></MenuItem> 

                                        </MenuItems> 

                                    </MenuItem> 

                                    <MenuItem Text="Settings" IconCss="fad fa-user-unlock"> 

                                        <MenuItems> 

                                            <MenuItem Text="Tools"></MenuItem> 

                                        </MenuItems> 

                                    </MenuItem> 

                                    <MenuItem Separator="true"></MenuItem> 

                                </MenuItems> 

                                               </SfMenu> 

 

 

@code 

{ 

private void OnOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args) 

       { 

             if (args.Items[0].Text == "User" && args.Items[0].Hidden ) 

             { 

                    args.Cancel = true; 

             } 

             else 

             { 

                    args.Cancel = false; 

             } 

       } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163045/ze/Menu_css-329003735 

 

Video: https://www.syncfusion.com/downloads/support/forum/163045/ze/Menu_hidden-2128577200 

 

Please check the above links and get back to us, if you need further assistance. 

 

Regards, 

Gayathri K