Correct way to update MenuItem icon

[Peter]

I have a Sidebar which includes menu items which is defined like this:

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" Type=SidebarType.Push @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="onMenuSelect"></MenuEvents></SfMenu>
                    </div>
                </div>
            </ChildContent>
        </SfSidebar>

Included in @MainMenuItems is a MenuItem defined like this:

new MenuItem {
            Id="Line",
            Text = "Dial",
            IconCss = "oi-grid-three-up",
            Items = new List<MenuItem> {
                new MenuItem{ Text = "Dial pad ..." },
                new MenuItem{ Separator=true},
                new MenuItem{ Text = "Provisioning" },
                new MenuItem{ Text = "Accounts" },
                new MenuItem{ Text = "Network Services" },
                new MenuItem{ Text = "IT Help Desk" },
                new MenuItem{ Text = "Customer Subscriptions Team" }
            }
        },

In response to user actions within my project I need to update the MenuItem with ID = "Line" and change its IconCss property from "oi-grid-three-up" to "oi_bell".

To do that in the code for the Index.razor page which hosts the Sidebar I do this:

MenuItem lineButton = MainMenuItems.Find(item => item.Id == "Line");

lineButton.IconCss = "oi-bell";

this.MainMenu.SetItem(lineButton);

However, the icon is not updated and there is a "Component parameter 'IconCss' should not be set outside of its component" compiler warning against the lineButton.IconCss = "oi-bell" statement.

Obviously I'm doing something wrong  What's the correct way to update the MenuItem.IconCss property?

[Mohan Kumar Ramasamy]

Hi Peter, 

 

We have checked your reported query, currently we have not updated the particular menu item property in menu component. So, we have dynamically updated the collection of menu items.  For your reference, we have prepared a sample based on this, please refer the below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/156947/ze/156947-BlazorApp1991796204  

 

We have update the particular menu item property in menu component using tag directive. But Currently tag directive support not available. 

 

Query: The warning is: "Component parameter 'IconCss' should not be set outside of its component"  

 

We need to provide tag directive support, and logged this as an improvement. We will provide this in our upcoming main release. 

 

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

 

Regards, 

Mohankumar R 

[Peter]

Mohan

Thanks for your prompt reply.

In my project the MenuItem icon's must be able to be updated dynamically in response to user and system actions.  The icon is used to convey state to the user of the application.

Using the code you provided I've expanded it to simulate what I'm trying to do and the updated project is attached.

In my example, I want to update the MenuItem with the Id = "Line" and in response to the button click change the MenuItem.IconCss property from "em-icons e-open" to "em-icons e-save".  Using the technique you've suggested I remove the Item from the collection, add it and add it back using the following:

   private void UpdateLineItem()
    {
        int index = MainMenuItems.FindIndex(r => r.Id.Equals("Line"));
        MenuItem lineButton = MainMenuItems.Find(item => item.Id == "Line");

        // Update the icon of the Line button
        lineButton.IconCss = "em-icons e-save";

        //Remove the existing button from the collection
        MainMenuItems.RemoveAt(index);

        // Add the updated button into the collection in the correct place.
        MainMenuItems.Insert(index, lineButton);

        MainMenu.Refresh();
    }

However, the above code doesn't work and the Line MenuItem icon stays stubbornly unchanged.

Can you tell me how I can accomplish what I'm trying to achieve please and perhaps update the attached example.  Thanks

Peter,

Attachment: 156947BlazorApp1991796204_6e2245db.zip

[Mohan Kumar Ramasamy]

Hi Peter, 

 

We would like to let you know that, we will achieve your requirement in the sample level. For this, we need some source level changes and it will be available in our Volume 3 2020 release which is estimated to be available in September 2020. 

 

Regards, 

Mohankumar R 

[Peter]

Mohan

That's good to know and we appreciate SyncFusion responding in this way to our requirement.  I'll watch for the Volume 3, 2020 release but would be grateful if you would update this post when you know it's imminent perhaps with an example of how the new functionality to update the MenuItem.IconCss property can be dynamically updated.  Thanks again.

Peter,

[Mohan Kumar Ramasamy]

Hi Peter, 

 

We will provide the sample details for “Dynamically update the MenuItem.IconCss property ”, once our Volume 3 2020 release is rolled out. Until then we appreciate your patience. 

 

You can track the status in the below feedback link.  

 

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

 

Regards,
Mohankumar R