Hello,
i am trying to add a Clear Button inside the DropDownList-Component.
I tried to follow the instructions provided here: How do I add a Clear button to a DropDownList? in UI for Blazor | Telerik Forums respectiveley here: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.
But unfortunateley, the button is never inside the component. It's always next to it or under the component.
In your example provided above, the button is inside the component.
I would love to have any solution for this one. A clear button is needed quite often.
I also have attached our custom component, where we use the Telerik DropDownList Component.
Thank you
The DropDownList component is too basic to be used in complex environments. In the real world, no one is binding DropDownLists to List<string>, they are binding to complex datatypes, and the ability to do so has been present in MVC apps for a long time.
Given the following code, it is possible to bind to a List<object>, and two-way bind to the object that was selected.
<select @onchange="@OnChangedAsync">
<option></option>
@if (DataSource != null)
{
@foreach (var item in DataSource)
{
<option @key="item" value="@optionValueFunc(item)" selected="@(item.Equals(SelectedItem))">@optionTextFunc(item)</option>
}
}
</select> #region Private Members
private Func<TSource, object> optionTextFunc;
private Func<TSource, object> optionValueFunc;
private TSource selectedItem = default(TSource);
#endregion
#region Public Parameters
/// <summary>
/// A List of objects to bind against.
/// </summary>
[Parameter]
public IList<TSource> DataSource { get; set; } = new List<TSource>();
/// <summary>
/// A lambda expression referencing the property containing the text to display to the end user. Example: @(c => c.DisplayName)
/// </summary>
[Parameter]
public Expression<Func<TSource, object>> OptionText { get; set; }
/// <summary>
/// A lambda expression referencing the property containing the value for this object, usually an identifier. Example: @(c => c.Id)
/// </summary>
[Parameter]
public Expression<Func<TSource, object>> OptionValue { get; set; }
/// <summary>
/// The item from the <see cref="DataSource" /> that has been selected.
/// </summary>
[Parameter]
public TSource SelectedItem { get; set; }
/// <summary>
/// The callback event required for two-way binding.
/// </summary>
[Parameter]
public EventCallback<TSource> SelectedItemChanged { get; set; }
#endregion
private async Task OnChangedAsync(ChangeEventArgs changeEventArgs)
{
await UpdateSelection(DataSource.FirstOrDefault(c => optionValueFunc(c).ToString() == changeEventArgs.Value.ToString()));
}
private async Task UpdateSelection(TSource item)
{
selectedItem = item;
await SelectedItemChanged.InvokeAsync(selectedItem);
}
protected override async Task OnInitializedAsync()
{
if (optionTextFunc == null && OptionText != null)
{
optionTextFunc = OptionText.Compile();
}
if (optionValueFunc == null && OptionText != null)
{
optionValueFunc = OptionValue.Compile();
}
await Task.CompletedTask;
}Would really appreciate it if you would consider adding this to the next release.
This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.
