Empty Text with Custom Object Binding

[Ümit Kara]

Hi.

I'm encountering an issue with SfAutoComplete where the initial text in the input box is empty when binding a custom object. The binding works correctly, as I can select items from the list and see the text populate, but on initialization, the bound object's display text is empty.

For additional context, the autocomplete is inside EditTemplate of GridColumn.

<GridColumn Field="@nameof(Flight.Aircraft)" HeaderText="Aircraft" Width="150">
    <Template>
        @((context as Flight).Aircraft.Registration)
    </Template>
    <EditTemplate>
        <SfAutoComplete TValue="Aircraft" TItem="Aircraft" Placeholder="Aircraft" FloatLabelType="FloatLabelType.Always"
                        Value="@((context as Flight).Aircraft)" >
            <SfDataManager AdaptorInstance="@typeof(GenericDataAdaptor<Aircraft>)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
            <AutoCompleteFieldSettings Value="Registration" Text="Registration"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </EditTemplate>
</GridColumn>

Am I missing something? Thanks for help.

[Yohapuja Selvakumaran]

Hi Umit Kara,

Thank you for reaching out to us.

We have reviewed the reported issue and would like to suggest using @bind-Value instead of the Value property in the SfAutoComplete component. The Value property only supports one-way binding, which means that changes to the selected value are not reflected. By using @bind-Value, you can achieve two-way binding, ensuring that the selected value updates correctly.

Here’s an example for your reference:

 

<SfAutoComplete TValue="string" TItem="GameFields" Placeholder="e.g. Basketball" DataSource="@Games" @bind-Value="GameValue">

    <AutoCompleteFieldSettings Value="Text"/>

</SfAutoComplete>

 

@code{

    public string GameValue{get; set;} = "Cricket";

    public class GameFields

    {

        public string ID { get; set; }

        public string Text { get; set; }

    }

    public List<GameFields> Games = new List<GameFields>()

    {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },

        new GameFields(){ ID= "Game5", Text= "Football" },

        new GameFields(){ ID= "Game6", Text= "Golf" },

        new GameFields(){ ID= "Game7", Text= "Hockey" },

        new GameFields(){ ID= "Game8", Text= "Rugby"},

        new GameFields(){ ID= "Game9", Text= "Snooker" },

        new GameFields(){ ID= "Game10",Text= "Tennis"}

    };

}

 

 

For your convenience, we have also created a sample that demonstrates this solution. Please check it out here

Sample:  https://blazorplayground.syncfusion.com/BtLpiCiiJmvSSVDL

Regards,

Yohapuja S

[Ümit Kara]

Hi. Thanks for the help. But it did not resolve my issue. Even though I used 2 way binding the initial text is still empty.

But if I use the Id field as Value and use int as TValue the text appears, but when I use the custom Aircraft type it did not. But when I use Id as Value I could not search via the Registration string field.

Code that do not display the initial text:

<GridColumn Field="@nameof(Flight.Aircraft)" HeaderText="Aircraft" Width="150">
    <Template>
        @((context as Flight).Aircraft.Registration)
    </Template>
    <EditTemplate>
        <SfAutoComplete TValue="Aircraft" TItem="Aircraft" Placeholder="Aircraft" FloatLabelType="FloatLabelType.Always"
                        @bind-Value="@((context as Flight).Aircraft)" >
            <SfDataManager AdaptorInstance="@typeof(GenericDataAdaptor<Aircraft>)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
            <AutoCompleteFieldSettings Value="Registration" Text="Registration"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </EditTemplate>
</GridColumn>

Code that does display text but not searchable by registration:

<GridColumn Field="@nameof(Flight.Aircraft)" HeaderText="Aircraft" Width="150">
    <Template>
        @((context as Flight).Aircraft.Registration)
    </Template>
    <EditTemplate>
        <SfAutoComplete TValue="int" TItem="Aircraft" Placeholder="Aircraft" FloatLabelType="FloatLabelType.Always"
                        @bind-Value="@((context as Flight).AircraftId)" >
            <SfDataManager AdaptorInstance="@typeof(GenericDataAdaptor<Aircraft>)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
            <AutoCompleteFieldSettings Value="Id" Text="Registration"></AutoCompleteFieldSettings>
        </SfAutoComplete>
    </EditTemplate>
</GridColumn>

[Ümit Kara]

Hi. I found out that the cause of initially empty text is about Json serialization issue. After putting JsonIgnoreAttribute to the problematic properties, the issue resolved.

[Kalpana Ganesan]

Hi Umit,

I’m glad to hear you were able to identify the issue! If you have any other questions, please reach out to us, we will be happy to help you.

Regards,

Kalpana