Dropdown Menu (or alternative)

[Simon Fitzgerald]

Hi,

I am trying to do something that seems most similar to using SfDropDownButton but with functionality which is sort of a combination of functionality available within SfMenu, SfDropDownButton, SfContextMenu and SfTooltip.

What I would like is to be able to do these 3 things in one go:-

1. Have a "menu" appear when clicking on an item (much like SfDropDownButton) with IconCss and Text and aligning neatly

2. I would like to configure it to use an image or something else instead of a button to open the menu (similar to how SfTooltip works with OpensOn="Click")

3. Be possible to have items in the Menu disabled (like SfContextMenu)

Is there any guidance on a way that I could do this please?

Thanks,

Simon

[Mohan Kumar Ramasamy]

 Hi Simon, 

 

We have checked your reported query, we can achieve your requirement using ContextMenu component. For your reference we have prepared a sample based on this, please refer below link. 

 

Link:  https://www.syncfusion.com/downloads/support/forum/157276/ze/F157276-BlazorApp1-549472947  

 

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

 

Regards, 

Mohankumar R 

[Simon Fitzgerald]

Thanks for this. It has been very helpful and covered most of what I wanted. 

The one thing that is missing and I had struggled with (for point 1) is neatly aligning a SfContextMenu. The SfDropDownButton component aligns the edges of menu to the edges of the button but I can't see how to do this for SFContextMenu.

[Mohan Kumar Ramasamy]

Hi Simon, 

 

Thanks for your update. 

 

We can achieve your requirement by positioning the ContextMenu popup. Please refer the below code snippets. 

 

@using Syncfusion.Blazor.Navigations 

@inject IJSRuntime JSRuntime; 

 

    <div> 

        <div id="one" class="menu" style="color: red" @onclick="@(()=> ShowMenu("one"))"> Red </div> 

        <div id="two" class="menu" style="color: green" @onclick="@(()=> ShowMenu("two"))"> Green </div> 

        <div id="three" class="menu" style="color: blue" @onclick="@(()=> ShowMenu("three"))"> Blue </div> 

        <div id="four" class="menu" style="color: deeppink" @onclick="@(()=> ShowMenu("four"))"> Deeppink </div> 

    </div> 

 

    <SfContextMenu @ref=@menu Items=@ContextMenuItems> 

        <ContextMenuEvents TValue="ContextItem" Opened="BeforeMenuOpened" /> 

    </SfContextMenu> 

 

 

@code { 

    protected SfContextMenu<ContextItem> menu; 

    protected List<ContextItem> ContextMenuItems = new List<ContextItem> 

        { 

            new ContextItem { Text = "Toggle Disabled", IconCss="e-icons bullet-tick" } , 

            new ContextItem { Text = "Click To Add Item", IconCss="e-icons bullet-arrow" } 

        }; 

 

    protected async Task ShowMenu(string id) 

    { 

        Position ButtonPos = await JSRuntime.InvokeAsync<Position>("getPosition", id); 

        menu.Open(ButtonPos.Left, ButtonPos.Top); 

    } 

} 

 

_host.cshtml 

 

<script> 

        function getPosition(id) { 

            var element = document.getElementById(id); 

            return { Left: element.offsetLeft, Top: element.offsetTop + 20  }; 

        } 

    </script> 

 

For your reference, we have prepared a sample based on this, please refer below sample link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/157276/ze/157276-Menu1456151155  

 

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

 

Regards, 

Mohankumar R