Declined
Last Updated: 16 Jun 2021 15:36 by Robert
Created by: Robert
Comments: 4
Category: DropDownList
Type: Feature Request
0

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: 15 Jun 2021 17:12 by ADMIN

---

ADMIN EDIT

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

---

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.

Unplanned
Last Updated: 11 May 2021 07:55 by ADMIN
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
Unplanned
Last Updated: 10 May 2021 18:22 by ADMIN
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.
Unplanned
Last Updated: 04 May 2021 05:03 by ADMIN
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; }
    }
}

---

Completed
Last Updated: 21 Apr 2021 05:34 by ADMIN
Release 2.24.0
Created by: Ben
Comments: 3
Category: DropDownList
Type: Feature Request
18

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

Unplanned
Last Updated: 01 Apr 2021 12:43 by ADMIN
Created by: Frederic
Comments: 0
Category: DropDownList
Type: Bug Report
5

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: 29 Mar 2021 16:05 by ADMIN
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"
Unplanned
Last Updated: 01 Mar 2021 17:26 by ADMIN
Created by: Marcel
Comments: 2
Category: DropDownList
Type: Feature Request
14

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.

Duplicated
Last Updated: 22 Feb 2021 10:10 by ADMIN

I have two cascaded dropdownlists, in attached example car brands and selectable colors. The dependent dropdown has defaulttext option. After the parent dropdown has changed, in its event handler I reload the dependent data source and set a new valid value. If the data source does not contain the previous (!) value, the dropdownlist calls the valuechanged callback with default value. In next round when dependent dropdown holds the default value, after reloading datasource it works as expected. And parent changes again, if the updated datasource does not contain the previous dependent value the dropdownlist sets its value to default.

When I do not pass defaulttext parameter, the dependent dropdown selects the first element from the updated datasource. In my case it is not acceptable because I want to set a specific value (in this example the default color), not the first and not the default.

This feedback drives me to try setting value to default and wait for re-render the descendant dropdownlist before set the wanted value. 

Is there any way to avoid this behaviour of the dropdownlist?


<TelerikDropDownList TItem="Brand"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@BrandList"
			 Value="@Data.BrandId"
			 ValueChanged=@OnBrandChanged />

<TelerikDropDownList TItem="Color"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@FilteredColorList"
			 Value="@Data.ColorId"
			 ValueChanged="@OnColorChanged"
			 DefaultText="select color ..." />

async Task OnBrandChanged(int brandId) { Data.ColorId = default; await Task.Delay(5);

Data.BrandId = brandId; Data.ColorId = GetDefaultColor(brandId); FilteredColorList = GetFilteredColorList(brandId); }


Completed
Last Updated: 15 Feb 2021 12:25 by ADMIN
Release 2.22.0
When I change the PopupHeight dynamically (based on the number of items in my data source), the change is not reflected in the component.
Completed
Last Updated: 04 Feb 2021 16:00 by ADMIN
Release 2.22.0
Created by: Barry
Comments: 0
Category: DropDownList
Type: Bug Report
1

When the Default text value is changed by some business logic, the component does not react to that change to update the Default text value in the view model.

DropDownList should re-render on change of the Default text parameter

Unplanned
Last Updated: 11 Jan 2021 17:39 by ADMIN
Created by: Wei
Comments: 0
Category: DropDownList
Type: Feature Request
6
I would like a boolean AutoWidth parameter that controls the width of the popup element of the dropdown and adjust its width based on the data. 
Duplicated
Last Updated: 18 Dec 2020 09:51 by ADMIN
Created by: Cindy
Comments: 2
Category: DropDownList
Type: Feature Request
6
Unplanned
Last Updated: 03 Dec 2020 13:41 by ADMIN

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.

Unplanned
Last Updated: 23 Sep 2020 16:12 by Ayush
Created by: Eugenie
Comments: 3
Category: DropDownList
Type: Feature Request
14
I would like the DropDownList to automatically detect the boundaries of the screen in order not to truncate items when the popup is opened.
Completed
Last Updated: 17 Sep 2020 10:55 by ADMIN
Release 2.18.0
I have logic that updates the Data of a dropdownlist (in this case, changes the value of the TextField of a the selected item in the dropdown). After the database update, I fetch the dropdown data anew, and it reflects in the dropdown element, but not in the main element where it is currently shown.
Unplanned
Last Updated: 01 Sep 2020 12:37 by ADMIN
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.
1 2