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();
    }
}

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

The scenario involves a DropDownList, which receives its data through OnRead at runtime asynchronously. The initial OnRead event that the component fires is not used, so the app calls Rebind() at some point. In this case, the component Value doesn't display until the user opens the dropdown. A possible workaround is to set the Value after the OnRead execution is complete.

https://blazorrepl.telerik.com/mfuUkwFR07p1jyo113

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.

Here is the scenario:

• A select component is near the bottom of the screen and its dropdown shows above the component.
• Height="auto" is set in the PopupSettings
• Filtering is enabled.
• Component version 6.1.0 or later

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:

• Use a fixed height in the PopupSettings.
• Downgrade to version 6.0.2.

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;
    }
}

Steps to reproduce:

1. Open the Edit in Telerik REPL link from the demo page for DropDownList - Grouping.
2. Add Filterable="true" to TelerikDropDownList.
3. Run.
4. Open the dropdown.
5. Type in for instance the last item of the list "Röd Kaviar", that belongs to the category "Seafood".

Expected: the group name should change to "Seafood".

Actual: the group name is still "Beverages".

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:

1. Open a DropDownList with filter enabled
2. Press TAB

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

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***