Filtering in ListBox
18 Dec 20233 minutes to read
The ListBox has built-in support to filter data items when AllowFiltering is enabled. The filter operation starts as soon as you start typing characters in the search box. Default value of AllowFiltering is false
.
The following code demonstrates the filtering functionality in ListBox component.
@using Syncfusion.Blazor.DropDowns
<SfListBox TValue="string[]" DataSource="@CountryData" TItem="CountryCode" AllowFiltering=true>
<ListBoxFieldSettings Text="Name" Value="Code" />
</SfListBox>
@code {
public List<CountryCode> CountryData = new List<CountryCode> {
new CountryCode{ Name = "Australia", Code = "AU" },
new CountryCode{ Name = "Bermuda", Code = "BM" },
new CountryCode{ Name = "Canada", Code = "CA" },
new CountryCode{ Name = "Cameroon", Code = "CM" },
new CountryCode{ Name = "Denmark", Code = "DK" },
new CountryCode{ Name = "France", Code = "FR" },
new CountryCode{ Name = "Finland", Code = "FI" },
new CountryCode{ Name = "Germany", Code = "DE" },
new CountryCode{ Name = "Hong Kong", Code = "HK" }
};
public class CountryCode {
public string Name { get; set; }
public string Code { get; set; }
}
}
Filter type
You can use FilterType property to specify on which filter type needed to be considered on the search action of the component. The available FilterType
and its supported data types are:
FilterType | Description |
---|---|
StartsWith | Checks whether a value begins with the specified value. |
EndsWith | Checks whether a value ends with specified value. |
Contains | Checks whether a value contained with specified value. |
In the following example, EndsWith
filter type has been mapped to the FilterType
property.
@using Syncfusion.Blazor.DropDowns
<SfListBox TValue="string" TItem="Games" FilterType="FilterType.EndsWith" AllowFiltering=true DataSource="@LocalData">
<ListBoxFieldSettings Value="ID" Text="Game"></ListBoxFieldSettings>
</SfListBox>
@code {
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" },
};
}