Unplanned
Last Updated: 09 Oct 2024 10:43 by Brian

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

Unplanned
Last Updated: 09 Oct 2024 09:07 by Mark-Us

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.

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

Unplanned
Last Updated: 08 Oct 2024 13:12 by Shannon
Created by: Shannon
Comments: 0
Category: DropDownList
Type: Bug Report
1

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:

  • Use a boolean flag to prevent the OnClose handler from executing the second time, for example, if the second execution occurs less than 1-2 seconds after the first one.
  • Use OnChange instead of OnClose.
  • Use a <TelerikDialog> component instead of ConfirmAsync.

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

Completed
Last Updated: 29 Aug 2024 09:48 by ADMIN
Release 2024 Q4 (Nov)
When I place a DropDownList inside a Modal Window and run it in Safari there is a flicker in the UI when the dropdown is expanded.
Completed
Last Updated: 05 Aug 2024 13:31 by ADMIN
Release 6.1.0
Created by: Matthijs
Comments: 4
Category: DropDownList
Type: Bug Report
5

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".

Unplanned
Last Updated: 25 Jul 2024 07:14 by ADMIN
Created by: VladimirM
Comments: 4
Category: DropDownList
Type: Feature Request
8

Hello,

would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?

Thanks

Duplicated
Last Updated: 11 Jun 2024 09:16 by ADMIN

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: 

1. Open this REPL example: https://blazorrepl.telerik.com/QROrkouK40PFQCUU27
2. Open the DropDownList and type "v" in the filter input field.
Unplanned
Last Updated: 05 Jun 2024 10:06 by David
Created by: David
Comments: 0
Category: DropDownList
Type: Bug Report
9

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:

  • Select the last item in the tree 7.Garden and change the value in the drop down list to Unsupported - the drop down list shows a red border.
  • Select item 6.Garden from the tree. (Any item in the tree other than 1 will do) - I expect the drop down to not have the red border, yet is does.

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.

Unplanned
Last Updated: 15 May 2024 07:19 by ADMIN
Created by: Lennert
Comments: 0
Category: DropDownList
Type: Feature Request
1

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

Unplanned
Last Updated: 03 Apr 2024 21:07 by Nicholas

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

Duplicated
Last Updated: 27 Mar 2024 16:05 by ADMIN

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.

Unplanned
Last Updated: 22 Mar 2024 10:30 by n/a
Created by: n/a
Comments: 0
Category: DropDownList
Type: Feature Request
1
Most of the select components (e.g. ComboBox, MultiSelect) have a loading indicators in the popup that appear while the data is loading. Please add such a loading skeleton animation in the DropDownList component, too.
Unplanned
Last Updated: 19 Mar 2024 12:44 by Joe
When the user opens a filterable DropDownList or Combobox on a mobile device, the search box is initially focused, and the system keyboard opens. This way, the keyboard hides part of the listed items.
Completed
Last Updated: 15 Jan 2024 15:35 by ADMIN
Dear Team,

I am reaching out to suggest an enhancement to the existing filtering feature in the Telerik Blazor dropdown component. Currently, the filtering capability is quite useful, but it would be even more powerful if there was an event trigger during the filtering process. This event would allow developers to execute custom logic while a user is typing in the dropdown field. The ability to respond in real-time as the input changes would significantly enrich the interactivity and functionality of the dropdown, enabling more dynamic and user-tailored experiences. Implementing this feature could greatly enhance the flexibility and utility of the dropdown component. Thank you for considering this enhancement, and I eagerly anticipate its potential integration in future updates.

Kind regards,
Suryateja KONDLA
Unplanned
Last Updated: 29 Nov 2023 23:29 by Adam

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

Completed
Last Updated: 17 Oct 2023 12:28 by ADMIN
Release 5.0.0 (15 Nov 2023) (R1 PI1)

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!

Completed
Last Updated: 28 Sep 2023 14:41 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)

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

Declined
Last Updated: 30 Aug 2023 12:37 by Benjamin
Created by: Robert
Comments: 6
Category: DropDownList
Type: Feature Request
21

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.

Unplanned
Last Updated: 12 Jul 2023 05:50 by Piotr
I have added a Filterable DropDownList inside the TelerikForm. When I select a value from the popup and tab away the focus class still denotes that the component is focused even though it is not. 
Completed
Last Updated: 03 Jul 2023 12:05 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)
Created by: Sarah
Comments: 0
Category: DropDownList
Type: Feature Request
3
I want to add default text within the search bar filter of the DropDownList (eg. "Search by number or name"). I do not want this to show up as the value field - only in the textbox of the search bar. 
1 2 3 4