Completed
Last Updated: 11 Sep 2022 11:13 by ADMIN
Release 3.6.0 (14 Sep 2022) (R3 2022)
Created by: Svetoslav
Comments: 4
Category: DropDownList
Type: Feature Request
17

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

Completed
Last Updated: 22 Jul 2022 12:41 by ADMIN
Release 3.5.0

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.

Unplanned
Last Updated: 17 Jun 2022 18:04 by Randy
Created by: n/a
Comments: 2
Category: DropDownList
Type: Feature Request
6

Hello,

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

Thanks

Completed
Last Updated: 11 May 2022 19:03 by ADMIN
Created by: Marcel
Comments: 6
Category: DropDownList
Type: Feature Request
18

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

Completed
Last Updated: 04 May 2022 20:15 by ADMIN
Release 3.3.0
the dropdown options display correctly until some come from a second service call.

The problem is that if the selected option is in the options added later then it does not show it as the selected value.

Example below shows correct function for "6" but incorrect for "7".

---

ADMIN EDIT

Here is a reproducible with the workaround highlighted in green:

 

@using System.Collections.ObjectModel

<h4>Option Selected: 6 @selectedSix</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSix" />

<h4>Option Selected: 7 @selectedSeven</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSeven">
</TelerikDropDownList>

<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>

<ul>
    @foreach (var item in myDdlData)
    {
        <li>@item.MyValueField</li>
    }
</ul>

@code {
    int selectedSix { get; set; } = 6;
    int selectedSeven { get; set; } = 7;

    ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));

    protected override async Task OnInitializedAsync()
    {
        AddOption();

        await Task.Delay(TimeSpan.FromSeconds(1));

        AddOption();
    }

    void AddOption()
    {
        myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });

        int origSelection = selectedSeven;
        selectedSeven = 0;
        StateHasChanged();
        //add this if it does not work
        //await Task.Delay(30);//wait a rendering frame
        selectedSeven = origSelection;
        //add this if it does not work
        //StateHasChanged();
    }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

 

Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.

---

Completed
Last Updated: 29 Apr 2022 09:55 by ADMIN
Release 3.3.0

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.

https://docs.telerik.com/blazor-ui/knowledge-base/inputs-clear-selection-value?_ga=2.18517947.380379649.1635269411-1661447875.1621547203

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

Won't Fix
Last Updated: 01 Apr 2022 15:54 by ADMIN

The first element of the dropdown gets read aloud at page load even without being focused.

Using the latest version of (Chrome and Chromevox) and (Firefox and NVDA).

Completed
Last Updated: 01 Apr 2022 10:27 by ADMIN
Release 3.2.0

DropdownList does not work very well with a screen reader.

It should work like this one https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html

Using NVDA and Firefox, it reads the selected item 3 times, sometimes does not work at all (This is only when you open the dropdown using alt plus down arrow). Using just the arrow up and down keys does not work.

Using Cromevox and ChromeOn the dropdowns, it does not give a description of how many options are available like, "1 of 4" when you first tab to it. It reads it after I already selected the first option. That should be reversed, read the options first and not after its selected (This is only when you open the dropdown using alt plus down arrow). Using only the arrow key up and down it reads the selected item only but does not reads the other options.

Unplanned
Last Updated: 22 Mar 2022 15:33 by ADMIN
Created by: Indra
Comments: 2
Category: DropDownList
Type: Bug Report
1

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.

Completed
Last Updated: 28 Feb 2022 10:40 by ADMIN
Release 3.1.0
Created by: Chris
Comments: 0
Category: DropDownList
Type: Bug Report
0

Hello,

If I scroll the page down and open a filterable DropDownList, the page will scroll up.

Here is a REPL test page

UI for Blazor 2.30 works as expected. This broke in version 3.0.0. The issue exists only in WebAssembly apps.

Completed
Last Updated: 22 Jan 2022 10:02 by ADMIN
Release 3.0.0
Created by: Jocelyn
Comments: 3
Category: DropDownList
Type: Bug Report
7

---

ADMIN EDIT

This behavior is observed in the DropDownList when filtering is enabled and in the ComboBox regardless of whether filtering is enabled or not.

The (filter) input gets focus, which shows the soft keyboard, which changes the viewport size, which causes the dropdown to hide. Unfortunately, there is no workaround at the moment (except perhaps disabling filtering for small viewports).

---

Completed
Last Updated: 05 Jan 2022 12:00 by ADMIN
Release 3.0.0
Created by: Frederic
Comments: 2
Category: DropDownList
Type: Bug Report
8

When used in Bootstrap Grid the DropDownList popup is misaligned on the first open. On a second click, it is aligned.

This behavior is also valid for Combobox and Autocomplete.

Reproduction code:

 

