diff --git a/blazor/listbox/filtering.md b/blazor/listbox/filtering.md index 60e6c32448..4aa03c4357 100644 --- a/blazor/listbox/filtering.md +++ b/blazor/listbox/filtering.md @@ -63,24 +63,83 @@ In the following example, the `EndsWith` filter type is assigned to the `FilterT @code { - public class Games - { - public string ID { get; set; } - public string Game { get; set; } + public class Games { + public string ID { get; set; } + public string Game { get; set; } } - List LocalData = new List { - 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 List LocalData = new List { + 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" }, + }; } ``` -![Blazor ListBox using the EndsWith filter type](images/blazor-listbox-filter-type.webp) \ No newline at end of file +![Blazor ListBox using the EndsWith filter type](images/blazor-listbox-filter-type.webp) + +## Custom filtering + +Customize filter queries using the [`Filtering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ListBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ListBoxEvents_2_Filtering) event. This event is triggered when a user types a character in the filter input, and it is available when the [`AllowFiltering`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_AllowFiltering) property is enabled. + +In the following example, the filtering action is customized by using the [`FilteringEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html). The default filtering action is prevented by setting the [`PreventDefaultAction`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilteringEventArgs.html#Syncfusion_Blazor_DropDowns_FilteringEventArgs_PreventDefaultAction) property to `true`, and the filtered data is updated using the [`FilterAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html#Syncfusion_Blazor_DropDowns_SfListBox_2_FilterAsync_System_Collections_Generic_IEnumerable__1__Syncfusion_Blazor_Data_Query_Syncfusion_Blazor_DropDowns_FieldSettingsModel_) method. + +```cshtml +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.DropDowns + + + + + + +@code { + private SfListBox ListBoxObj; + + public List CountryData = new List + { + 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" } + }; + + private async Task OnFiltering(FilteringEventArgs args) + { + args.PreventDefaultAction = true; + + var query = new Query().Where(new WhereFilter + { + Field = "Name", + Operator = "contains", + value = args.Text, + IgnoreCase = true + }); + + query = !string.IsNullOrEmpty(args.Text) ? query : new Query(); + + await ListBoxObj.FilterAsync(CountryData, query); + } + + public class CountryCode + { + public string Name { get; set; } + + public string Code { get; set; } + } +} +``` + +![Blazor ListBox with custom filtering](images/blazor-listbox-custom-filtering.webp) \ No newline at end of file diff --git a/blazor/listbox/images/blazor-listbox-custom-filtering.webp b/blazor/listbox/images/blazor-listbox-custom-filtering.webp new file mode 100644 index 0000000000..0d2ac62fb1 Binary files /dev/null and b/blazor/listbox/images/blazor-listbox-custom-filtering.webp differ