Update MenuItem Icon

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,


3 Replies

SD Saranya Dhayalan Syncfusion Team April 20, 2020 07:20 AM UTC

Hi Peter, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported issue and we would like to let you know that it is a known issue and we have already fixed it, and it will be available in our upcoming patch release which has been scheduled to be rolled out in the April 21, 2020. Until then we appreciate your patience. 
 
Regards, 
Saranya D 



PE Peter April 21, 2020 03:20 AM UTC

Saranya

Is the fix for this issue in SyncFusion.Blazor 18.1.0.45?  I've downloaded and installed that package and can see no change.

In case I'm doing something wrong, with reference to the code in my original request, what's the correct way to update a MenuItem's Icon:

     args.Item.IconCss = "oi-cog";

or

     this.MainMenuItems[1].IconCss = "oi-star";

Thanks

Peter,


SD Saranya Dhayalan Syncfusion Team April 21, 2020 07:16 AM UTC

Hi Peter 
  
We are deeply regret for the inconvenience caused.  
 
We have fixed the reported issue in our end, but we need to ensure more cases. So, this fix will be available in our upcoming patch release. We appreciate your patience until then 
  
Regards,  
Saranya D 


Loader.
Up arrow icon