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

Set default value

Hi, how do we set a default value of the autocomplete control?  We need to use an Id rather than the Text so not as simple as just setting a text value.


Thanks,

Alex


2 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team November 15, 2022 03:53 AM UTC

In AutoCompleteFieldSettings, you can map the ID to the value property and assign the ID value to the binding variable for initial value binding. To display text, use the Text property, which maps the text column from the data table for each list item.


Also, if you map the ID to the value property, the filtering is done based on the ID value. If you want to filter the data based on the text property, you can use custom filtering.


@page "/"

 

@using Syncfusion.Blazor.DropDowns

@using Syncfusion.Blazor.Data

 

<SfAutoComplete @ref="autoObj" TValue="string" TItem="Country" Placeholder="e.g. Australia" @bind-Value="@AutoVal" DataSource="@Countries" Width="300px">

    <AutoCompleteFieldSettings Text="Name" Value="Id"></AutoCompleteFieldSettings>

    <AutoCompleteEvents TValue="string" TItem="Country" Filtering="OnFilter"></AutoCompleteEvents>

</SfAutoComplete>

 

@code {

    SfAutoComplete<string, Country> autoObj;

 

    public string AutoVal = "CA";

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Id { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Id = "AU" },

        new Country() { Name = "Bermuda", Id = "BM" },

        new Country() { Name = "Canada", Id = "CA" },

        new Country() { Name = "Cameroon", Id = "CM" },

    };

    private async Task OnFilter(FilteringEventArgs args)

    {

     //Custom Filtering

        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 autoObj.FilterAsync(Countries, query);

    }

}


Documentation :


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Data_Binding_in_Blazor_AutoComplete-465674600



AL Alex November 15, 2022 06:02 PM UTC

Thanks for the sample helped us get the solution


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon