1. Home
  2. Forum
  3. Blazor
  4. CustomMenuItem and MenuEvents - Problems with EventArgs

CustomMenuItem and MenuEvents - Problems with EventArgs

Hi Forum, 

I'm try to use the sfMenu with Custom Menu Items.

This works fine until I try to use MenuEvents to get the selected item.

After adding this line

<MenuEvents ItemSelected="SelectItem" TValue="CustomMenuItem"></MenuEvents>

A runtime error:


will be thrown.

Here is a sample Code for reproducing the problem.

@using Syncfusion.Blazor.Navigations


    <li class="right-header list">
        <div class="horizontal-menu">
            <SfMenu Items="@MenuItems">
                <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId"></MenuFieldSettings>
                <MenuEvents ItemSelected="SelectItem" TValue="CustomMenuItem"></MenuEvents>
            </SfMenu>
        </div>
    </li>


@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; }
    }

    private void SelectItem(MenuEventArgs<CustomMenuItem> obj)
    {
        var x = obj.Item;
    }

}


Or is there another/better way to get the selected item.


best regards

Hans-Peter


1 Reply
GK Gayathri KarunaiAnandam Syncfusion Team September 24, 2021 11:19 AM UTC

Hi Hans-Peter, 

We have checked your reported query. We would like to let you know that when Menu component is binded with Self-referential data, we generate menu items with MenuItemModel. So, you need to provide TValue as MenuItemModel instead of CustomMenuItem as demonstrated in the below code snippet. 

Code Snippet: 

<li class="right-header list"> 
        <div class="horizontal-menu"> 
            <SfMenu Items="@MenuItems"> 
                <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId"></MenuFieldSettings> 
                <MenuEvents ItemSelected="SelectItem" TValue="MenuItemModel"></MenuEvents> 
            </SfMenu> 
        </div> 
    </li> 
 
 
@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; } 
    } 
 
    private void SelectItem(MenuEventArgs<MenuItemModel> obj) 
    { 
        var x = obj.Item; 
    } 
 
} 

For your reference, we have prepared a sample based on your requirement. Please check the below link. 


Please get back to us, if you need further assistance. 

Regards, 
Gayathri K 


Loader.
Up arrow icon