Filtering in Dropdown List
13 Dec 202424 minutes to read
The DropDownList 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.
Local data
The following code demonstrates the filtering functionality with local data in the DropDownList component.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Country" Placeholder="Select a country" AllowFiltering="true" DataSource="@Countries" Width="300px">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
</SfDropDownList>
@code{
public class Country
{
public string Name { get; set; }
public string Code { get; set; }
}
private 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" },
new Country() { Name = "Denmark", Code = "DK" },
new Country() { Name = "France", Code = "FR" },
new Country() { Name = "Finland", Code = "FI" },
new Country() { Name = "Germany", Code = "DE" },
new Country() { Name = "Greenland", Code = "GL" },
new Country() { Name = "Hong Kong", Code = "HK" },
new Country() { Name = "India", Code = "IN" },
new Country() { Name = "Italy", Code = "IT" },
new Country() { Name = "Japan", Code = "JP" },
new Country() { Name = "Mexico", Code = "MX" },
new Country() { Name = "Norway", Code = "NO" },
new Country() { Name = "Poland", Code = "PL" },
new Country() { Name = "Switzerland", Code = "CH" },
new Country() { Name = "United Kingdom", Code = "GB" },
new Country() { Name = "United States", Code = "US" },
};
}
Remote data
For Remote data, each key press, filter action request is made at the server end.
The below code demonstrates the filtering functionality with ODataAdaptor in the DropDownList component with help of Query property.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<SfDropDownList TValue="string" TItem="OrderDetails" PopupHeight="230px" Placeholder="Select a name" Query="@RemoteDataQuery" AllowFiltering=true Width="300px">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Orders" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"/>
<DropDownListFieldSettings Text="CustomerID" Value="CustomerID"/>
</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; }
}
}
Debounce delay
You can use the DebounceDelay property for filtering, enabling you to set a delay in milliseconds. This functionality helps reduce the frequency of filtering as you type, enhancing performance and responsiveness for a smoother user experience.By default, a DebounceDelay of 300ms is set. If you wish to disable this feature entirely, you can set it to 0ms.
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
<label class="example-label">Select a country</label>
<SfDropDownList TValue="string" TItem="Countries" Placeholder="e.g. Australia" AllowFiltering="true" DebounceDelay="@NumericValue" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code" />
</SfDropDownList>
<label class="example-label">Debounce Delay : </label>
<SfNumericTextBox Width="50%" TValue="int" Format="n0" @bind-Value="@NumericValue" Min=1></SfNumericTextBox>
@code{
private int NumericValue = 300;
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
private 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" }
};
}
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
<SfDropDownList TValue="string" TItem="Games" Width="300px" FilterType="FilterType.EndsWith" AllowFiltering=true Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Game"></DropDownListFieldSettings>
</SfDropDownList>
@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" },
};
}
Case sensitive filtering
The Data items can be filtered with or without case sensitivity using the DataManager. This can be done by passing the fourth optional parameter IgnoreCase of the Where clause.
The following example shows how to perform case-sensitive filter.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" @ref="ddlObj" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query" AllowFiltering=true>
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Employees" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="FirstName" Value="LastName"></DropDownListFieldSettings>
<DropDownListEvents TValue=string TItem="OrderDetails" Filtering="OnFiltering"></DropDownListEvents>
</SfDropDownList>
@code {
SfDropDownList<string, OrderDetails> ddlObj;
public Query Query = new Query().Select(new List<string> { "FirstName", "LastName" }).Take(7).RequiresCount();
SfDropDownList<string, Countries> ddlObj { get; set; }
public class OrderDetails
{
public int? EmployeeID { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string Title { get; set; }
public string TitleOfCourtesy { get; set; }
public DateTime? BirthDate { get; set; }
public DateTime? HireDate { get; set; }
public string Address { get; set; }
public int? Extension { get; set; }
public int? Phone { get; set; }
}
public async Task OnFiltering(FilteringEventArgs args)
{
args.PreventDefaultAction = true;
var query = new Query().Where(new WhereFilter() { Field = "LastName", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
await ddlObj.FilterAsync(ddlObj.DataSource, query);
}
}Filter textbox placeholder
You can use FilterBarPlaceholder to accept the value to be displayed as a watermark text on the filter bar TextBox. FilterBarPlaceholder is applicable when AllowFiltering is used as true. FilterBarPlaceholder is depends on AllowFiltering property.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" TItem="Countries" AllowFiltering=true FilterBarPlaceholder="e.g: aus" Placeholder="Select a country" Width="300px" DataSource="@Country">
<DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
</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" },
};
}
Custom filtering
DropDownList component filter queries can be customized using Filtering event. You can also filter the text in multiple columns in the data source.
In the below sample demonstration, filter the data using its FirstName or LastName field. Hence in the Filtering event, Predicate is used with or condition for filtering both the fields.
For instance , the data source item consists of FirstName as Nancy and LastName as Davalio. But you can filter the data by typing the N or D character and it will showcase the Nancy(FirstName field) in the popup.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" @ref="ddlObj" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query" AllowFiltering=true>
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Employees" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="FirstName" Value="LastName"></DropDownListFieldSettings>
<DropDownListEvents TValue=string TItem="OrderDetails" Filtering="OnFiltering"></DropDownListEvents>
</SfDropDownList>
@code {
SfDropDownList<string, OrderDetails> ddlObj;
public Query Query = new Query().Select(new List<string> { "FirstName", "LastName" }).Take(7).RequiresCount();
SfDropDownList<string, Countries> ddlObj { get; set; }
public class OrderDetails
{
public int? EmployeeID { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string Title { get; set; }
public string TitleOfCourtesy { get; set; }
public DateTime? BirthDate { get; set; }
public DateTime? HireDate { get; set; }
public string Address { get; set; }
public int? Extension { get; set; }
public int? Phone { get; set; }
}
public async Task OnFiltering(FilteringEventArgs args)
{
args.PreventDefaultAction = true;
var query = new Query().Where(new WhereFilter() { Field = "LastName", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
await ddlObj.FilterAsync(ddlObj.DataSource, query);
}
}
Multi column filtering
In the built-in Syncfusion® Blazor theme files, support for multi column can be enabled by adding e-multi-column class in the CssClass property.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" Width="300px" TItem="Countries" Placeholder="e.g. Australia" PopupHeight="200px" CssClass="e-multi-column" DataSource="@Country"AllowFiltering="true">
<DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings>
<DropDownListTemplates TItem="Countries">
<HeaderTemplate>
<table><tr><th>Name</th><th>Position</th></tr></table>
</HeaderTemplate>
<ItemTemplate>
<table><tbody><tr>
<td>@((context as Countries).Name)</td>
<td >@((context as Countries).Job)</td>
</tr> </tbody></table>
</ItemTemplate>
</DropDownListTemplates>
</SfDropDownList>
@code{
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
public string Job { get; set; }
}
List<Countries> Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU",Job= "Team Lead" },
new Countries() { Name = "Bermuda", Code = "BM",Job="Developer" },
new Countries() { Name = "Canada", Code = "CA",Job="CEO" },
new Countries() { Name = "Cameroon", Code = "CM" ,Job="HR" },
new Countries() { Name = "Denmark", Code = "DK",Job="Product Manager" },
new Countries() { Name = "France", Code = "FR",Job="Developer" },
new Countries() { Name = "Finland", Code = "FI",Job="Team Lead" },
new Countries() { Name = "Germany", Code = "DE",Job="Product Manager" },
new Countries() { Name = "Greenland", Code = "GL",Job="Developer" },
new Countries() { Name = "Hong Kong", Code = "HK",Job="CEO" },
new Countries() { Name = "India", Code = "IN",Job="HR" },
new Countries() { Name = "Italy", Code = "IT",Job="Team Lead" },
new Countries() { Name = "Japan", Code = "JP",Job="Developer" },
new Countries() { Name = "Mexico", Code = "MX",Job="Product Manager" },
new Countries() { Name = "Norway", Code = "NO",Job="HR" },
new Countries() { Name = "Poland", Code = "PL",Job="Team Lead" },
new Countries() { Name = "Switzerland", Code = "CH",Job="Product Manager" },
new Countries() { Name = "United Kingdom", Code = "GB",Job="CEO" },
new Countries() { Name = "United States", Code = "US",Job="Developer" },
};
}
You can achieve multiple column(field) filtering by passing the List of predicates to the And or Or methods of WhereFilters.
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Data;
@using System.IO
<SfDropDownList @ref="ddlObj" AllowFiltering="true" TValue="Moc" TItem="Moc" DataSource="@data" CssClass="e-multi-column">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListEvents Filtering="OnFiltering" TValue="Moc" TItem="Moc"></DropDownListEvents>
<DropDownListTemplates TItem="Moc">
<HeaderTemplate>
<table><tr><th>ID</th><th>Text</th></tr></table>
</HeaderTemplate>
<ItemTemplate Context="itemContext">
<table><tbody><tr>
@if (!string.IsNullOrEmpty((itemContext as Moc).ID))
{
<td><span>@( (itemContext as Moc).ID )</span></td>
<td><span>@( (itemContext as Moc).Text)</span></td>
}
</tr> </tbody></table>
</ItemTemplate>
</DropDownListTemplates>
</SfDropDownList>
@code{
SfDropDownList<Moc, Moc> ddlObj;
public Query query { get; set; }
public class Moc
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Moc> data = new List<Moc>
{
new Moc() { ID= "12H", Text= "American Football" },
new Moc() { ID= "14G", Text= "Badminton" },
new Moc() { ID= "17F", Text= "Basketball" }
};
public async Task OnFiltering(FilteringEventArgs args)
{
args.PreventDefaultAction = true;
var orWhere = WhereFilter.Or(new List<WhereFilter> {
new WhereFilter() { Field = "Text", Operator = "contains", value = args.Text, IgnoreCase = true },
new WhereFilter() { Field = "ID", Operator = "contains", value = args.Text, IgnoreCase = true }
});
var query = new Query().Where(orWhere);
query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
await ddlObj.FilterAsync(data, query);
}
}
Minimum filter length
When filtering the list items, you can set the limit for character count to raise a remote request and fetch filtered data on the DropDownList. This can be done by manual validation by using the Filtering event arguments within the Filtering event handler.
In the following example, the remote request does not fetch the search data until the search key contains three characters.
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TValue="string" @ref="ddlObj" TItem="OrderDetails" Placeholder="Select a customer" Query="@Query" AllowFiltering=true Width="300px">
<SfDataManager Url="https://blazor.syncfusion.com/services/production/api/Employees" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain=true></SfDataManager>
<DropDownListFieldSettings Text="FirstName" Value="LastName"></DropDownListFieldSettings>
<DropDownListEvents TValue=string TItem="OrderDetails" Filtering="OnFiltering"></DropDownListEvents>
</SfDropDownList>
@code {
SfDropDownList<string, OrderDetails> ddlObj;
public Query Query = new Query().Select(new List<string> { "FirstName", "LastName" }).Take(7).RequiresCount();
public class OrderDetails
{
public int? EmployeeID { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string Title { get; set; }
public string TitleOfCourtesy { get; set; }
public DateTime? BirthDate { get; set; }
public DateTime? HireDate { get; set; }
public string Address { get; set; }
public int? Extension { get; set; }
public int? Phone { get; set; }
}
public async Task OnFiltering(FilteringEventArgs args)
{
args.PreventDefaultAction = true;
// load overall data when search key empty.
if (args.Text == "") await ddlObj.FilterAsync(ddlObj.DataSource);
// restrict the remote request until search key contains 3 characters.
else if (args.Text.Length < 3) { return; }
else
{
var query = new Query().Where(new WhereFilter() { Field = "FirstName", value = args.Text, Operator = "contains", IgnoreAccent = true, IgnoreCase = true });
query = !string.IsNullOrEmpty(args.Text) ? query : new Query();
await ddlObj.FilterAsync(ddlObj.DataSource, query);
}
}
}