The following knowledge base article describes how to select the default value in a drop down, but if there's no default value the selection is not cleared using this method.
When setting the bind value to null (or the default, or frankly anything that doesn't exist in the drop down) I'd like the drop down list selection to be cleared when there's no default value set on the DropDownList.
@page "/"
<br />
<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />
@code {
List<string> data = new() { "selection" };
string selectedValue;
void ClearSelection()
{
// This does not cause the drop down to clear the selection and I think it should.
selectedValue = null;
}
}
Hello,
would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?
Thanks
Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.
But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.
My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.
Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.
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.
Hi,
Is it possible to implement search/look-ahead in the current version of the DropDown component? If not, will you be adding this feature soon?
Thank you.
Ben
At the moment, typing with the keyboard focuses the first item that starts with the last letter you pressed. To focus the next one you should either use Down Arrow, or type the same letter again.
I would like it to behave like the regular <select> or like a combo box with filtering - typing characters quickly should highlight the item that begins with all those characters, instead of using only the first letter.
Hello everyone,
We have opened this Feature Request to gather your insights on the addition of disabled items for the DropDownList.
As a workaround, for the time being, you could use the following code snippet. It would prevent the user from clicking on the item with the mouse, but navigating with the keyboard and selecting it would still work.
<style>
.disabled-item {
color: #D3D3D3;
width:100%;
}
/* remove default padding so the user can't click the underlying element outside the template
Note: this will also affect other dropdowns on the page
*/
.ddl-item {
padding: 4px 8px;
}
.k-popup ul.k-list li.k-item {
padding: 0;
}
</style>
@TheValue
<br />
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@TheValue">
<ItemTemplate>
@{
MyDdlModel item = context as MyDdlModel;
<div @onclick:preventDefault="@item.IsDisabled"
@onclick:stopPropagation="@item.IsDisabled"
class="@( item.IsDisabled ? "disabled-item ddl-item" : "ddl-item" )">
@item.MyTextField
</div>
}
</ItemTemplate>
</TelerikDropDownList>
@code {
int TheValue { get; set; } = 2;
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
public bool IsDisabled { get; set; }
}
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel
{
MyTextField = "item " + x,
MyValueField = x,
IsDisabled = x % 3 == 0
});
}
As stated in the documentation the Event OnChange for DropDownList is shown by intellisense but should not be used. However, in some situations it would be very useful to bind the value of the DropDownList and additionally have an event when the value changes, e.g. show additional inputs when a value is selected.
Currently it is either possible to have data binding to value by @bind-Value or listen for the changed event by using Value and ValueChanged.
The most obvious example is a required field - it must be nullable so required validation works, but the actual model may have to be non-nullable.
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.
Is it possible to drop dropDownList from outside, for example after its data has been changed, without clicking on it ?
ADMIN EDIT:
This feature is also applicable to ComboBox, AutoComplete, Multiselect, Date and Time Pickers components.
Add the ability to make the drop down list expanded contents wider than the closed control, or just automatically determine appropriate width (doesn't always work well for very long text fields, so you need both properties).
Posting this feature request as per your suggestion in my original forum post at: https://www.telerik.com/forums/data-source-using-scalar-list
I would like the DropDownList component to support lists of scalar values as data source. I.e:
<TelerikDropDownList Data="@MyList" bind-Value=@MyItem>
</TelerikDropDownList>
@functions {
protected List<string> MyList = new List<string>() { "a", "b", "c" };
protected string MyItem { get; set; } = "b";
}The DropDownList would infer the scalar type from the Data property. The TextField items shown in the list (and the associated ValueField) would be the same: i.e. the value of each scalar in the list.