1. Home
  2. Forum
  3. Blazor
  4. Error while selecting custom menu item

Error while selecting custom menu item

Hi everyone at Syncfusion,

I'm trying to create a button on a toolbar with an associated (custom) menu.

When clicking on the toolbar button, the menu is not shown and gives an error.

Here's the part of the code I'm using:


           
               
           
           
               
           
       
   

@code{
    SfMenu MenuObj;

    public List CustomMenuItems = new List
    {
            new CustomMenuItem{ Id = "optFiltro", Text = "Filtrar" },
            new CustomMenuItem{ Id = "optPendentes", Text = "Pendentes", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optPendentesHoje", Text = "Para hoje", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesFuturo", Text = "No futuro", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesPassado", Text = "No passado", ParentId = "optPendentes", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optPendentes", Separator= true },
            new CustomMenuItem{ Id = "optPendentesTodas", Text = "Todas", ParentId = "optPendentes", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optRealizadas", Text = "Realizadas",  ParentId = "optFiltro" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasHoje", Text = "Hoje", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasPassado", Text = "No passado", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasFuturo", Text = "No Futuro", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optRealizadas", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasTodas", Text = "Todas", ParentId = "optRealizadas", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optTodasTarefasHoje", Text = "Todas as tarefas para hoje ou com alerta", ParentId = "optFiltro", IconCss="e-icons e-tasks-info"},
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasSemanaCorrente", Text = "Todas as tarefas para esta semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasProximaSemana", Text = "Todas as tarefas para a próxima semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasAResolver", Text = "Tarefas a Resolver", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optClassificacao", Text = "Classificacao", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optMuitoImportantes", Text = "Muito Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optImportantes", Text = "Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optNormal", Text = "Normal", ParentId = "optClassificacao" },
            new CustomMenuItem{ Id = "optSemClassificação", Text = "Sem classificacao", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTodasTarefas", Text = "Todas as tarefas", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" }
    };
public class CustomMenuItem
{
public string Id { get; set; }
public string Text { get; set; }
public string ParentId { get; set; }
public bool Separator { get; set; }
public string IconCss { get; set; }
}
private void SelectHandler(MenuEventArgs args)
{
var itemIndex = MenuObj.GetItemIndex(args.Item);
var item = CustomMenuItems.GetRange(itemIndex[0], 1);
}
}


>>> Error Message <<<
System.InvalidCastException: Unable to cast object of type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[ClinicaSoft.Web.Pages.Doctors.DoctorsPanel.TasksAndEvents+CustomMenuItem]]' to type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[Syncfusion.Blazor.Navigations.MenuItemModel]]'.

-------------

How to select / process a menu option?

Perhaps I will not be defining the menu well (...)

Can you help?

Thanks in advance.
Fausto

9 Replies 1 reply marked as answer
FA Fausto replied to Fausto Luis December 29, 2020 01:51 AM UTC

Hi everyone at Syncfusion,

I'm trying to create a button on a toolbar with an associated (custom) menu.

When clicking on the toolbar button, the menu is not shown and gives an error.

Here's the part of the code I'm using:


           
               
           
           
               
           
       
   

@code{
    SfMenu MenuObj;

    public List CustomMenuItems = new List
    {
            new CustomMenuItem{ Id = "optFiltro", Text = "Filtrar" },
            new CustomMenuItem{ Id = "optPendentes", Text = "Pendentes", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optPendentesHoje", Text = "Para hoje", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesFuturo", Text = "No futuro", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesPassado", Text = "No passado", ParentId = "optPendentes", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optPendentes", Separator= true },
            new CustomMenuItem{ Id = "optPendentesTodas", Text = "Todas", ParentId = "optPendentes", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optRealizadas", Text = "Realizadas",  ParentId = "optFiltro" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasHoje", Text = "Hoje", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasPassado", Text = "No passado", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasFuturo", Text = "No Futuro", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optRealizadas", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasTodas", Text = "Todas", ParentId = "optRealizadas", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optTodasTarefasHoje", Text = "Todas as tarefas para hoje ou com alerta", ParentId = "optFiltro", IconCss="e-icons e-tasks-info"},
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasSemanaCorrente", Text = "Todas as tarefas para esta semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasProximaSemana", Text = "Todas as tarefas para a próxima semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasAResolver", Text = "Tarefas a Resolver", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optClassificacao", Text = "Classificacao", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optMuitoImportantes", Text = "Muito Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optImportantes", Text = "Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optNormal", Text = "Normal", ParentId = "optClassificacao" },
            new CustomMenuItem{ Id = "optSemClassificação", Text = "Sem classificacao", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTodasTarefas", Text = "Todas as tarefas", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" }
    };
public class CustomMenuItem
{
public string Id { get; set; }
public string Text { get; set; }
public string ParentId { get; set; }
public bool Separator { get; set; }
public string IconCss { get; set; }
}
private void SelectHandler(MenuEventArgs args)
{
var itemIndex = MenuObj.GetItemIndex(args.Item);
var item = CustomMenuItems.GetRange(itemIndex[0], 1);
}
}


>>> Error Message <<<
System.InvalidCastException: Unable to cast object of type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[ClinicaSoft.Web.Pages.Doctors.DoctorsPanel.TasksAndEvents+CustomMenuItem]]' to type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[Syncfusion.Blazor.Navigations.MenuItemModel]]'.

