Is it possible to have a context menu for items of a dropdownlist?

[Ian Williamson]

I have a dropdown list and I would like a context menu that would allow me to modify items on that list.  However, when I set the id of the dropdownlist to the Target property of the context menu it does not work.  Nor does it work if I set the Target property to the dropdownlist_popup id.

Any help on how I would achieve this would be gratefully received.

[Deepak Ramakrishnan]

Hi Williamson,

Greetings from syncfusion support.

We are currently checking the possibilities for the requirement . We will update the details within one business day (May 25 2022).

Thanks,

Deepak R.

[UdhayaKumar Duraisamy]

Hi Williamson,

We have created a workaround for the requested requirement. Please refer to the below code snippet for DropDownList with the context menu.

 

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Navigations;

 

<SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">

    <DropDownListEvents TItem="GameFields" TValue="string" Opened="opened" OnClose="close" />

    <DropDownListFieldSettings Text="Text" Value="ID" />

</SfDropDownList>

 

@if (isPopupRendered)

{

    <SfContextMenu Target="@target" TValue="MenuItem">

        <MenuItems>

            <MenuItem Text="Cut"></MenuItem>

            <MenuItem Text="Copy"></MenuItem>

            <MenuItem Text="Paste"></MenuItem>

        </MenuItems>

    </SfContextMenu>

}

 

@code{

 

    private string target = ".e-list-item";

    private bool isPopupRendered = false;

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

    };

 

    public void opened(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        isPopupRendered = true;

        StateHasChanged();

    }

 

    public void close(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        args.Cancel = true;

    }

}

Regards,

Udhaya Kumar D

[Ian Williamson]

Thank you for the time taken to put this together.  I have run this and integrated it in to my solution but there are a few issues.

1. The context menu only work once, after that it needs 
2. The Dropdownlist closes when the context menu appears which is quite disjointed.
3. There is no way to reference the item that the context menu relates too.

Hope that helps.

Ian

[UdhayaKumar Duraisamy]

Hi Williamson,

Greetings from syncfusion support.

We are currently checking the possibilities for the requirement. We will update the details within two business days (May 30, 2022).

Thanks,

Udhaya Kumar D.

[UdhayaKumar Duraisamy]

Hi Williamson,

Query 1 : The context menu only work once, after that it needs

Query 3 : There is no way to reference the item that the context menu relates too.

We are validating the requirement and will update the details within two business days (1^st June 2022).

Query2 : The Dropdownlist closes when the context menu appears which is quite disjointed.

We can prevent the popup from closing by making the “args.Cancel = true” when the context menu appears. Please refer to the code snippet and sample for reference.

    public void opened(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        isPopupRendered = true;

        isPopup = true;

        StateHasChanged();

    }

 

    public void close(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        if (isPopupRendered && isPopup)

        {

            args.Cancel = true;

            isPopup = false;

        }

        else

        {

            args.Cancel = false;

        }

    }

Regards,

Udhaya Kumar D

Attachment: DDLBazor_58833fa9.zip

[Ian Williamson]

Thank you.  That works nicely.  Further investigation also solved the issue of the context menu only appearing once.   Look forward to a solution to Query 3.

Once again, thank you for your help and willingness to look into a solution for this issue.

Kind regards

Ian

[YuvanShankar Arunagiri]

Hi Lan,

Query 3: There is no way to reference the item that the context menu relates too.

We have validated your reported query and prepared sample based on your requirement.

Please refer the below code snippet. Using the OnOpen event of the context menu we will get the dropdown list item where the context menu opened. And ItemSelected event pass the selected item in the context menu.

[Index.razor]:

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Navigations;

@inject IJSRuntime JS

 

<SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">

    <DropDownListEvents TItem="GameFields" TValue="string" Opened="opened" OnClose="close" />

    <DropDownListFieldSettings Text="Text" Value="ID" />

</SfDropDownList>

 

@if (isPopupRendered)

{

    <SfContextMenu Target="@target" TValue="MenuItem">

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

        <MenuItems>

            <MenuItem Text="Cut"></MenuItem>

            <MenuItem Text="Copy"></MenuItem>

            <MenuItem Text="Paste"></MenuItem>

        </MenuItems>

    </SfContextMenu>

}

 

@code{

    private string target = ".e-list-item";

    private bool isPopupRendered = false;

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

 

    private List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10", Text= "Tennis"}

    };

 

    public void opened(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        isPopupRendered = true;

        StateHasChanged();

    }

 

    public void close(Syncfusion.Blazor.DropDowns.PopupEventArgs args)

    {

        args.Cancel = true;

    }

 

    private async Task onOpen(BeforeOpenCloseMenuEventArgs<MenuItem> args)

    {

        var lDotNetReference = DotNetObjectReference.Create(this);

        /// here you can see context menu open on which dropdownlist item

        string item = await JS.InvokeAsync<string>("getItem", lDotNetReference);

    }

 

    private void onSelect(MenuEventArgs<MenuItem> args)

    {

        /// here you can see selected item of context menu

        string selected_item = args.Item.Text;

    }

 

}

[_Host.cshtml]:

<script>

        function getItem(lDotNetReference) {

            var ele = document.getElementsByClassName("e-list-item e-hover")[0];

            var item = ele.innerText;

            return item;

        }

    </script>

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

Regards,

Yuvan Shankar A

Attachment: BlazorApp1_f52be5b6.zip

[Ian Williamson]

Thank you, that is exactly what I am looking for.

Kind regards

Ian

[YuvanShankar Arunagiri]

Hi Ian,

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