---
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.
---
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"
};
}
---
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).
---
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.
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;
}
}
Steps to reproduce:
Expected: the group name should change to "Seafood".
Actual: the group name is still "Beverages".
When the Value you bind to the DropDownList is null (for example, because it is a model that is not filled in by the user yet, and you need to perform validation), the component throws a null reference exception.
This does not happen for a nullable integer (example here)
Reproducible:
@
using
System.ComponentModel.DataAnnotations
@
using
Telerik.Blazor.Components.DropDownList
<EditForm Model=
"@PageData"
OnValidSubmit=
"@HandleValidSubmit"
>
<DataAnnotationsValidator />
<ValidationSummary />
@PageData.QuoteState
<TelerikDropDownList bind-Value=
"@PageData.QuoteState"
DefaultItem=
"@Hint"
Width=
"300px"
Data=
"@states"
TextField=
"stateName"
ValueField=
"stateID"
>
</TelerikDropDownList>
<ValidationMessage For=
"@(() => PageData.QuoteState)"
></ValidationMessage>
<button type=
"submit"
>Submit</button>
</EditForm>
@functions {
public
MyViewModel PageData {
get
;
set
; } =
new
MyViewModel();
public
statesModel Hint {
get
;
set
; } =
new
statesModel { stateID =
null
, stateName =
"Not Selected"
};
public
class
statesModel
{
public
string
stateID {
get
;
set
; }
public
string
stateName {
get
;
set
; }
}
public
class
MyViewModel
{
[Required(ErrorMessage =
"State is mandatory."
)]
//the value field in the dropdown model must be null in the default item
public
string
QuoteState {
get
;
set
; }
}
public
IEnumerable<statesModel> states =
new
List<statesModel>
{
new
statesModel { stateID =
"ACT"
, stateName =
"ACT"
},
new
statesModel { stateID =
"NSW"
, stateName =
"NSW"
},
new
statesModel { stateID =
"NT"
, stateName =
"NT"
},
new
statesModel { stateID =
"QLD"
, stateName =
"QLD"
},
new
statesModel { stateID =
"SA"
, stateName =
"SA"
},
new
statesModel { stateID =
"TAS"
, stateName =
"TAS"
},
new
statesModel { stateID =
"VIC"
, stateName =
"VIC"
},
new
statesModel { stateID =
"WA"
, stateName =
"WA"
}
};
void
HandleValidSubmit()
{
Console.WriteLine(
"OnValidSubmit"
);
}
}
Clicking on the <label> opens the dropdown, but clicking on its main element does not
Selected value: @selectedValue
<br />
<label>some label for the dropdown, open it and test whether clicking outside closes it
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
</TelerikDropDownList>
</label>
@code {
//in a real case, the model is usually in a separate file
//the model type and value field type must be provided to the dropdpownlist
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 });
int selectedValue { get; set; } = 3; //usually the current value should come from the model data
}
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
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.
The DropDownList triggers exceptions if there are no items in the dropdown and one tries to use keyboard navigation:
Here is a test page. A possible workaround is to set DefautText, so that the dropdown always contains at least one item.
Open and press Enter, Up or Down:
<TelerikDropDownList Data="@( new List<string>() )"
@bind-Value="@SelectedValue"
TItem="string"
TValue="string"
Width="200px" />
<br /><br />
Open, filter by something non-existent and press Enter, Up or Down:
<TelerikDropDownList Data="@DropDownData"
@bind-Value="@SelectedValue"
TItem="string"
TValue="string"
Filterable="true"
Width="200px" />
@code {
string SelectedValue { get; set; }
List<string> DropDownData = new List<string>()
{
"foo",
"bar",
"baz"
};
}
When bound to a nullable GUID, the DropDownList invokes validation and shows validation messages as soon as the view loads.
Expected: the same behavior as with nullable int - validation is to be triggered by the form submission or selection from the dropdown.
Worked as expected in 1.2.0.
Reproducible:
@
using
Telerik.Blazor.Components.DropDownList
@
using
System.ComponentModel.DataAnnotations
<EditForm Model=
"@person"
OnValidSubmit=
"@HandleValidSubmit"
>
<DataAnnotationsValidator />
<ValidationSummary />
<p
class
=
"gender"
>
Gender: <TelerikDropDownList @bind-Value=
"person.Gender"
DefaultItem=
"@ddlHint"
Data=
"@genders"
TextField=
"MyTextField"
ValueField=
"MyValueField"
>
</TelerikDropDownList>
<ValidationMessage For=
"@(() => person.Gender)"
></ValidationMessage>
</p>
<button type=
"submit"
>Submit</button>
</EditForm>
@code {
// Usually the model classes would be in different files
public
class
Person
{
[Required(ErrorMessage =
"Gender is mandatory."
)]
//the value field in the dropdown model must be null in the default item
public
Guid? Gender {
get
;
set
; }
}
public
class
MyDdlModel
{
//nullable so the default item can allow required field validation
public
Guid? MyValueField {
get
;
set
; }
public
string
MyTextField {
get
;
set
; }
}
Person person =
new
Person();
MyDdlModel ddlHint =
new
MyDdlModel { MyValueField =
null
, MyTextField =
"Gender"
};
IEnumerable<MyDdlModel> genders =
new
List<MyDdlModel>
{
new
MyDdlModel {MyTextField =
"female"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"male"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"other"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"I'd rather not say"
, MyValueField =
new
Guid()}
};
void
HandleValidSubmit()
{
Console.WriteLine(
"OnValidSubmit"
);
}
}
Hello,
Initial I want no item to be selected to let the user select a value. I thought it would be enough if my bindvalue would be of a nullable type. I'm getting an exception when trying. If this is not supported, how can I do it?
<div class="form-group col-md-2">
<label class="col-form-label" for="ddReleaseType">Fönstertyp</label>
<TelerikDropDownList Data="@ReleaseTypeFilterOptions" @bind-Value="FilterState.ReleaseType" TextField="DisplayText" ValueField="ReleaseType" Class="max-width form-control" @ref="ddReleaseType"></TelerikDropDownList>
</div>
public enum ReleaseType : int
{
All = 0,
Category = 1,
Season = 2,
Misc = 3
}
protected Telerik.Blazor.Components.TelerikDropDownList<ReleaseTypeFilterModel?, SessionState.ReleaseType?> ddReleaseType;
protected class ReleaseTypeFilterModel
{
public SessionState.ReleaseType ReleaseType { get; set; }
public string DisplayText { get { return ReleaseType.ToString(); } }
}
Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
_Host.cshtml
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!
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.