Button within AutoComplete

[Yongkee Cho]

Hi, can we add a button inside of an AutoComplete?

<SfAutoComplete @ref="_searchAutoComplete" TValue="string" TItem="SearchItem" Placeholder="Search..." AllowFiltering="true" Width="240px" ShowPopupButton="true" CssClass="e-custom">
    <SfDataManager AdaptorInstance="@typeof(SearchDataAdapter)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
    <AutoCompleteEvents TItem="SearchItem" TValue="string" OnValueSelect="@OnItemSelected"></AutoCompleteEvents>
    <AutoCompleteFieldSettings GroupBy="Type" Text="Name" Value="Id" />
    <AutoCompleteTemplates TItem="SearchItem">
        <ItemTemplate>
            <div class="row">
                <div class="col-2 justify-content-center">
                    <span class="@context.IconCss" />
                </div>
                <div class="col-10 justify-content-center text-truncate">@context.Name</div>
            </div>
        </ItemTemplate>
    </AutoCompleteTemplates>
    <SfButton IconCss="bi upc-scan"  OnClick="(() => _barcodeVisible = !_barcodeVisible)" />
</SfAutoComplete>

[Priyanka Karthikeyan]

Hi Yongkee Cho,

 

Thank you for reaching out to us. Adding a custom button inside the Syncfusion SfAutoComplete using JSInterop allows you to manipulate the DOM dynamically. 

 

Here’s how to achieve this:

 

Index.razor

<SfAutoComplete TValue="string" TItem="string" @bind-Value="SelectedValue" ShowPopupButton="true" DataSource="@Items" Placeholder="Select an item" @ref="DropDownListRef">
</SfAutoComplete>

 

@code {
    private string SelectedValue { get; set; }
    private List<string> Items { get; set; } = new() { "Option 1", "Option 2", "Option 3" };
    private SfDropDownList<string, string> DropDownListRef;

 

    // Refresh method to update items
    private void RefreshItems()
    {
        
    }

 

    // Invoke JS logic after the component has been rendered
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("addCustomButton", DotNetObjectReference.Create(this));
        }
    }

 

    // Callback for the button click
    [JSInvokable]
    public void OnRefreshButtonClicked()
    {
        RefreshItems();
    }
}
 

 

Layout.cshtml

 

 

<script>
    window.addCustomButton = (dotNetHelper) => {
    const dropdownWrapper = document.querySelector('.e-input-group'); // Locate the input wrapper
    if (!dropdownWrapper) return;

 

    // Check if the button already exists to prevent duplicates
    if (dropdownWrapper.querySelector('.custom-refresh-btn')) return;

 

    // Create a new button element
    const refreshButton = document.createElement('button');
    refreshButton.innerHTML = '🔄'; // Add your button content
    refreshButton.className = 'custom-refresh-btn';
    refreshButton.style.border = 'none';
    refreshButton.style.background = 'none';
    refreshButton.style.cursor = 'pointer';
    refreshButton.style.position = 'absolute';
    refreshButton.style.right = '30px'; // Adjust position
    refreshButton.style.top = '50%';
    refreshButton.style.transform = 'translateY(-50%)';

 

    // Add a click event to the button
    refreshButton.addEventListener('click', () => {
    dotNetHelper.invokeMethodAsync('OnRefreshButtonClicked');
    });

 

    // Append the button to the input wrapper
    dropdownWrapper.appendChild(refreshButton);
    };

 

    </script>

 

Regards,

Priyanka K

Attachment: BlazorApp2_7320d478.zip

[Yongkee Cho]

It worked. Thank you.

[Priyanka Karthikeyan]

Hi Yongkee Cho,

We are delighted to hear that the requirement has been successfully achieved on your end. Please feel free to reach out to us if you need any further assistance. We’re always here to help!

Regards,

Priyanka K