Add refresh button next to search box Kendo Grid

Question

I have a Kendo UI ASP.Net Core Grid as:

                @(Html.Kendo().Grid(Model)
                    .Name("grid")
                    .ToolBar(t =>
                    {
                        t.Excel();
                        t.Pdf();
                        t.Search();
                    })
                    .DataSource(dataSource => dataSource
                        .Custom()
                        .PageSize(10)
                        .Schema(schema =>
                        {
                            schema.Data(x => "function(d) { return validateData(d); }");
                        })
                    )
                    .Search(s =>
                    {
                        s.Field(o => o.Field4, "contains");
                        s.Field(o => o.Field5, "contains");
                        s.Field(o => o.Field1, "contains");
                        s.Field(o => o.Field2, "contains");
                        s.Field(o => o.Field3, "contains");
                    })
                    .Events(events => events.DataBound("onDataBound")
                        )
                    .Columns(columns =>
                    {
                       ...
                    })
                    )

JS

 function onDataBound() {
                const grid = this;
                grid.table.find("tr").each(function () {
                    const dataItem = grid.dataItem(this);
                    const text = dataItem.IsActive ? 'Active' : 'Inactive';
                    }
                });
            }

As you can see, I have a search field on the toolbar because I use the following:

.ToolBar(t => {
         t.Search();
  })

Now I want to add a refresh button next to Search TextBox in order to clear the search field if it has any value like:

How can I achieve that? Regards

Answer 1

A custom button can be added to the toolbar of the grid as follows:

.ToolBar(t => {
    t.Search();
    t.Custom().Name("clear").IconClass("k-icon k-i-reload");
})

After that via JavaScript, you can attach a click handler where you can clear the value of the search panel:

<script>
    $(document).on("click", ".k-grid-clear", function(e){
        $(".k-grid-search input").val("").trigger("input");    
    });
</script>

To hide the text of the button, apply CSS:

<style>
    .k-grid-clear .k-button-text {
        display: none;
    }
</style>

You can see the functionality in action in this Telerik REPL example.