Selection in Blazor DropDown List Component

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.

CSHTML

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

CSHTML

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

Blazor DropDownList with pre-select value

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.

CSHTML

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

Blazor DropDownList with pre-select value before

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.

CSHTML

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

CSHTML

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

CSHTML

@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"},
  };
}

Blazor DropDownList with bind-index

Get selected item by value

Get the entire object belonging to the value selected in the component using the GetDataByValue method.

CSHTML

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

CSHTML

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

CSHTML

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

RAZOR

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

}

Blazor DropDownList with dynamic focus in and out

While focusing and focus out the following event get triggered.

Focus event

The Focus event will trigger when the component gets focused.

CSHTML

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

CSHTML

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

RAZOR

@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

RAZOR

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

Selection in Dropdown List

Get selected value

Preselected value on OnInitializedAsync

Programmatically change the selected value

ValueChange event

OnValueSelect event

Preselect value with index

Get selected item by value

Focus the next component on selection

Programmatically trigger onChange event

Programmatically focus in and focus out the component

Focus event

Blur event

Get Data by value

Get List Item