For example, can't select radio buttons - the list just folds and unfolds. It looks like RadzenDropDown intercepts click events. I want to click radio buttons inside chips and inside dropping list. Here is your simplified example from one of the RadzenDropDown demos, but with a template - only radio buttons are important here:
Third example - with nested drop downs. They work fine - no unneeded foldings and unfoldings of the outer drop down list when I click on inner drop downs inside chips. There are also no unneeded checks and unckecks of elements when I choose a value of an inner drop down inside dropping list of the outer drop down.
Disadvantage - the inner drop downs are too large. And I want to use arrows instead of strings to designate sortings - to avoid localization.
<RadzenDropDown
@bind-Value=@selectedValues
Data=@source
Multiple=true
AllowClear=true
Chips=true
Placeholder="Select">
<Template>
@{
var my = context as My;
}
<span>@my.Name</span>
<RadzenDropDown
@bind-Value=@my.Sorting
Data=@(Enum.GetValues<SortOrder>().Cast<Enum>())
Placeholder="Select"/>
</Template>
</RadzenDropDown>
@code {
IEnumerable<My> selectedValues;
IEnumerable<My> source = new My[] {
new My() { Name = "First" }, new My() { Name = "Second" } };
public enum SortOrder { Ascending, Descending, };
public class My
{
public string Name { get; set; }
public SortOrder? Sorting { get; set; }
}
}
Thank you! With your link now it works just like I want - I mean the variant with Radzen radio buttons.
<RadzenDropDown
@bind-Value=@selectedValues
Data=@source
Multiple=true
AllowClear=true
AllowSelectAll=false
Chips=true
Placeholder="Select"
MaxSelectedLabels="@source.Count() + 1">
<Template>
@{
var my = context as My;
}
<span>@my.Name</span>
<RadzenRadioButtonList
@bind-Value=@my.Sorting
TValue="SortOrder?"
@onclick:stopPropagation="true"
Style="display:inline-flex">
<Items>
<RadzenRadioButtonListItem
Text="↑"
Value="SortOrder.Ascending"
TValue="SortOrder?" />
<RadzenRadioButtonListItem
Text="↓"
Value="SortOrder.Descending"
TValue="SortOrder?" />
</Items>
</RadzenRadioButtonList>
</Template>
</RadzenDropDown>
@code {
IEnumerable<My> selectedValues;
IEnumerable<My> source = new My[] {
new My() { Name = "First" }, new My() { Name = "Second" } };
public enum SortOrder { Ascending, Descending, };
public class My
{
public string Name { get; set; }
public SortOrder? Sorting { get; set; }
}
}
I renounced the variant with pure HTML radios - it requires some changes in value attribute or use more complex styles (like Bootstrap), because for every radio-group this value should be unique, so I have no idea now how to fix it quickly.
Another question - is it possible to add some template to the RadzenRadioButtonListItem instead of a Text property? Or add some Content property for this purpose? For example I want to place some SVG graphics for every radio button instead of the text, or in addition to the text.
Another question. Why there are overloadings for methods Equals, ToString, and GetHashCode for binding DropDown to custom object (first example at this link)? I made it without these overloadings as in my examples here in this topic, and everything works fine. One small thing - I use a template for DropDown. With a template can I not overload these methods?
Sorry, I was wrong. As I understood, now you MUST NOT override them (at least Equals and GetHashCode) to bind drop down with multiple selection to custom objects. But you CAN if you want to change the logic of equality, string representation and so on.
Hi There, I had a similar issue to this user when trying to click on Radzen inputs in a RadzenDataList (trying to achieve carousel effect where I go through different attributes and select values for them). I added the stoppropogation code as outlined in this link, but it did not seem to work. Is there something else that it could be, perhaps an issue specifically with RadzenDataList?