RadzenTabs: Connect selected tab with a query parameter in an efficient way #1468

Closed
opened 2026-01-29 17:54:02 +00:00 by claunia · 4 comments
Owner

Originally created by @MPapst on GitHub (Nov 10, 2024).

Is your feature request related to a problem? Please describe.
Hey,

I am looking for a way on how I can efficiently connect multiple RadzenTabs (over various pages in the application, maybe multiple on one page) to a Query Parameter of the URI.
With the current RadzenTabs implementation I would need to add a dictionary from Index to a descriptive name for every single tabs-component I am using.
As some of my tabs are dynamically generated based on database content, this shifts the indexes and a static dictionary would not be enough.

Describe the solution you'd like
I definitely would not like to have the component library manipulating my uri fragments or queries. But implementing a UniqueId (as in RadzenDataGridColumn) or a Tag Property that can work side by side with the SelectedIndex property and also provides a changed EventCallback<string> when it changes would be helpful.

Describe alternatives you've considered
See above, the dictionary would be an alternative.. also wrapping the RadzenTabs and RadzenTabsItem component could work, but leads to a LOT of complexity on implementor side.

Additional context
Please let me know your thoughts - if you agree with my proposal, I would be happy to supply a pull request.

Originally created by @MPapst on GitHub (Nov 10, 2024). **Is your feature request related to a problem? Please describe.** Hey, I am looking for a way on how I can efficiently connect multiple RadzenTabs (over various pages in the application, maybe multiple on one page) to a Query Parameter of the URI. With the current RadzenTabs implementation I would need to add a dictionary from Index to a descriptive name for every single tabs-component I am using. As some of my tabs are dynamically generated based on database content, this shifts the indexes and a static dictionary would not be enough. **Describe the solution you'd like** I definitely would not like to have the component library manipulating my uri fragments or queries. But implementing a UniqueId (as in RadzenDataGridColumn) or a Tag Property that can work side by side with the `SelectedIndex` property and also provides a changed `EventCallback<string>` when it changes would be helpful. **Describe alternatives you've considered** See above, the dictionary would be an alternative.. also wrapping the RadzenTabs and RadzenTabsItem component could work, but leads to a LOT of complexity on implementor side. **Additional context** Please let me know your thoughts - if you agree with my proposal, I would be happy to supply a pull request.
Author
Owner

@akorchev commented on GitHub (Nov 11, 2024):

We are doing something similar here: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Pages/GetStarted.razor

Would this help for your scenario?

@akorchev commented on GitHub (Nov 11, 2024): We are doing something similar here: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Pages/GetStarted.razor Would this help for your scenario?
Author
Owner

@MPapst commented on GitHub (Nov 11, 2024):

Yeah thats exactly the dictionary (your array is used as a dictionary, with the key=index of items) approach I would like to avoid because, as it brings up: You need to define external code for every Tabs Control that creates the same logic as already implemented in the Tabs Control.

I would propose an api like this one:

<RadzenTabs SelectedTagChanged="@(tag => Console.WriteLine($"Tab changed to Tag: {tag}"))">
  <Tabs>
    <RadzenTabsItem Tag="net8.0" Text="NET 8.0">
      ... net 8.0 content ....
    </RadzenTabsItem>
    <RadzenTabsItem Tag="net9.0" Text="NET 9.0">
      ... net 9.0 content ....
    </RadzenTabsItem>
  </Tabs>
</RadzenTabs>

With optional public setter on the RadzenTabs.SelectedTag property that works like the RadzenTabs.SelectedIndex property.

@MPapst commented on GitHub (Nov 11, 2024): Yeah thats exactly the dictionary (your array is used as a dictionary, with the key=index of items) approach I would like to avoid because, as it brings up: You need to define external code for every Tabs Control that creates the same logic as already implemented in the Tabs Control. I would propose an api like this one: ```csharp <RadzenTabs SelectedTagChanged="@(tag => Console.WriteLine($"Tab changed to Tag: {tag}"))"> <Tabs> <RadzenTabsItem Tag="net8.0" Text="NET 8.0"> ... net 8.0 content .... </RadzenTabsItem> <RadzenTabsItem Tag="net9.0" Text="NET 9.0"> ... net 9.0 content .... </RadzenTabsItem> </Tabs> </RadzenTabs> ``` With optional public setter on the `RadzenTabs.SelectedTag` property that works like the `RadzenTabs.SelectedIndex` property.
Author
Owner

@akorchev commented on GitHub (Nov 14, 2024):

I don't think we should implement such capability at the moment. Here is why:

  1. There already is a SelectedIndexChanged event. Adding SelectedTagChanged introduces ambiguity. What is the difference between those two events?
  2. What happens with SelectedTagChanged if the Tag attribute is not set?
  3. If we implement it for RadzenTabs we should implement it for every other similar component as well (RadzenAccordion, RadzenPanelMenu, RadzenSteps etc).

I would suggest to wrap RadzenTabs (or inherit from it) and extend it with the required capabilities in order to avoid code duplication.

@akorchev commented on GitHub (Nov 14, 2024): I don't think we should implement such capability at the moment. Here is why: 1. There already is a SelectedIndexChanged event. Adding SelectedTagChanged introduces ambiguity. What is the difference between those two events? 2. What happens with SelectedTagChanged if the Tag attribute is not set? 3. If we implement it for RadzenTabs we should implement it for every other similar component as well (RadzenAccordion, RadzenPanelMenu, RadzenSteps etc). I would suggest to wrap RadzenTabs (or inherit from it) and extend it with the required capabilities in order to avoid code duplication.
Author
Owner

@MPapst commented on GitHub (Nov 14, 2024):

Thanks, I totally understand that opinion.

Good thing I opened an issue before an PR :)

@MPapst commented on GitHub (Nov 14, 2024): Thanks, I totally understand that opinion. Good thing I opened an issue before an PR :)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1468