When you select a date in DropDownList with dates in it (List<DateTime>), the @bind-Value is shaving off the milliseconds.
===ADMIN EDIT===
In the meantime, as a workaround for displaying milliseconds correctly, you can bind the DropDownList to a model. This way, you can use the "Id" to retrieve the selected item and display its precise milliseconds. Below is an example I've prepared to demonstrate this approach:
Selected value: @myDdlData.ToList().Where(x => x.Id == selectedValueId).FirstOrDefault()?.MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff")
<br />
<TelerikDropDownList Data="@myDdlData"
TextField="MyTextField"
ValueField="Id"
@bind-Value="selectedValueId">
</TelerikDropDownList>
@code {
public class MyDdlModel
{
public int Id { get; set; }
public DateTime MyValueField { get; set; }
public string MyTextField => MyValueField.ToString("MM/dd/yyyy HH:mm:ss.fff"); // Display formatted DateTime
}
private int selectedValueId { get; set; } = 1;
private IEnumerable<MyDdlModel> myDdlData = GenerateRandomDateTimes(20);
private static IEnumerable<MyDdlModel> GenerateRandomDateTimes(int count)
{
Random random = new Random();
DateTime startDate = DateTime.Now;
return Enumerable.Range(1, count)
.Select(x => new MyDdlModel
{
Id = x, // Unique integer Id
MyValueField = startDate.AddDays(x)
.AddMinutes(random.Next(0, 60))
.AddSeconds(random.Next(0, 60))
.AddMilliseconds(random.Next(0, 1000))
}).ToList();
}
}
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;
}
}
Hello,
would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?
Thanks
In TelerikSelectBase that the DropDownList inherits, the FieldIdentifier is set only in the OnInitializedAsync method and therefore the FieldIdentitier is never updated. This can cause issues with validation as seen in this example: https://blazorrepl.telerik.com/GyamPdlf37LXpPAW36.
To reproduce:
For reference, in the TelerikInputBase, the FieldIdentifier is set in the SetParameterAsync and thus it is accordingly updated. See the TextBox behavior in the above sample.
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
Currently, a TextField value of empty string will produce a blank item in the dropdown.
On the other hand, a null TextField value will produce the fully qualified class name.
Here are possible workarounds: https://blazorrepl.telerik.com/myOlFpFb1465jW8E07
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.
===
Admit edit: some keywords for better findability: DropDownList keyboard search filter accessibility
I need to be able to allow our users to tab into the dropdownlist control and open it with enter (similar to standard HTML select).
Here is also a sample from the W3 documentation to compare against: DropDownList keyboard support.
I have a cascading DropDownList scenario with virtual scrolling. When the first DropDownList changes value, the second one should reset its scrollbar to the top, because it now contains new data. This doesn't happen.
Here is a REPL test page.
===
ADMIN EDIT
===
As a workaround for the time being, you may track when the value is changed in the parent DropDownList to dispose and re-initialize the child DropDownList.
Here is an example: https://blazorrepl.telerik.com/mdafHabk585ZtzyV54.