Please add group header template for the select components. There are two goals:
Here is the scenario:
In this case, reducing or increasing the number of visible dropdown items does not adjust the open dropdown's position. As a result, it may either float too high, or overflow the screen.
Possible workarounds are:
Here is a test page:
<div style="height:80vh;background:linear-gradient(white,orange)">
<ol>
<li>Open a ComboBox</li>
<li>Type a character to filter and reduce the visible data items</li>
<li>Observe incorrect popup position that leaves a gap</li>
</ol>
<ol>
<li>Focus a closed ComboBox</li>
<li>Type a character to filter and display a reduced list of data items</li>
<li>Remove the filter string to increase the visible data item count</li>
<li>Observe incorrect popup position that overflows the screen</li>
</ol>
</div>
WORKS:
<TelerikComboBox Data="@ListItems"
@bind-Value="@SelectedValue"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Id)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
Width="300px" />
BROKEN:
<TelerikComboBox Data="@ListItems"
@bind-Value="@SelectedValue"
TextField="@nameof(ListItem.Text)"
ValueField="@nameof(ListItem.Id)"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
Width="300px">
<ComboBoxSettings>
<ComboBoxPopupSettings Height="auto" MinHeight="50px" MaxHeight="60vh" />
</ComboBoxSettings>
</TelerikComboBox>
<div style="height:80vh;background:linear-gradient(orange, white)">
</div>
@code {
private List<ListItem> ListItems { get; set; } = new();
private int SelectedValue { get; set; }
protected override void OnInitialized()
{
ListItems = new List<ListItem>();
for (int i = 1; i <= 50; i++)
{
ListItems.Add(new ListItem()
{
Id = i,
Text = $"Item {i} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"
});
}
base.OnInitialized();
}
public class ListItem
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}
The OnClose event fires multiple times when the handler uses the DialogFactory.
The behavior occurs with all select components (AutoComplete, ComboBox, DropDownList, MultiColumnComboBox, MultiSelect)
Possible workarounds include:
Here is a test page that reproduces the issue:
<div style="display: flex; gap: 2em;">
<div>
<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ButtonGroupToggleButton @bind-Selected="@UseOnChange">Use OnChange</ButtonGroupToggleButton>
<ButtonGroupToggleButton @bind-Selected="@UseOnClose">Use OnClose</ButtonGroupToggleButton>
</TelerikButtonGroup>
<TelerikDropDownList Data="@Data"
@bind-Value="@Value"
ValueField="@nameof(SampleModel.Text)"
OnChange="@OnDropDownListChange"
OnClose="@OnDropDownListClose"
Width="160px" />
</div>
<div>
<TelerikButton OnClick="@( () => CloseLog = string.Empty )">Clear Event Log</TelerikButton>
<p>
<pre>@CloseLog</pre>
</p>
</div>
</div>
@code {
private List<SampleModel> Data { get; set; } = new();
private string Value { get; set; } = string.Empty;
private List<string> Values { get; set; } = new();
private string CloseLog { get; set; } = string.Empty;
private bool UseOnClose { get; set; } = true;
private bool UseOnChange { get; set; }
[CascadingParameter]
public DialogFactory? TelerikDialogs { get; set; }
private async Task OnDropDownListChange(object currentValue)
{
CloseLog += $"OnChange {DateTime.Now.ToString("HH:mm:ss.fff")} \n";
if (UseOnChange)
{
await TelerikDialogs!.AlertAsync("OnChange");
}
}
private async Task OnDropDownListClose(DropDownListCloseEventArgs args)
{
CloseLog += $"OnClose {DateTime.Now.ToString("HH:mm:ss.fff")} \n";
if (UseOnClose)
{
await TelerikDialogs!.AlertAsync("OnClose");
}
}
public class SampleModel
{
public int Id { get; set; }
public string Text { get; set; } = string.Empty;
}
}
Steps to reproduce:
Expected: the group name should change to "Seafood".
Actual: the group name is still "Beverages".
Hello,
would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?
Thanks
When using the grouped DropDownList and performing a search for a specific element, the DropDownList incorrectly displays the initially shown group instead of the group containing the searched element.
To reproduce the issue:Hi,
We are using the DropDownList component as an inline editor in the grid, for managing a product hierarchy. Previously we were using the DropDownList with grouping enabled, without virtualization, but due to volume of data we now need to use virtualization.
This does not work with grouping at the moment.
At the bottom of this page it is mentioned that 'Virtual scrolling with grouping will be supported in a future version.'.
Any timeline on this feature?
KR,
Lennert
TlerikDropDownList keyboard navigation works differently from native html select.
In case we have a list with many similar options, for example:
011
021
211
....
In this case with native html select I can type 02 to select 021, but with TlerikDropDownList this would select 211.
If you type swiftly multiple printable characters, the DropDownList keyboard navigation will react only to the first character.
Hi!
When i use combination of LINQ inside TelerikDropDownLists Data attribute and TelerikGrid 's GridEditMode.Popup mode, i get weird behavior when i try to select an item from TelerikDropDownLists - everything freezes. Please check the solution. Everything works fine if i don't use LINQ or GridEditMode.Popup mode.
Thank you!
Using DropDownList with Filter enabled will lost track of Focus when an item from dropdown is selected or tabbing away from filter input.
Steps to reproduce:
Expected Behavior:
Focus in the next focusable element
Actual Behavior:
Focus is lost, and will go to the browser buttons
It is possible to reproduce in the demos:
https://demos.telerik.com/blazor-ui/dropdownlist/filtering
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.
The DropDownList remains open after tabbing and does not fire. It also won't fire OnBlur and OnChange in this case. The problem occurs only if the component was opened by clicking exactly on its arrow.
Here is a test page: https://blazorrepl.telerik.com/cxEfFVPq042owTt616
The workaround is to wrap the component in a <span> that handles @onfocusout and closes the component programmatically: https://blazorrepl.telerik.com/cnafPCYL21aT3fpD05
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
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.
***Admin Edit***
Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings
***Admin Edit***
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.