InvalidCastException using self-referential data with Created event

I'd like to use self-referential menu data along with the Created event however I get an invalid cast exception:


<!-- OK: dropdown and selection work without error-->

<div>

    <SfMenu Items="@MenuItems"

            TValue="CustomMenuItem"

            ShowItemOnClick="true">

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

        <!--<MenuEvents TValue="CustomMenuItem" Created="Created"></MenuEvents>-->

    </SfMenu>

</div>


<!-- ERROR: System.InvalidCastException -->

<div>

    <SfMenu Items="@MenuItems"

            TValue="CustomMenuItem"

            ShowItemOnClick="true">

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

        <MenuEvents TValue="CustomMenuItem" Created="Created"></MenuEvents>

    </SfMenu>

</div>


@code {


    private void Created()

    {

        // Do something...

    }


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

    }

}


2 Replies

DA Dave October 25, 2021 11:10 PM UTC

I figured it out. I need to use TValue=MenuItemModel in for any custom types (see https://www.syncfusion.com/forums/146681/ability-to-call-an-action-when-when-menitem-clicked). Though I still need to use TValue=[my custom type] as the type parameter. Is this in the documentation? If not I think it should be there. Thank you.



GK Gayathri KarunaiAnandam Syncfusion Team October 27, 2021 02:33 AM UTC

Hi Dave, 

We have checked your query. We suspect that this issue occurred due to giving custom type while using self-referential data structure. In self-referential item defining method we have used strongly typed value MenuItemModel to populate submenu items. So, we can resolve this issue by providing strongly typed value MenuItemModel as TValue in MenuEvents. Please refer the below code snippet.  

Code snippet: 

<SfMenu Items="@MenuItems"  ShowItemOnClick="true"> 
    <MenuFieldSettings ItemId="Id" Text="Text" ParentId="ParentId"></MenuFieldSettings> 
    <MenuEvents TValue="MenuItemModel" Created="Created" /> 
</SfMenu> 
@code { 
public void Created(){ 
 
    } 
} 
 

For your reference, please check the below sample link. 
 

Currently we are working on improvising our UG section. We will refresh our documentation in any of our upcoming patch release. We appreciate your patience until then. 

Regards, 
Gayathri K 



Loader.
Up arrow icon