Custom NoRecordFoundTemplate

[Leo]

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.

[UdhayaKumar Duraisamy]

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