-------------

How to select / process a menu option?

Perhaps I will not be defining the menu well (...)

Can you help?

Thanks in advance.
Fausto

There was a typo in the code (I was not able the edit the original message):

instead of:

private void SelectHandler(MenuEventArgsSelectHandler(MenuEventArgs args)

should be:

private void SelectHandler(MenuEventArgs<CustomMenuItem> args)

Sorry.

FA Fausto replied to Fausto Luis December 29, 2020 11:38 AM UTC

Hi everyone at Syncfusion,

I'm trying to create a button on a toolbar with an associated (custom) menu.

When clicking on the toolbar button, the menu is not shown and gives an error.

Here's the part of the code I'm using:


           
               
           
           
               
           
       
   

@code{
    SfMenu MenuObj;

    public List CustomMenuItems = new List
    {
            new CustomMenuItem{ Id = "optFiltro", Text = "Filtrar" },
            new CustomMenuItem{ Id = "optPendentes", Text = "Pendentes", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optPendentesHoje", Text = "Para hoje", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesFuturo", Text = "No futuro", ParentId = "optPendentes", IconCss="e-icons e-bullet-dot" },
            new CustomMenuItem{ Id = "optPendentesPassado", Text = "No passado", ParentId = "optPendentes", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optPendentes", Separator= true },
            new CustomMenuItem{ Id = "optPendentesTodas", Text = "Todas", ParentId = "optPendentes", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optRealizadas", Text = "Realizadas",  ParentId = "optFiltro" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasHoje", Text = "Hoje", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasPassado", Text = "No passado", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optRealizadasFuturo", Text = "No Futuro", ParentId = "optRealizadas", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optRealizadas", Separator= true },
            new CustomMenuItem{ Id = "optRealizadasTodas", Text = "Todas", ParentId = "optRealizadas", IconCss="e-icons e-bullet-ok" },
            new CustomMenuItem{ Id = "optTodasTarefasHoje", Text = "Todas as tarefas para hoje ou com alerta", ParentId = "optFiltro", IconCss="e-icons e-tasks-info"},
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasSemanaCorrente", Text = "Todas as tarefas para esta semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasProximaSemana", Text = "Todas as tarefas para a próxima semana", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTarefasAResolver", Text = "Tarefas a Resolver", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optClassificacao", Text = "Classificacao", ParentId = "optFiltro" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optMuitoImportantes", Text = "Muito Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optImportantes", Text = "Importante", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
            new CustomMenuItem{ Id = "optNormal", Text = "Normal", ParentId = "optClassificacao" },
            new CustomMenuItem{ Id = "optSemClassificação", Text = "Sem classificacao", ParentId = "optClassificacao", IconCss="e-icons e-circle" },
                    new CustomMenuItem{ ParentId="optFiltro", Separator= true },
            new CustomMenuItem{ Id = "optTodasTarefas", Text = "Todas as tarefas", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" }
    };
public class CustomMenuItem
{
public string Id { get; set; }
public string Text { get; set; }
public string ParentId { get; set; }
public bool Separator { get; set; }
public string IconCss { get; set; }
}
private void SelectHandler(MenuEventArgs args)
{
var itemIndex = MenuObj.GetItemIndex(args.Item);
var item = CustomMenuItems.GetRange(itemIndex[0], 1);
}
}


>>> Error Message <<<
System.InvalidCastException: Unable to cast object of type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[ClinicaSoft.Web.Pages.Doctors.DoctorsPanel.TasksAndEvents+CustomMenuItem]]' to type 'Microsoft.AspNetCore.Components.EventCallback`1[Syncfusion.Blazor.Navigations.BeforeOpenCloseMenuEventArgs`1[Syncfusion.Blazor.Navigations.MenuItemModel]]'.

-------------

How to select / process a menu option?

Perhaps I will not be defining the menu well (...)

Can you help?

Thanks in advance.
Fausto

Forgot to show how I use the code:

            <div class="e-menu-container">
                <SfToolbar Width="300px">
                    <ToolbarItems>
                        <ToolbarItem>
                            <ToolbarItem Type="ItemType.Button" Text="Opções"></ToolbarItem>
                        </ToolbarItem>
                        <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Right">
                            <Template>
                                <SfMenu @ref="MenuObj" Items="@CustomMenuItems" TValue="CustomMenuItem">
                                    <MenuEvents TValue="CustomMenuItem" OnOpen="@onOpenHandler" ItemSelected="@SelectHandler"></MenuEvents>
                                </SfMenu>
                            </Template>
                        </ToolbarItem>
                    </ToolbarItems>
                </SfToolbar>
            </div>


AS Aravinthan Seetharaman Syncfusion Team December 29, 2020 04:17 PM UTC

Hi Fausto, 
 
 
Thanks for contacting syncfusion support. 

We have checked your reported query, and we can able to reproduce the reported issue, and we logged this as an improvement. This improvement  
will be available on 13th January 2021 and we appreciate your patience until then. You can track the status of this improvement using below feedback link. 



Regards, 
Aravinthan S 


PH Philippe March 31, 2021 02:28 AM UTC

I have the same problem. When do you solve this major bug

AS Aravinthan Seetharaman Syncfusion Team April 1, 2021 01:42 AM UTC

 
We have checked your query. We have already included the fix for this issue. For your reference we have prepared sample with our latest version 19.1.54. Please refer below code snippet and sample. 
 
Index.razor 
@using Syncfusion.Blazor.Navigations 
<p>Selected Item: @selectedItem</p> 
<SfMenu Items="@CustomMenuItems"> 
    <MenuEvents TValue="MenuItemModel" ItemSelected="Selected"></MenuEvents> 
</SfMenu> 
 
@code { 
    public string selectedItem; 
    public List<CustomMenuItem> CustomMenuItems = new List<CustomMenuItem> 
    { 
            new CustomMenuItem{ Id = "optFiltro", Text = "Filtrar" }, 
    . . .  
            new CustomMenuItem{ Id = "optTodasTarefas", Text = "Todas as tarefas", ParentId = "optFiltro", IconCss="e-icons e-tasks-info" } 
    }; 
    public void Selected(MenuEventArgs<MenuItemModel> args) 
    { 
        selectedItem = args.Item.Text; 
    } 
 
    public class CustomMenuItem 
    { 
        public string Id { get; set; } 
        public string Text { get; set; } 
        public string ParentId { get; set; } 
        public bool Separator { get; set; } 
        public string IconCss { get; set; } 
    } 
} 
 
 
 
If you are still facing the issue, kindly share the below details. 
 
·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 
·        Please share us the video demonstration of this issue. 
·        Please share us the Syncfusion Package Version. 
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Aravinthan S

FA Fausto replied to Aravinthan Seetharaman August 5, 2021 07:12 PM UTC

By mere chance, I just happened to visit the incidents page and found the answer above... was it addressed to Philippe?


AS Aravinthan Seetharaman Syncfusion Team August 6, 2021 03:14 PM UTC

Hi Fausto, 
 
Yes, it addressed to Philippe. 
 
Regards, 
Aravinthan S 


FA Fausto August 6, 2021 05:09 PM UTC

Ok.


Since I was the one who posed the question, I wondered why I didn't get that feedback from your.


Moving on...

Fausto



AS Aravinthan Seetharaman Syncfusion Team August 9, 2021 02:36 PM UTC

 
We have checked your query. We have included the fix for your reported issue( Menu events not working for Custom Menu Item) in our 18.4.0.39 patch release, and updated the same in the feedback that is already mentioned. Please refer the below feedback. 
 
 
For more details, please refer the sample attached in the previous update and let us know if you need assistance on this. 
 
Regards, 
Aravinthan S

Marked as answer
Loader.
Up arrow icon