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

SfAutocomplete demo works fine but breaks when using own DataSource

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>



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team February 23, 2023 05:49 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon