We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Thanks for your reply. Unfortunately I was not clear enough regarding my question.
I did not meant the value which corresponds to one of the items from the data source.
I meant the filter text value. The controls allows to type and the items are filtered accordingly. I would like to set the default value for the filter text box.
How can I e.g. set the filter value "Ca" programmatically?
You can try Syncfusion AutoComplete component for your requirement instead of ComboBox component. In AutoComplete component filtering was enabled by default. Please refer to the below shared documentation, code snippet and Online demo for more information.
|
@using Syncfusion.Blazor.DropDowns
<div style="margin:130px auto;width:300px"> <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g.Australia" ShowPopupButton="true" @bind-Value="@ComboFilterText" DataSource="@Countries"> <AutoCompleteFieldSettings Text="Name" Value="Name"></AutoCompleteFieldSettings> </SfAutoComplete> <button @onclick="UpdateFilterValue">Update Filter Value</button> </div>
@code {
public string ComboFilterText;
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" }, };
private void UpdateFilterValue() { ComboFilterText = "Ca"; // Set the filter text value of the Combo Box component } } |
|
|
Documentation: https://blazor.syncfusion.com/documentation/autocomplete/getting-started
Online Demo: https://blazor.syncfusion.com/demos/autocomplete/default-functionalities?theme=fluent
If you plan on using GUID to search for data items, it would be better to use the ComboBox component instead of the AutoComplete component. This is because the AutoComplete component only filters based on the Value field. Please refer to the code snippet shared below for more details.
|
@using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Data
<div style="margin:130px auto;width:300px"> <SfComboBox @ref="comboObj" TValue="Guid?" TItem="Country" Placeholder="e.g.Australia" AllowFiltering="true" Query="@query" @bind-Value="@ComboFilterText" DataSource="@Countries"> <ComboBoxFieldSettings Text="Name" Value="Id"></ComboBoxFieldSettings> <ComboBoxEvents TValue="Guid?" TItem="Country" Filtering="OnFilter"></ComboBoxEvents> </SfComboBox> <button @onclick="UpdateFilterValue">Update Filter Value</button> </div>
@code { SfComboBox<Guid?, Country> comboObj { get; set; } public Guid? ComboFilterText; public Query query { get; set; } = new Query(); public class Country { public Guid? Id { get; set; } public string Name { get; set; } public string Code { get; set; } }
List<Country> Countries = new List<Country> { new Country() { Id = Guid.NewGuid(), Name = "Australia", Code = "AU" }, new Country() { Id = Guid.NewGuid(), Name = "Bermuda", Code = "BM" }, new Country() { Id = Guid.NewGuid(), Name = "Canada", Code = "CA" }, new Country() { Id = Guid.NewGuid(), Name = "Cameroon", Code = "CM" }, };
private void UpdateFilterValue() { query = new Query().Where("Name", "startswith", "Ca"); // Set the filter query of the Combo Box component } private async Task OnFilter(FilteringEventArgs args) { args.PreventDefaultAction = true; var query = new Query().Where(new WhereFilter() { Field = "Name", Operator = "startswith", value = args.Text, IgnoreCase = true }); query = !string.IsNullOrEmpty(args.Text) ? query : new Query(); await comboObj.FilterAsync(Countries, query); } } |
In the above code, we have updated the filtering result by updating the query property to the component via a button click. Therefore, if you open the popup after clicking the button, it will only show the filtered results as per your requirement.
Additionally, if you intend to perform filtering by entering text into the ComboBox, you can use custom filtering to filter the data items based on the input text.
|
|
Documentation: https://blazor.syncfusion.com/documentation/combobox/filtering#custom-filtering
