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. Image for the cookie policy date

How to set the combo box filter value programatically

Hello,

is there a way to set the filter value of the combo box programmatically.

I am using the combo box in a data grid. If the user starts typing a cell will switch into edit mode automatically. The character which the user typed should be the initial value for the combo box filter.

I am struggling to set the filter value. The value property seems to be bound to the datasource and does not allow to set any string filter values.



9 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team March 29, 2023 04:49 PM UTC

Based on the information you shared, we suspect that you are attempting to programmatically set a value for the combobox component. To fulfill this requirement, you can utilize the @bind-Value property. For further information, please refer to the documentation we have provided below.


@using Syncfusion.Blazor.DropDowns

 

<div style="margin:130px auto;width:300px">

    <SfComboBox TValue="string" TItem="Country" AllowFiltering="true" Placeholder="e.g. Australia" @bind-Value="@ComboVal" DataSource="@Countries">

        <ComboBoxFieldSettings Value="Name"></ComboBoxFieldSettings>

    </SfComboBox>

 

    <button @onclick="UpdateValue">Update Value</button>

</div>

 

@code {

 

    public string ComboVal;

 

    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 UpdateValue()

    {

        ComboVal = "Canada"; // Set the value of the Combo Box component

    }

}


In the above code, the Value property of the Combo Box component is bound to the ComboVal property in the component using the @bind-Value directive.


When the user clicks on the "Set Combo Value" button, the SetComboValue method is called, which updates the ComboVal property with the new value "Canada". This will update the value of the Combo Box component in the UI with the new value.


Documentation: https://blazor.syncfusion.com/documentation/combobox/data-binding



DK Daniel Koffler March 29, 2023 06:40 PM UTC

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?







UD UdhayaKumar Duraisamy Syncfusion Team March 30, 2023 04:39 PM UTC

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



DK Daniel Koffler April 3, 2023 06:47 AM UTC

Thank you. My primary key (TValue) however is a GUID. How can I work around this?



UD UdhayaKumar Duraisamy Syncfusion Team April 4, 2023 06:41 AM UTC

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.