<div class="box">
    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">ComboBox</span>
        </div>
        <div class="col">
            <TelerikComboBox Data="@myComboData" TextField="ComboTextField" ValueField="ComboValueField"
                             @bind-Value="selectedCombo" ClearButton="true" Filterable="true">
            </TelerikComboBox>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">DropDownList</span>
        </div>
        <div class="col">
            <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                                 @bind-Value="@selectedDropDown">
            </TelerikDropDownList>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">Autocomplete</span>
        </div>
        <div class="col">
            <TelerikAutoComplete Data="@Suggestions" @bind-Value="@AutoCompleteValue"
                                 ClearButton="true" />
        </div>
    </div>
</div>

@code {
    public int selectedDropDown { get; set; }
    public int selectedCombo { get; set; }
    public string AutoCompleteValue { get; set; }

    //ComboBox
    public class ComboModel
    {
        public int ComboValueField { get; set; }
        public string ComboTextField { get; set; }
    }

    IEnumerable<ComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new ComboModel { ComboTextField = "item " + x, ComboValueField = x });

    //DropDownList
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    //Autocomplete
    List<string> Suggestions { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };
}

 

Unplanned
Last Updated: 15 Nov 2021 13:59 by ADMIN
Created by: Denver
Comments: 0
Category: DropDownList
Type: Bug Report
4
On a tablet, when the DropDownList, the MultiSelect or the ComboBox components are clicked, any appearance or disappearance of the tablet keyboard will cause them to display an empty popup.

This only happens if the popup somehow could otherwise overflow the viewport, i.e. only when the DropDownList, the MultiSelect or the ComboBox component are very close to the bottom of the viewport.
Completed
Last Updated: 13 Sep 2021 05:08 by ADMIN
Release 2.27.0
When I use the Chrome Lighthouse (based on the axe accessibility testing tool) to assess the accessibility of the TelerikDropDownList I am getting several issues.
Completed
Last Updated: 13 Sep 2021 05:07 by ADMIN
Release 2.27.0
Created by: Van Patrick
Comments: 0
Category: DropDownList
Type: Bug Report
1
Current

aria-describedby="a112a6d1-5585-48b0-a138-22edbc0b0bda "

Expected

aria-describedby="a112a6d1-5585-48b0-a138-22edbc0b0bda"
Completed
Last Updated: 13 Sep 2021 05:07 by ADMIN
Release 2.27.0
Created by: Xiaobo
Comments: 0
Category: DropDownList
Type: Bug Report
3
Missing label causes an accessibility issue:  The select element must have an accessible name
Completed
Last Updated: 11 Aug 2021 16:10 by ADMIN
Created by: Clark
Comments: 6
Category: DropDownList
Type: Bug Report
0
I've encountered a scenario where a DropDownList's red border (due to validation status) will be displayed or hidden when it shouldn't. It seems to be always one step behind. For example:

1. Submit the empty form to trigger validation. A validation message is displayed and the field shows a red border as expected.
2. Select a valid value. The validation message goes away as expected, but the red border remains.
3. Select an invalid value. The validation message appears, but now the red border disappears.
4. Select a valid value. The validation message goes away, but the red border remains.

Interestingly, this only happens when using the keyboard. Using the mouse, the border is displayed/hidden at the same time the validation message is displayed/hidden, as would normally be expected.

So to cause this: tab into the field, press one key (e.g., a letter or the down arrow) to select a value, then tab out of the field. If you change the value more than once, the red border will disappear the second time if it is also a valid value.

Animated demo:



I've encountered almost the exact same scenario with other fields when using async validation rules (which Blazor currently does not support), leading me to believe the DropDownList control may be using async somewhere that's resulting in this problem.

Additionally, I'm only experiencing this when I'm wrapping the DropDownList control in my own custom component. I'm not sure why this is.

---

I've included a page and components that demonstrate this problem. It's a little messy but hopefully sheds some light on when it does and doesn't occur. It shows:

1. The issue happens to the TelerikDropDownList when wrapped in a custom component but not otherwise.
2. The issue does not happen to Microsoft's built-in InputSelect even if wrapped in a custom component.
3. The issue does not happen to TelerikTextBox even if wrapped in a custom component.
4. The values of CssClass and InputClass differ, indicating that validation only completes after the value has been changed and OnParametersSet() has been called. (async issue?)

In the attached demo page, the issue only occurs in the last field ("TelerikDropDownListWrapped").

---

Seems like this is a bug with TelerikDropDownList. If not a bug, how can I avoid this issue and why does it not occur with other controls?
Declined
Last Updated: 16 Jun 2021 15:36 by Robert
Created by: Robert
Comments: 4
Category: DropDownList
Type: Feature Request
4

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: 14 Jun 2021 09:47 by ADMIN
The validation Tooltip does not show correctly when hovering from the icon to the select element in the DropDownList
Duplicated
Last Updated: 08 Jun 2021 16:08 by ADMIN
Created by: Chris
Comments: 1
Category: DropDownList
Type: Bug Report
0

The drop down list component does not allow the user to associate a label with the underlying html select input control, which goes against accessibility standards. It appears that most, if not all, of the other components follow the accessibility standards. Please fix the drop down list and/or allow attribute splatting so that developers can apply their own attributes (like aria-label) to meet accessibility standards.

1 2 3