Data Binding in Blazor ListBox component
The ListBox loads the data from local data sources using the DataSource property.
| Fields | Type | Description |
|---|---|---|
Text |
string |
Specifies the display text of each list item. |
Value |
string |
Specifies the hidden data value mapped to each list item that should contain a unique value. |
GroupBy |
string |
Specifies the category under which the list item has to be grouped. |
IconCss |
string |
Specifies the iconCss class that needs to be mapped. |
HtmlAttributes |
string |
Allows additional attributes to configure the elements in various ways to meet the criteria. |
When binding complex data to the ListBox, fields should be mapped correctly. Otherwise, the selected item remains undefined.
Local Data
Local data can be represented by the following ways as described below.
Array of string
The ListBox has support to load array of primitive data such as strings or numbers. Here, both value and text field acts as same.
@using Syncfusion.Blazor.DropDowns
<SfListBox TValue="string[]" DataSource="@Games" TItem="string"></SfListBox>
@code{
public string[] Games = new string[] { "Badminton", "Cricket", "Football", "Golf", "Tennis", "Basket Ball", "Base Ball", "Hockey", "Volley Ball" };
}Output will be shown as
Array of object
The ListBox can generate its list items through an array of object data. For this,
the appropriate columns should be mapped to the Fields property.
In the following example, id and sports column from complex data have been mapped to the Value field and Text field, respectively.
@using Syncfusion.Blazor.DropDowns
<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
<ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
@code {
public List<VehicleData> Vehicles = new List<VehicleData> {
new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
};
public class VehicleData {
public string Text { get; set; }
public string Id { get; set; }
}
}Output will be shown as
Array of complex object
The ListBox can generate its list items through an array of complex data. For this,
the appropriate columns should be mapped to the Fields property.
In the following example, sports.Name column from complex data have been mapped to the Text field.
@using Syncfusion.Blazor.DropDowns
<SfListBox TValue="string[]" DataSource="@SprotsDetails" TItem="SportsData">
<ListBoxFieldSettings Text="Sports.Name" Value="Id" />
</SfListBox>
@code {
public List<SportsData> SprotsDetails = new List<SportsData>
{
new SportsData{ Id = "game0", Sports = new GameData{ Name = "Badminton" } },
new SportsData{ Id = "game1", Sports = new GameData{ Name = "Cricket" } },
new SportsData{ Id = "game2", Sports = new GameData{ Name = "Football" } },
new SportsData{ Id = "game3", Sports = new GameData{ Name = "Golf" } },
new SportsData{ Id = "game4", Sports = new GameData{ Name = "Tennis" } },
new SportsData{ Id = "game5", Sports = new GameData{ Name = "Basket Ball" } },
new SportsData{ Id = "game6", Sports = new GameData{ Name = "Base Ball" } },
new SportsData{ Id = "game7", Sports = new GameData{ Name = "Hockey" } }
};
public class GameData {
public string Name { get; set; }
}
public class SportsData {
public string Id { get; set; }
public GameData Sports { get; set; }
}
}Output will be shown as
Remote Data
The ListBox supports retrieval of data from remote data services with the help of DataManager.
The following sample displays the employee names from Employee table.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfListBox TValue="string[]" TItem="OrderDetails" Query="@RemoteDataQuery">
<SfDataManager Url="https://js.syncfusion.com/demos/Sfervices/Wcf/Northwind.svc/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
<ListBoxFieldSettings Text="CustomerID" Value="CustomerID" />
</SfListBox>
@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; }
}
}Output will be shown as
