Selection in Dropdown List
30 Jan 202324 minutes to read
Get selected value
Get the selected value of the DropDownList component in the ValueChange event using the ChangeEventArgs.Value property.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="Text" Text="Text"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></DropDownListEvents>
</SfDropDownList>
@code {
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
public void OnValueChange(ChangeEventArgs<string, Games> args)
{
Console.WriteLine("The DropDownList Value is: ", args.Value);
}
}
Get the complete object list of the selected value in the ValueChange event using the ChangeEventArgs.ItemData property.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Games" ValueChange="OnValueChange"></DropDownListEvents>
</SfDropDownList>
@code {
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
public void OnValueChange(ChangeEventArgs<string, Games> args)
{
Console.WriteLine("The complete data of the selected value is: ", args.ItemData);
}
}
Preselected value on OnInitializedAsync
Bind the pre-selected value to the DropDownList component using the @bind-Value attribute. Assign the value property inside the OnInitializedAsync lifecycle. The following sample shows how to bind the value on the initial rendering of the component.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string ddlValue { get; set; }
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football" },
new Games() { ID= "Game2", Game= "Badminton" },
new Games() { ID= "Game3", Game= "Basketball" },
new Games() { ID= "Game4", Game= "Cricket" },
new Games() { ID= "Game5", Game= "Football" },
new Games() { ID= "Game6", Game= "Golf" },
new Games() { ID= "Game7", Game= "Hockey" },
new Games() { ID= "Game8", Game= "Rugby"},
new Games() { ID= "Game9", Game= "Snooker" },
new Games() { ID= "Game10", Game= "Tennis"},
};
protected override async Task OnInitializedAsync()
{
ddlValue = "Game4";
}
}
Programmatically change the selected value
Change the component value programmatically or externally by the component instance using the @ref attribute of the component. The following sample shows how to change the value of the component using click event of the button component.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
<div>
<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="ddlValue">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div>
<SfButton Content="Click to change the value" OnClick="OnBtnClick"></SfButton>
</div>
@code {
public string ddlValue { get; set; } = "Game10";
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football" },
new Games() { ID= "Game2", Game= "Badminton" },
new Games() { ID= "Game3", Game= "Basketball" },
new Games() { ID= "Game4", Game= "Cricket" },
new Games() { ID= "Game5", Game= "Football" },
new Games() { ID= "Game6", Game= "Golf" },
new Games() { ID= "Game7", Game= "Hockey" },
new Games() { ID= "Game8", Game= "Rugby"},
new Games() { ID= "Game9", Game= "Snooker" },
new Games() { ID= "Game10", Game= "Tennis"},
};
public void OnBtnClick()
{
ddlValue = "Game4";
}
}
While changing and selecting the value the following event get triggered.
ValueChange event
The ValueChange event is triggered when the value of the DropDownList component get changed or modified. Also, it will return the necessary arguments including the current and previously selected or changed value.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Countries" ValueChange="ChangeCountry"></DropDownListEvents>
</SfDropDownList>
@code {
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public void ChangeCountry(ChangeEventArgs<string, Countries> args)
{
Console.WriteLine("ValueChange event has been triggered !!");
}
}
OnValueSelect event
The OnValueSelect event is triggered when you select any value in the DropDownList component. Get the necessary arguments including the ChangeEventArgs.ItemData. Also, prevent the selection of items by setting the ChangeEventArgs.Cancel property as true
provided by the event arguments.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Countries" OnValueSelect="SelectCountry"></DropDownListEvents>
</SfDropDownList>
@code {
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public void SelectCountry(SelectEventArgs<Countries> args)
{
Console.WriteLine("Select event has been triggered !!");
}
}
Preselect value with index
Bind the pre-selected value to the component using the @bind-Index attribute. It binds the respective value present in the specified index position of the datasource.
NOTE
It will be dependent on the SortOrder type. It will bind the value to the component with the sorted data if the corresponding property is defined.
The following sample shows how to bind the index on the initial rendering.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Index="ddlIndex">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public int? ddlIndex { get; set; } = 4;
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football" },
new Games() { ID= "Game2", Game= "Badminton" },
new Games() { ID= "Game3", Game= "Basketball" },
new Games() { ID= "Game4", Game= "Cricket" },
new Games() { ID= "Game5", Game= "Football" },
new Games() { ID= "Game6", Game= "Golf" },
new Games() { ID= "Game7", Game= "Hockey" },
new Games() { ID= "Game8", Game= "Rugby"},
new Games() { ID= "Game9", Game= "Snooker" },
new Games() { ID= "Game10", Game= "Tennis"},
};
}
Get selected item by value
Get the entire object belonging to the value selected in the component using the GetDataByValue method.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
<div>
<SfDropDownList @ref="ddlObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" @bind-Value="@ddlValue" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div>
<SfButton Content="Click to get the value" OnClick="OnBtnClick"></SfButton>
</div>
@code {
public string ddlValue { get; set; }
SfDropDownList<string, Games> ddlObj;
public class Games
{
public string ID { get; set; }
public string Game { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Game= "American Football" },
new Games() { ID= "Game2", Game= "Badminton" },
new Games() { ID= "Game3", Game= "Basketball" },
new Games() { ID= "Game4", Game= "Cricket" },
new Games() { ID= "Game5", Game= "Football" },
new Games() { ID= "Game6", Game= "Golf" },
new Games() { ID= "Game7", Game= "Hockey" },
new Games() { ID= "Game8", Game= "Rugby"},
new Games() { ID= "Game9", Game= "Snooker" },
new Games() { ID= "Game10", Game= "Tennis"},
};
public void OnBtnClick()
{
var DropDownValue = ddlObj.GetDataByValue(ddlValue);
Console.WriteLine(DropDownValue);
}
}
Focus the next component on selection
Focus the component programmatically using the FocusAsync public method. It will set focus instantly to the DropDownList component when invoking it.
@using Syncfusion.Blazor.DropDowns
@using System.Threading
<h4>DropDown A</h4>
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Countries" Closed="@(e => OnClose(e, DropObj2))"></DropDownListEvents>
</SfDropDownList>
<h4>DropDown B</h4>
<SfDropDownList @ref="DropObj2" ID="dropdown2" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
</SfDropDownList>
@code {
SfDropDownList<string, Countries> DropObj2;
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public async Task OnClose(ClosedEventArgs args, SfDropDownList<string, Countries> componentRef)
{
Thread tread = new Thread(
async () =>
{
Thread.Sleep(5);
await componentRef.FocusAsync();
}
);
tread.Start();
await Task.CompletedTask;
}
}
Programmatically trigger onChange event
Trigger the ValueChange event manually by using the instance (taken from @ref attribute) of the DropDownListEvents. In the following example, the ValueChange
event is invoked inside the Created
event handler. As per the following code, it will trigger once the component is created or rendered on the page.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents @ref="dropObj" TValue="string" TItem="Countries" Created="onCreate" ValueChange="ChangeCountry"></DropDownListEvents>
</SfDropDownList>
@code {
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public DropDownListEvents<string, Countries> dropObj { get; set; }
public void onCreate()
{
var args = new Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries>() { Value = "CM", IsInteracted = false };
this.dropObj.ValueChange.InvokeAsync(args);
}
public void ChangeCountry(ChangeEventArgs<string, Countries> args)
{
Console.WriteLine("Value has been changed!!");
}
}
Programmatically focus in and focus out the component
In order to trigger the FocusAsync()
and FocusOutAsync()
methods using the instance of the dropdownlist, you can use buttons. You can bind the click event of the button to the FocusAsync()
and FocusOutAsync()
methods. When the button is clicked, it triggers the corresponding method on the dropdownlist.
@using Syncfusion.Blazor.DropDowns;
<button @onclick="Focus">Focus</button>
<button @onclick="FocusOut">FocusOut</button>
<SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
@code {
SfDropDownList<string, Games> DDLObj;
public string GameValue { get; set; } = "Game3";
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
public void Focus()
{
this.DDLObj.FocusAsync();
}
public void FocusOut()
{
this.DDLObj.FocusOutAsync();
}
}
While focusing and focus out the following event get triggered.
Focus event
The Focus event will trigger when the component gets focused.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Countries" Focus="OnFocus"></DropDownListEvents>
</SfDropDownList>
@code {
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public void OnFocus()
{
Console.WriteLine("Focus event has been triggered !!");
}
}
Blur event
The Blur event will trigger when focus moves out from the component.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList ID="dropdown" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
<DropDownListEvents TValue="string" TItem="Countries" Blur="OnBlur"></DropDownListEvents>
</SfDropDownList>
@code {
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
public void OnBlur()
{
Console.WriteLine("Blur event has been triggered !!");
}
}
Get Data by value
You can retrieve the selected value from the dropdown list by using the GetDataByValue(TValue)
method through an instance of the dropdown list. You can bind the click event of a button to the GetDataByValue(TValue)
method of the dropdown list instance. When the button is clicked, it will trigger the GetDataByValue(TValue)
method on the dropdown list and return the selected value.
@using Syncfusion.Blazor.DropDowns;
<div class="button">
<button @onclick="GetDataByValue">GetDataByValue</button>
</div>
<div class="content">
<SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
</div>
@code {
SfDropDownList<string, Games> DDLObj;
public string GameValue { get; set; } = "Game3";
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
public void GetDataByValue () {
var val = this.DDLObj.Value;
var Data = this.DDLObj.GetDataByValue (val);
Console.WriteLine (Data.ID.ToString());
Console.WriteLine (Data.Text.ToString());
}
}
<style>
.content{
position:relative;
}
</style>
Get List Item
You can retrieve the list items from the dropdown list by using the GetItemsAsync()
method through an instance of the dropdown list. You can bind the click event of a button to the GetItemsAsync()
method of the dropdown list instance. When the button is clicked, it will trigger the GetItemsAsync()
method on the dropdown list and return the list items
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data;
<button @onclick=GetItems>Button</button>
<SfDropDownList @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
@code {
SfDropDownList<string, Games> DDLObj;
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
public async Task GetItems () {
IEnumerable<Games> Items = await this.DDLObj.GetItemsAsync();
foreach(var listItem in Items)
{
Console.WriteLine (listItem.ID);
Console.WriteLine (listItem.Text);
}
}
}