1. Home
  2. Forum
  3. Blazor
  4. [Blazor] [MenuBar] How to disable menuItem for a made on the fly menu.

[Blazor] [MenuBar] How to disable menuItem for a made on the fly menu.

Hi All,

my first post on forums, please, be friendly.

Is there a way to disable options in a SfMenu ?


@using Syncfusion.Blazor.Navigations

<SfMenu Items="@MenuItems" CssClass="e-rounded-menu"></SfMenu>

@code {
    public List<MenuItem> MenuItems = new List<MenuItem>{
        new MenuItem { Text = "File", Items = new List<MenuItem>{
            new MenuItem{ Text = "Open" },
            new MenuItem{ Text = "Import", Url= "/go/import",  /* IsDisabled="true" */ },  //<--- something like this
            new MenuItem{ Text = "Exit" } } },        
 };
}

Best regards,
dani

3 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team July 10, 2020 11:54 AM UTC

Hi Dani 
 
We have checked your reported query. We can disable the sub menu item using EnableItems method in OnOpen event. Please find the below code snippet for reference.  


<SfMenu Items="@MenuItems" @ref="MenuObj"> 
    <MenuEvents OnOpen="@BeforeOpen"></MenuEvents> 
</SfMenu> 

@code { 
    SfMenu MenuObj; 
    public List<MenuItem> MenuItems = new List<MenuItem>{ 
        new MenuItem{ Text = "Events", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Conferences" }, 
            new MenuItem{ Text= "Music" }, 
            new MenuItem{ Text= "Workshops" }} 
    }, 
        new MenuItem{ Text = "Movies", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Now Showing" }, 
            new MenuItem{ Text= "Coming Soon" } } 
    }, 
        new MenuItem{ Text = "Directory", Items = new List<MenuItem>{ 
            new MenuItem{ Text = "Newsletter" }, 
            new MenuItem{ Text = "Media Gallery" } } 
    }, 
        new MenuItem{ Text = "Queries", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Our Policy" }, 
            new MenuItem{ Text= "Site Map" }} 
    }, 
        new MenuItem{ Text = "Services" } 
    }; 

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


    private void BeforeOpen(BeforeOpenCloseMenuEventArgs<MenuItemModel> args) 
    { 
        this.MenuObj.EnableItems(Items, false); 
    } 
} 

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


Marked as answer
DH dani herrera July 22, 2020 09:48 AM UTC

Hi Mohan,

thanks about your fast reply in this issue. Your sample runs fine. But in my scenario, where menu is made dinamically, doesn't work for non root level menu items. A bit of help here, please :)


@page "/"
@using Syncfusion.Blazor.Navigations
<button @onclick="toggle">Toggle menu</button>
Status @status_display
<SfMenu Items="@MenuItems" @ref="MenuObj"> 
    <MenuEvents OnOpen="@BeforeOpen"></MenuEvents> 
</SfMenu> 

@code { 
    SfMenu MenuObj; 
    public List<MenuItem> MenuItems ;
    private List<MenuItem> _MenuItems => new List<MenuItem>{ 
        new MenuItem{ Text = "Events", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Conferences" }, 
            new MenuItem{ Text= "Music"     }, 
            new MenuItem{ Text= "Workshops"    }} 
    }, 
        new MenuItem{ Text = "Movies", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Now Showing" }, 
            new MenuItem{ Text= "Coming Soon" } } 
    }, 
        new MenuItem{ Text = "Directory", Items = new List<MenuItem>{ 
            new MenuItem{ Text = "Newsletter" }, 
            new MenuItem{ Text = "Media Gallery" } } 
    }, 
        new MenuItem{ Text = "Queries", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Our Policy" }, 
            new MenuItem{ Text= "Site Map" }} 
    }, 
        new MenuItem{ Text = "Services" } 
    }; 

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

    private void BeforeOpen(BeforeOpenCloseMenuEventArgs<MenuItemModel> args) 
    {
        // this.MenuObj.EnableItems(Items, IsEnabled); //Only works for non root level items.
    } 

    private string status_display => IsEnabled ? "Enabled" : "Disabled";
    private bool IsEnabled = true;    

    private async Task toggle()
    {
        IsEnabled = !IsEnabled;
        MenuItems = _MenuItems;
        this.MenuObj.EnableItems(Items, IsEnabled); // this has no effect.
    }

}


MK Mohan Kumar Ramasamy Syncfusion Team July 24, 2020 06:54 AM UTC

Hi Dani, 
 
We have checked your reported query, we have achieved your requirement using OnItemRender event. Please refer the below code snippets. 
 
@page "/" 
@using Syncfusion.Blazor.Navigations 
 
<button @onclick="toggle">Toggle menu</button> 
Status @status_display 
<SfMenu Items="@MenuItems" @ref="MenuObj"> 
    <MenuEvents OnItemRender="@MenuItemRender"></MenuEvents> 
</SfMenu> 
 
@code { 
    SfMenu MenuObj; 
    public List<MenuItem> MenuItems; 
    private List<MenuItem> _MenuItems => new List<MenuItem>{ 
        new MenuItem{ Text = "Events", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Conferences" }, 
            new MenuItem{ Text= "Music"     }, 
            new MenuItem{ Text= "Workshops"    }} 
    }, 
        new MenuItem{ Text = "Movies", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Now Showing" }, 
            new MenuItem{ Text= "Coming Soon" } } 
    }, 
        new MenuItem{ Text = "Directory", Items = new List<MenuItem>{ 
            new MenuItem{ Text = "Newsletter" }, 
            new MenuItem{ Text = "Media Gallery" } } 
    }, 
        new MenuItem{ Text = "Queries", Items = new List<MenuItem>{ 
            new MenuItem{ Text= "Our Policy" }, 
            new MenuItem{ Text= "Site Map" }} 
    }, 
        new MenuItem{ Text = "Services" } 
    }; 
 
    public string[] Items = new string[] { "Events", "Workshops", "Music", "Queries" }; 
 
    private void MenuItemRender(MenuEventArgs<MenuItemModel> args) 
    { 
        this.MenuObj.EnableItems(Items, IsEnabled); 
    } 
 
    private string status_display => IsEnabled ? "Enabled" : "Disabled"; 
    private bool IsEnabled = true; 
 
    private void toggle() 
    { 
        IsEnabled = !IsEnabled; 
        MenuItems = _MenuItems; 
    } 
 
} 
 
 
Please let us know, if you need any further assistance, 
 
Regards, 
Mohankumar R 
 


Loader.
Up arrow icon