I have a SideBar that contains a number of MenuItems declared as follows:
<!-- sidebar element declaration -->
<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar">
<ChildContent>
<div class="main-menu">
<p class="main-menu-header">ICE-T</p>
<div>
<SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation" @ref="MainMenu" ><MenuEvents ItemSelected="MenuSelect"></MenuEvents></SfMenu>
</div>
</div>
</ChildContent>
</SfSidebar>
One of the MenuItems within the collection of MainMenuItems is declared like this:
public List<MenuItem> MainMenuItems = new List<MenuItem>{
new MenuItem {
Id="VoiceState",
Text = "Not Ready",
IconCss = "oi-moon"
},
};
When this VoiceState MenuItem is clicked I want to change its icon from "oi-moon" to "oi-star" so I've declared an event handler for the ItemSelected event and added the following:
public void MenuSelect(Syncfusion.Blazor.Navigations.MenuEventArgs args)
{
switch (args.Item.Id.ToUpper())
{
case "VOICESTATE":
//args.Item.IconCss = "oi-cog";
this.MainMenuItems[1].IconCss = "oi-star";
this.MainMenu.Refresh();
break;
default:
break;
}
}
My MenuSelect event handler is entered but I can't figure out how to dynamically change the MenuItem's Icon so it toggles between "oi-moon" and "oi-star" as the MenuItem is clicked. In the above VOICESTATE Case statement you can see what I've experimented with but nothing seems to work. Can you tell me how to toggle a MenuItem's Icon at runtime please. Thanks.
Peter,