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

Custom NoRecordFoundTemplate

Hello,

Can someone help me to achieve this UI in autocomplete.

Below the 'No Records Found." is a button it will hide the autocomplete or suggested names and also hide the dropdown.



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team October 28, 2022 05:22 AM

Hi Leo,


Based on the shared information we suspect that you are trying to add the custom buttons in the NoRecordFoundTemplate of the AutoComplete component. We have prepared a simple sample for your requirement and shared the sample below. Please refer to the code snippet and documentation for more information.


<p>AutoComplete NoRecordsTemplate &Aacute; custom button</p>

 

<SfAutoComplete @ref="AutocompleteObj" TValue="string" TItem="Country" @bind-Value="@AutoVal" Placeholder="Select" DataSource="@Countries" Width="250px">

    <AutoCompleteTemplates TItem="Country">

        <NoRecordsTemplate>

            <span class='norecord'> NO DATA AVAILABLE</span>

            <SfButton OnClick="@customFunction">Clear value and popup</SfButton>

        </NoRecordsTemplate>

    </AutoCompleteTemplates>

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

</SfAutoComplete>

@code {

    SfAutoComplete<string, Country> AutocompleteObj;

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

    };

 

    public async Task customFunction()

    {

        AutoVal = "";

        await AutocompleteObj.HidePopupAsync(); 

    }

}


In the above code snippet, we have used the HidePopupAsync method to close the popup while clicking the custom button inside the NoRecordFoundTemplate.


Documentation : https://blazor.syncfusion.com/documentation/autocomplete/templates#no-records-template


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/NoRecordsTemplate161253825


Kindly try the above suggestion and let us know if this meets your requirement.


Regards,

Udhaya Kumar D


Loader.
Live Chat Icon For mobile
Up arrow icon