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:
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
Thank you. That workaround is acceptable
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.