We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Extend DropDownButton with third parameter

Context:

I'm using the SfDropDownButton in multiple places. For a place where I have a fixed amount of buttons, I can work with the Text and Id properties of the DropDownMenuItem.

I'm facing some issues when I'm having a dynamic amount of SfDropDownButtons on my page. In my use case, I am rendering a list of users. For each user, I'm displaying a SfDropDownButton with actions I can perform for the user (like banning the user). When clicking the button, I'm executing a method that affects the respective user.

The DropDownMenuItem has a Text property to set a display value. That is the user-friendly string that is rendering in the frontend. The only other available property to store data is the Id property which I'm using to store the user id that I can use the ItemSelected event and MenuEventArgs to retrieve for which user the button is displayed.

In the tutorial https://blazor.syncfusion.com/documentation/drop-down-menu/how-to/open-a-dialog-on-popup-item-click you can see in the select method that args.Item.Text is used to determine the action.

In my case, I can't use the Id property because it stores the user id. I need to use the Text property to determine which action was clicked. However, that's not really practicle when using more than one display language. Besides, comparision with display strings is never a good idea.

What do I need: I need to store data in an additional property like "ActionName" in DropDownMenuItem an dMenuEventArgs which I can set to "BanUser" so that I determine the appropriate method call inside the ItemSelect event.

What have I tried: I tried for a couple of hours to derive from SfDropDownButton but ended up with a component that did only render as a blank component.

How can you help me:

  1. Is it possible to extend DropDownMenuItem by another Property "ActionName" and also extend MenuEventArgs in a future relase of Syncfusion? I think such an addition will be quick to implement.
  2. If the first option is not possible, would you be able to help me how to figure out how I can extend your components, or in this case, how I can inherit from SfDropDownButton and make it work with extendend DropDownMenuItem and MenuEventArgs?
Thanks!

3 Replies 1 reply marked as answer

YA YuvanShankar Arunagiri Syncfusion Team March 20, 2023 10:31 AM UTC

Hi Matthias,


We have checked your reported query and using the HtmlAtrributes property of DropDownMenuItem, we can add the additional parameter to menu items and get the parameters in ItemSelected event shown as below.

<SfDropDownButton Content="Profile">

    <DropDownButtonEvents ItemSelected="ItemSelected">

    </DropDownButtonEvents>

    <DropDownMenuItems>

        <DropDownMenuItem Text="Dashboard" Id="Dashboard" HtmlAttributes="@Attr1"></DropDownMenuItem>

        <DropDownMenuItem Text="Notifications" Id="Notifications" HtmlAttributes="@Attr2"></DropDownMenuItem>

        ……..

    </DropDownMenuItems>

</SfDropDownButton>

…..

private void ItemSelected(MenuEventArgs args)

    {

        var ActionName = args.Item.HtmlAttributes;

    }


Check with attached sample code file and get back to us if you need any further assistance on this. 


Regards,

YuvanShankar A


Attachment: Index_b1ce281b.zip

Marked as answer

DM Dr. Matthias April 8, 2023 10:27 AM UTC

Thank you. That workaround is acceptable



YA YuvanShankar Arunagiri Syncfusion Team April 10, 2023 04:04 AM UTC

You are welcome, Matthias. Please get back to us if you need any further assistance on this.


If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.


Loader.
Live Chat Icon For mobile
Up arrow icon