@inject IJSRuntime js

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true"
             Class="custom-grid-class">
    <GridToolBarTemplate>
        <GridSearchBox />
        <TelerikButton Icon="@SvgIcon.X" OnClick="@OnClearButtonClick"></TelerikButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" />
        <GridColumn Field="@nameof(SampleModel.Description)" />
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">//
    function clearSearch() {
        // locate the searchbox of the Grid
        const input = document.querySelector(".custom-grid-class .k-grid-search input");
        // clear the value of the input
        input.value = "";
        // dispatch the input event in order to force the Grid event binding to trigger the filtering
        input.dispatchEvent(new Event('input', {bubbles: true} ));
    }
//</script>

@code {
    private List<SampleModel> GridData { get; set; } = new();

    private async Task OnClearButtonClick()
    {
        await js.InvokeVoidAsync("clearSearch");
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 50; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"{(char)(64 + i % 26 + 1)}{(char)(64 + i % 26 + 1)} {i}",
                Description = $"{(char)(123 - i % 26 - 1)}{(char)(123 - i % 26 - 1)} {i}"
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
    }
}