Set default value

[Alex]

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

[UdhayaKumar Duraisamy]

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 :

• API – Text Property

• API – Value Property

• Custom Filtering

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

[Alex]

Thanks for the sample helped us get the solution