SfAutocomplete demo works fine but breaks when using own DataSource

[Ivan]

Hi,

I am trying out Syncfusion for the first time and I want to use SfAutocomplete to search users in a SfDialog.

When I copy the default example from this page https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities everything works fine and I am able to search by game and the popup opens based on _isAddUserModalOpen (boolean).

When I replace the DataSource with my own List<User> the modal doesn't open and there is no errors in the console that could help me troubleshoot this problem

<SfDialog Width="400px" IsModal="true" @bind-Visible="_isAddUserModalOpen">
    <DialogTemplates>
        <Header>
            Users
        </Header>
        <Content>
            <p>This is a test</p>
            <SfAutoComplete TValue="string" TItem="User" Placeholder="e.g. Basketball" DataSource="@QuickUserView">
                <AutoCompleteFieldSettings Value="FirstName"/>
            </SfAutoComplete>
        </Content>
    </DialogTemplates>
    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>
</SfDialog>

@QuickUserView is a List<User>

[UdhayaKumar Duraisamy]

You can refer to the code snippet and sample below to learn about rendering an AutoComplete component inside a Dialog component.

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.DropDowns

 

<div id="target" class="col-lg-12 control-section" style="height:100%">

    <div>

        @if (this.ShowButton)

        {

            <button class="e-btn" @onclick="@OpenDialog">Open Dialog</button>

        }

    </div>

    <SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

        <DialogTemplates>

            <Content>

                <div class="dialogContent">

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

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

                    </SfAutoComplete>

                </div>

            </Content>

        </DialogTemplates>

        <DialogEvents OnOpen="@BeforeDialogOpen" Closed="@DialogClosed"></DialogEvents>

    </SfDialog>

</div>

 

@code {

    SfTextBox TextboxObj;

 

    private string TextBoxValue;

    private bool Visibility { get; set; } = true;

    private bool ShowButton { get; set; } = false;

 

    private void BeforeDialogOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args)

    {

        this.ShowButton = false;

    }

 

    private void DialogClosed(CloseEventArgs args)

    {

        this.ShowButton = true;

    }

 

    private void OpenDialog()

    {

        this.Visibility = true;

    }

 

    public string AutoVal;

 

    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" },

    };

}

Please refer to the below sample for more details,

https://www.syncfusion.com/downloads/support/common/3984/ze/DialogAutocomplete_36e16942.zip