Error in Menu Event Type

[Tyrone]

Hello team. 

I'm kinda having this error.

[2022-07-20T17:20:37.531Z] Error: System.InvalidCastException: Unable to cast object of type 'Syncfusion.Blazor.Navigations.MenuEvents`1[Syncfusion.Blazor.Navigations.MenuItem]' to type 'Syncfusion.Blazor.Navigations.MenuEvents`1[InventoryManagement.Web.Shared.NavMenu+MenuEdit]'.

with this code

 <SfMenu CssClass="dock-menu menu-icon" Items="@ToolbarItems" Orientation="@Orientation">

                             <MenuEvents ItemSelected="onSelect" TValue="MenuItem"></MenuEvents>

                             <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId" Url="Url" IconCss="IconCss"></MenuFieldSettings>

</SfMenu>

and here is the data type that I used for my data source.

public class MenuEdit

    {

        public string Id { get; set; }

        public string Text { get; set; }

        public string ParentId { get; set; }

        public string Url { get; set; }

        public string IconCss { get; set; }

    }

Here is the datasource. It came from service and API.

  Toolbar = (await UserMenuService.FillListViewUserMenu(UserID)).Where(e => e.IsToolbar == true)

                                 .OrderBy(e => e.ToolbarSortOrder)

                                 .ToList();

        if (Toolbar != null)

        {

            ToolbarItems = Toolbar.Select(e => new MenuEdit

            {

                Id = e.MenuID.ToString(),

                ParentId = e.ToolbarParentMenuID.ToString(),

                Text = e.Acro,

                Url = e.PageName,

                IconCss = e.IconName

            }).ToList();

        }

did I missed something? It seems MenuEdit type does not match the properties of MenuItem type... But it matched the ​ MenuFieldSettings which I used to renderng url.. I'm somehow need the event from one of item to show a modal component.  

Hope you may help me

Best Regards,

Tyrone

[YuvanShankar Arunagiri]

Hi Tyrone,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet and set the TValue for menu event as MenuItemModel.

@using Syncfusion.Blazor.Navigations

 

<SfMenu Items="@MenuItems">

    <MenuEvents TValue="MenuItemModel" ItemSelected="onSelect"></MenuEvents>

    <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId"></MenuFieldSettings>

</SfMenu>

 

@code {

 

    public List<CustomMenuItem> MenuItems = new List<CustomMenuItem>

{

        new CustomMenuItem{ Id = "parent1", Text = "Events" },

        new CustomMenuItem{ Id = "parent2", Text = "Movies" },

        new CustomMenuItem{ Id = "parent3", Text = "Directory" },

        new CustomMenuItem{ Id = "parent4", Text = "Queries", ParentId = "null"  },

        new CustomMenuItem{ Id = "parent5", Text = "Services", ParentId = "null" },

        new CustomMenuItem{ Id = "parent6", Text = "Conferences", ParentId = "parent1" },

        new CustomMenuItem{ Id = "parent7", Text = "Music", ParentId = "parent1" },

        new CustomMenuItem{ Id = "parent8", Text = "Workshops", ParentId = "parent1" },

 

        new CustomMenuItem{ Id = "parent9", Text = "Now Showing", ParentId = "parent2" },

        new CustomMenuItem{ Id = "parent10", Text = "Coming Soon", ParentId = "parent2" },

 

        new CustomMenuItem{ Id = "parent10", Text = "Media Gallery", ParentId = "parent3" },

        new CustomMenuItem{ Id = "parent11", Text = "Newsletters", ParentId = "parent3" },

 

        new CustomMenuItem{ Id = "parent12", Text = "Our Policy", ParentId = "parent4" },

        new CustomMenuItem{ Id = "parent13", Text = "Site Map", ParentId = "parent4" },

        new CustomMenuItem{ Id = "parent14", Text = "Pop", ParentId = "parent7" },

        new CustomMenuItem{ Id = "parent15", Text = "Folk", ParentId = "parent7" },

        new CustomMenuItem{ Id = "parent16", Text = "Classical", ParentId = "parent7" }

 

        };

 

    public class CustomMenuItem

    {

        public string Id { get; set; }

        public string Text { get; set; }

        public string ParentId { get; set; }

        public string Url { get; set; }

        public string IconCss { get; set; }

    }

 

    private void onSelect(MenuEventArgs<MenuItemModel> args)

    {

        var d = args;

    }

}

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Tyrone]

Thanks  YuvanShankar. It worked like magic. thanks alot. 

[YuvanShankar Arunagiri]

Hi Tyrone,

You are welcome, Tyrone. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.

Regards,

YuvanShankar A