Data Binding in Dropdown List
4 Nov 202524 minutes to read
The DropDown List component supports binding data from local collections and remote services. Use the DataSource property to bind local data or configure a DataManager for remote data operations. Map fields using the component’s FieldSettings to specify which properties supply item text and value.
- TItem - Specifies the type of the data items bound to the component (the model of each item). Use TValue to specify the value type selected by the component. Configure Fields to map Text and Value from the data model.
Binding local data
The DropDown List loads data from local sources through the DataSource property. Supported types include Array of primitive type, Array of object, List of primitive type, List of object, ObservableCollection, ExpandoObject, and DynamicObject. Map data fields via FieldSettings when binding objects.
@using Syncfusion.Blazor.DropDowns
<p>DropDownList value is:<strong>@DropVal</strong></p>
<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Country" Width="300px" @bind-Value="@DropVal" DataSource="@Countries">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string DropVal = "Canada";
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Country> Countries = new List<Country>
{
new Country() { Name = "Australia", Code = "AU" },
new Country() { Name = "Bermuda", Code = "BM" },
new Country() { Name = "Canada", Code = "CA" },
new Country() { Name = "Cameroon", Code = "CM" },
};
}
DataBound event
The DataBound event triggers after the data source is populated and the popup list is ready. This is useful for post-load logic such as selecting a default item or updating UI state.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TItem="GameFields" TValue="string" DataSource="@Games">
<DropDownListEvents TItem="GameFields" TValue="string" DataBound="@DataBoundHandler" ></DropDownListEvents>
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<GameFields> Games = new List<GameFields>() {
new GameFields(){ ID= "Game1", Text= "American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball" },
new GameFields(){ ID= "Game4", Text= "Cricket" },
};
private void DataBoundHandler(DataBoundEventArgs args)
{
// Here, you can customize your code.
}
}Primitive type
Bind arrays or lists of string, int, double, or bool directly. In these cases, Text and Value map to the primitive values.
The following code demonstrates an array of string values bound to the DropDown List component.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="string" Placeholder="Select a game" DataSource="@data" @bind-Value="MyItem" Width="300px"></SfDropDownList>
@code{
List<string> data = new List<string>() {"One", "Two", "Three"};
public string MyItem { get; set; } = "Two";
}
The following code demonstrates an array of integer values bound to the DropDown List component.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="int?" TItem="int?" Placeholder="Select a game" DataSource="@data" @bind-Value="MyItem" Width="300px"></SfDropDownList>
@code{
List<int?> data = new List<int?>() { 100, 200, 300 };
public int? MyItem { get; set; } = 300;
}
Complex data type
Bind arrays or lists of complex objects and map object properties to display text and value using Fields. Nested properties can be mapped as needed.
In the following example, Code.ID is mapped to DropDownListFieldSettings.Value and Country.CountryID is mapped to DropDownListFieldSettings.Text.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Complex" Placeholder="e.g. Select a country" DataSource="@LocalData" @bind-Value="@CountryValue" Width="300px">
<DropDownListFieldSettings Text="Country.CountryID" Value="Code.ID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string CountryValue { get; set; } = "CM";
public IEnumerable<Complex> LocalData { get; set; } = new Complex().GetData();
public class Code
{
public string ID { get; set; }
}
public class Country
{
public string CountryID { get; set; }
}
public class Complex
{
public Country Country { get; set; }
public Code Code { get; set; }
public List<Complex> GetData()
{
List<Complex> Data = new List<Complex>();
Data.Add(new Complex() { Country = new Country() { CountryID = "Australia" }, Code = new Code() { ID = "AU" } });
Data.Add(new Complex() { Country = new Country() { CountryID = "Bermuda" }, Code = new Code() { ID = "BM" } });
Data.Add(new Complex() { Country = new Country() { CountryID = "Canada" }, Code = new Code() { ID = "CA" } });
Data.Add(new Complex() { Country = new Country() { CountryID = "Cameroon" }, Code = new Code() { ID = "CM" } });
Data.Add(new Complex() { Country = new Country() { CountryID = "Denmark" }, Code = new Code() { ID = "DK" } });
Data.Add(new Complex() { Country = new Country() { CountryID = "France" }, Code = new Code() { ID = "FR" } });
return Data;
}
}
}
Expando object binding
Bind ExpandoObject data to the DropDown List component. Ensure the dynamic member names match the field mappings configured in FieldSettings.
@using Syncfusion.Blazor.DropDowns
@using System.Dynamic
<SfDropDownList TItem="ExpandoObject" TValue="string" PopupHeight="230px" Placeholder="Select a vehicle" DataSource="@VehicleData" @bind-Value="@VehicleValue" Width="300px">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public string VehicleValue { get; set; } = "1011";
public List<ExpandoObject> VehicleData { get; set; } = new List<ExpandoObject>();
protected override void OnInitialized()
{
VehicleData = Enumerable.Range(1, 15).Select((x) =>
{
dynamic d = new ExpandoObject();
d.ID = (1000 + x).ToString();
d.Text = (new string[] { "Hennessey Venom", "Bugatti Chiron", "Bugatti Veyron Super Sport", "SSC Ultimate Aero", "Koenigsegg CCR", "McLaren F1", "Aston Martin One- 77", "Jaguar XJ220", "McLaren P1", "Ferrari LaFerrari", "Mahindra Jaguar", "Hyundai Toyota", "Jeep Volkswagen", "Tata Maruti Suzuki", "Audi Mercedes Benz" }[x - 1]);
return d;
}).Cast<ExpandoObject>().ToList<ExpandoObject>();
}
}
Observable collection binding
Bind an ObservableCollection to reflect add/remove updates in the DropDown List automatically. This is useful when items change over time and the UI must stay in sync.
@using Syncfusion.Blazor.DropDowns
@using System.Collections.ObjectModel;
<SfDropDownList TValue="string" TItem="Colors" PopupHeight="230px" Placeholder="Select a color" DataSource="@ColorsData" @bind-Value="@ColorValue">
<DropDownListFieldSettings Text="Color" Value="Code"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string ColorValue { get; set; } = "#75523C";
public class Colors
{
public string Code { get; set; }
public string Color { get; set; }
}
private ObservableCollection<Colors> ColorsData = new ObservableCollection<Colors>()
{
new Colors() { Color = "Chocolate", Code = "#75523C" },
new Colors() { Color = "CadetBlue", Code = "#3B8289" },
new Colors() { Color = "DarkOrange", Code = "#FF843D" },
new Colors() { Color = "DarkRed", Code = "#CA3832"},
new Colors() { Color = "Fuchsia", Code = "#D44FA3" },
new Colors() { Color = "HotPink", Code = "#F23F82" },
new Colors() { Color = "Indigo", Code = "#2F5D81" },
new Colors() { Color = "LimeGreen", Code = "#4CD242" },
new Colors() { Color = "OrangeRed", Code = "#FE2A00" },
new Colors() { Color = "Tomato", Code = "#FF745C" },
new Colors() { Color = "Brown", Code = "#A52A2A" },
new Colors() { Color = "Maroon", Code = "#800000" },
new Colors() { Color = "Green", Code = "#008000" },
new Colors() { Color = "Pink", Code = "#FFC0CB" },
new Colors() { Color = "Purple", Code = "#800080" }
};
}
Dynamic object binding
Bind DynamicObject data to the DropDown List component. As with ExpandoObject, ensure member names correspond to the mapped Text and Value fields.
@using Syncfusion.Blazor.DropDowns
@using System.Dynamic
<SfDropDownList TValue="string" TItem="DynamicDictionary" Placeholder="Select a name" DataSource="@Orders" @bind-Value="@NameValue" Width="300px">
<DropDownListFieldSettings Text="CustomerName" Value="CustomerName"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public string NameValue { get; set; } = "Margaret";
public List<DynamicDictionary> Orders = new List<DynamicDictionary>() { };
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 15).Select((x) =>
{
dynamic d = new DynamicDictionary();
d.OrderID = 1000 + x;
d.CustomerName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Anne", "Nige", "Fuller", "Dodsworth", "Leverling", "Callahan", "Suyama", "Davolio" }[x - 1]);
return d;
}).Cast<DynamicDictionary>().ToList<DynamicDictionary>();
}
public class DynamicDictionary : System.Dynamic.DynamicObject
{
Dictionary<string, object> dictionary = new Dictionary<string, object>();
public override bool TryGetMember(GetMemberBinder binder, out object result)
{
string name = binder.Name;
return dictionary.TryGetValue(name, out result);
}
public override bool TrySetMember(SetMemberBinder binder, object value)
{
dictionary[binder.Name] = value;
return true;
}
//The GetDynamicMemberNames method of DynamicObject class must be overridden and return the property names to perform data operation and editing while using DynamicObject.
public override System.Collections.Generic.IEnumerable<string> GetDynamicMemberNames()
{
return this.dictionary?.Keys;
}
}
}
Enum data binding
Bind enum values to the DropDown List. The following example shows how to display a description for each enumeration value.
@using Syncfusion.Blazor.DropDowns;
<SfDropDownList TValue="Values" TItem="string" Placeholder="e.g. Australia" DataSource="@EnumValues" @bind-Value="@ddlVal" Width="300px">
</SfDropDownList>
@code{
public string[] EnumValues = Enum.GetNames(typeof(Values));
public Values ddlVal { get; set; } = Values.Canada;
public enum Values
{
Australia,
Bermuda,
Canada,
Denmark,
India,
US
}
}
ValueTuple data binding
Bind ValueTuple data to the DropDown List component. The following example shows retrieving a string value from enumeration data using a ValueTuple.
@using Syncfusion.Blazor.DropDowns;
<SfDropDownList TItem="(DayOfWeek, string)" Width="250px" TValue="DayOfWeek"
DataSource="@(Enum.GetValues<DayOfWeek>().Select(e => (e, e.ToString())))">
<DropDownListFieldSettings Value="Item1" Text="Item2" />
</SfDropDownList>
Binding remote data
The DropDown List can load data from remote services using the DataSource property in combination with DataManager. Use the Query property to shape, filter, sort, and page data from the service.
- DataManager.Url - Defines the service endpoint used to fetch data.
- DataManager.Adaptor - Defines how requests and responses are processed. By default, the ODataAdaptor is used for remote binding.
- Syncfusion.Blazor.Data provides built-in adaptors to interact with specific service endpoints.
OnActionBegin event
The OnActionBegin event triggers before a remote request is initiated. Use it to adjust the query or set a loading indicator.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="OrderDetails" Query="@RemoteDataQuery">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<DropDownListEvents TValue="string" TItem="OrderDetails" OnActionBegin="@OnActionBeginhandler"></DropDownListEvents>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
private void OnActionBeginhandler(ActionBeginEventArgs args)
{
// Here, you can customize your code.
}
}OnActionComplete event
The OnActionComplete event triggers after data is fetched successfully. Handle it to apply post-load logic or update UI state.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="OrderDetails" Query="@RemoteDataQuery">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<DropDownListEvents TValue="string" TItem="OrderDetails" OnActionBegin="@OnActionBeginhandler"></DropDownListEvents>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
private void OnActionBeginhandler(ActionBeginEventArgs args)
{
// Here, you can customize your code.
}
}OnActionFailure event
The OnActionFailure event triggers when a remote request fails. Use it to log errors and provide fallback messaging (for example, show NoRecordsTemplate content).
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="OrderDetails" Query="@RemoteDataQuery">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
<DropDownListEvents TValue="string" TItem="OrderDetails" OnActionFailure="@OnActionFailurehandler"></DropDownListEvents>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public Query RemoteDataQuery = new Query().Select(new List<string> { "CustomerID" }).Take(6).RequiresCount();
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
private void OnActionFailurehandler(Exception args)
{
// Here, you can customize your code.
}
}OData v4 services
The OData v4 Adaptor enables consumption and manipulation of OData v4 services. The following sample displays the first six customer records from the Customers table of the Northwind data service.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query" @bind-Value="@OrderValue" Width="300px">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string OrderValue { get; set; } = "TOMSP";
public Query Query = new Query().Select(new List<string> { "CustomerID", "OrderID" }).Take(6).RequiresCount();
public class OrderDetails
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string ShipCity { get; set; }
public bool Verified { get; set; }
public DateTime? OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipCountry { get; set; }
public DateTime? ShippedDate { get; set; }
public string ShipAddress { get; set; }
}
}
Web API adaptor
The Web API Adaptor interacts with Web API endpoints that follow OData query semantics. WebApiAdaptor extends the ODataAdaptor, so the endpoint must understand OData-formatted queries.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="EmployeeData" Placeholder="Select a Employee" Query="@Query" @bind-Value="@EmployeeValue" Width="300px">
<SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Employees" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="FirstName" Value="FirstName"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public string EmployeeValue { get; set; } = "Janet Leverling";
public Query Query = new Query();
public class EmployeeData
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string Designation { get; set; }
public string Country { get; set; }
}
}
Custom adaptor
The SfDataManager has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the DropDownList component.
For implementing custom data binding in the DropDownList, the DataAdaptor class is used. This abstract class acts as a base class for the custom adaptor.
The DataAdaptor abstract class has both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. Following are the method signatures present in this class.
public abstract class DataAdaptor
{
/// <summary>
/// Performs data Read operation synchronously.
/// </summary>
public virtual object Read(DataManagerRequest dataManagerRequest, string key = null)
/// <summary>
/// Performs data Read operation asynchronously.
/// </summary>
public virtual Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string key = null)
}In a custom adaptor, return the data collection (and count when needed) based on the incoming DataManagerRequest. This approach is useful for custom back ends or complex filtering/paging scenarios.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" Query="RemoteDataQuery" TItem="OrdersDetails" >
<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor" ></SfDataManager>
<DropDownListFieldSettings Value="OrderID" Text="CustomerID"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public Query RemoteDataQuery = new Query().Select(new List<string> { "OrderID" }).Take(50).RequiresCount();
public class OrdersDetails
{
public int OrderID { get; set; }
public string CustomerID { get; set; }
// Example static method to get all records
public static List<OrdersDetails> GetAllRecords()
{
var records = new List<OrdersDetails>();
for (int i = 1; i <= 250; i++)
{
records.Add(new OrdersDetails
{
OrderID = i,
CustomerID = $"Customer {i}"
});
}
return records;
}
}
public class CustomAdaptor : DataAdaptor
{
static readonly HttpClient client = new HttpClient();
public static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
{
IEnumerable<OrdersDetails> DataSource = order;
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = DataOperations.PerformSearching(DataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = DataOperations.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = DataOperations.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
}
int count = DataSource.Cast<OrdersDetails>().Count();
if (dm.Skip != 0)
{
DataSource = DataOperations.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = DataOperations.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
}
}
}Offline mode
To reduce network requests, load all data at initialization and process actions on the client by setting the Offline property on DataManager. Use this for datasets that fit in memory and do not change frequently.
<SfDropDownList TValue="string" TItem="EmployeeData" Placeholder="Select a Employee" Query="@Query">
<SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Employees" Offline=true Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public Query Query = new Query();
public class EmployeeData
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string Designation { get; set; }
public string Country { get; set; }
}
}
Entity Framework
Follow these steps to consume data from the Entity Framework in the DropDown List component.
Create DBContext class
Create a DbContext class (OrderContext) to connect to Microsoft SQL Server.
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EFDropDown.Shared.Models;
namespace EFDropDown.Shared.DataAccess
{
public class OrderContext : DbContext
{
public virtual DbSet<Shared.Models.Order> Orders { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
if (!optionsBuilder.IsConfigured)
{
optionsBuilder.UseSqlServer(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=D:\Blazor\DropDownList\EFDropDown\Shared\App_Data\NORTHWND.MDF;Integrated Security=True;Connect Timeout=30");
}
}
}
}Create data access layer to perform data operation
Create a data access class (OrderDataAccessLayer) to retrieve records from the database.
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using EFDropDown.Shared.Models;
namespace EFDropDown.Shared.DataAccess
{
public class OrderDataAccessLayer
{
OrderContext db = new OrderContext();
//To Get all Orders details
public DbSet<Order> GetAllOrders()
{
try
{
return db.Orders;
}
catch
{
throw;
}
}
}
}Creating web API controller
Create a Web API controller to expose the data for the DropDown List to consume.
using EFDropDown.Shared.DataAccess;
using EFDropDown.Shared.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNetCore.Http;
namespace EFDropDown.Controllers
{
[Route("api/[controller]")]
[ApiController]
//TreeGrid
public class DefaultController : ControllerBase
{
OrderDataAccessLayer db = new OrderDataAccessLayer();
[HttpGet]
public object Get()
{
IQueryable<Order> data = db.GetAllOrders().AsQueryable();
var count = data.Count();
var queryString = Request.Query;
if (queryString.Keys.Contains("$inlinecount"))
{
StringValues Skip;
StringValues Take;
int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0;
int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count();
return new { Items = data.Skip(skip).Take(top), Count = count };
}
else
{
return data;
}
}
}
}Configure DropDownList component using Web API adaptor
Configure the DropDown List to interact with the Web API using SfDataManager and the WebApiAdaptor. Ensure the API supports OData-style query parameters.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Order" Placeholder="Select a Country">
<SfDataManager Url="api/Default" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
<DropDownListFieldSettings Text="ShipCountry" Value="OrderID"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public class Order
{
public int? OrderID { get; set; }
public string ShipCountry { get; set; }
}
}Adding new items
Use AddItemsAsync to add new items to the popup list without altering the underlying data source. To persist new items, also update your bound collection or remote data source.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons
<div>
<SfDropDownList @ref="ddlObj" TValue="string" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div>
<SfButton Content="Click to add a new item" OnClick="OnBtnClick"></SfButton>
</div>
@code {
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" },
};
public async Task OnBtnClick()
{
await this.ddlObj.AddItemsAsync(new List<Games> { new Games() { ID = "Game11", Game = "Tennis" } });
}
}
Getting datasource of dropdown list
Getting datasource using instance
To retrieve the data source from a Syncfusion® Blazor DropDownList component, you can access the DataSource property of the component instance. An example of how this can be done is by binding the component to a list of objects as its data source and then, in the button click event, calling the GetDataSource method which in turn retrieves the data source by accessing the DataSource property of the DropDownList instance.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList @ref="DropdownlistObj" TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</SfDropDownList>
<button class="e-btn apply-limit" @onclick="@ApplyRange">Get the datasource</button>
@code {
public SfDropDownList<string, Countries> DropdownlistObj;
public string DropVal;
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" },
};
public void ApplyRange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
var data = DropdownlistObj.DataSource;
}
}Getting datasource using variable
To obtain the data source for a Syncfusion® Blazor DropDownList using a variable, you can define a variable in your component to hold the data source, and then use this variable to access the data source. In this example, the GetDataSource method is triggered when the button is clicked. This method retrieves the data source for the DropDownList by accessing the Countries variable, which holds the list of countries for the DropDownList.
<SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country">
<DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</SfDropDownList>
<button class="e-btn apply-limit" @onclick="@GetDataSource">Get the datasource</button>
@code {
public string DropVal;
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" },
};
public void GetDataSource(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
var data = Country;
}
}