DropDownList Overview
The DropDownList component allows the user to choose an option from a predefined set of choices presented in a dropdown popup. The developer can control the data, sizes, and various appearance options like class and templates.
To use a Telerik DropDownList for Blazor
- add the
TelerikDropDownListtag - populate its
Dataproperty with the collection of items you want in the dropdown - set the
TextFieldandValueFieldproperties to point to the corresponding names of the model - (optional) set the
Valueproperty to the initial value of the model.
Basic dropdownlist data binding and two-way value binding
Selected value: @selectedValue
<br />
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
</TelerikDropDownList>
@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
}
The result from the code snippet above
Component namespace and reference
@using Telerik.Blazor.Components.DropDownList
<TelerikDropDownList @ref="myDdlRef" Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="3">
</TelerikDropDownList>
@code {
//the type of the generic component is determined by the type of the model you pass to it, and the type of its value field
Telerik.Blazor.Components.TelerikDropDownList<MyDdlModel, int> myDdlRef;
IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
}
<TelerikDropDownList @ref="myDdlRef2" Data="@MyList" @bind-Value="MyItem">
</TelerikDropDownList>
@code {
protected List<string> MyList = new List<string>() { "first", "second", "third" };
protected string MyItem { get; set; } = "second";
//the type of the generic component is determined by the type of the model you pass to it, when the model is a primitive type
Telerik.Blazor.Components.TelerikDropDownList<string, string> myDdlRef2;
}
The DropDownList provides the following features:
-
Class- the CSS class that will be rendered on the main wrapping element of the dropdownlist. -
Data- allows you to provide the data source. Required. -
DefaultText- sets the hint that is shown if no other item is selected (theValuedoes not match any item in the data source, or is not provided at all). The item this creates has the default value for the type of theValueField(or, thus, theValue). For example,0for anint, andnullfor anint?orstring. You need to make sure that it does not match the value of an existing item in the data source. You can find examples in the Examples section in this article and in the Input Validation article. -
Enabled- whether the component is enabled. -
PopupHeight- the height of the expanded dropdown list element. -
TItem- the type of the model to which the component is bound. Required if you can't provideDataorValue. Determines the type of the reference object. -
TValue- the type of the value field from the model to which the component is bound. Required if you can't provideDataorValue. Determines the type of the reference object. -
TabIndex- thetabindexattribute rendered on the dropdown. -
TextField- the name of the field from the model that will be shown to the user. Defaults toText. -
ValueField- the name of the field from the model that will be the underlyingvalue. Defaults toValue. -
Valueandbind-Value- get/set the value of the component, can be used for binding. If you set it to a value allowed by the model class value field, the corresponding item from the data collection will be pre-selected. Use thebind-Valuesyntax for two-way binding, for example, to a variable of your own.The
ValueandValueFieldcan be of types:-
number(such asint,doubleand so on) stringGuidEnum
-
-
Width- the width of the dropdown and the main element. - Templates - they allow you to control the rendering of items in the component. See the Templates article for more details.
- Validation - see the Input Validation article for more details.
Examples
Default text (hint) to show when no actual item is selected
@MyStringItem
<TelerikDropDownList Data="@MyStringList" @bind-Value="@MyStringItem" DefaultText="Select something">
</TelerikDropDownList>
<br />
<br />
@MyIntItem
<TelerikDropDownList Data="@MyIntList" @bind-Value="@MyIntItem" DefaultText="Select another thing">
</TelerikDropDownList>
@code {
protected List<string> MyStringList = new List<string>() { "first", "second", "third" };
protected string MyStringItem { get; set; }
protected List<int> MyIntList = new List<int>() { 1, 2, 3 };
protected int MyIntItem { get; set; }
}
Get selected item from external code
@result
<br />
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
@bind-Value="@DdlValue" DefaultText="Select something">
</TelerikDropDownList>
<TelerikButton OnClick="@GetSelectedItem">Get Selected Item</TelerikButton>
@code {
string result;
int DdlValue { get; set; } = 5;
void GetSelectedItem()
{
// extract the data item from the data source by using the value
MyDdlModel selectedItem = myDdlData.Where(d => d.MyValueField == DdlValue).FirstOrDefault();
if (selectedItem != null)
{
result = selectedItem.MyTextField;
}
else
{
result = "no item selected";
}
StateHasChanged();
}
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 });
}