How to call onclick event of MVC telerik grid refresh button

Question

I want to do some functionality on click event of telerik grid's refresh button.

By default refresh button is provided at the bottom in grid on left corner. I just want to know that how to call its click event.

Here is my code which is on index.cshtml :

@(Html.Telerik().Grid<ModuleViewModel>()
        .Name("Grid")
         .DataKeys(keys =>
        {
            keys.Add(p => p.Modules.Id);
        })
        .DataBinding(dataBinding =>
                dataBinding.Ajax()
                .Select("Select", "Module", new { GridButtonType.Text })                    
                .Update("Save", "Module", new { GridButtonType.Text }))
        .Columns(columns =>
        {
            columns.Command(commands =>
            {
                commands.Custom("Edit").Action("Edit", "Module").ImageHtmlAttributes(new { @class = "t-edit" }).ButtonType(GridButtonType.Image).HtmlAttributes(new { title = "Edit" });
            }).Width(20).Title("Edit").Visible(OperationHelper.EditOperation);
            columns.Command(commands =>
            {
                commands.Custom("Delete").Action("Delete", "Module").ImageHtmlAttributes(new { @onclick = "return confirmDelete()", @class = "t-delete" }).ButtonType(GridButtonType.Image).HtmlAttributes(new { title = "Delete", @class = "RightAlign" });
            }).Width(20).Title("Delete").Visible(OperationHelper.DeleteOperation);
            columns.Bound(p => p.Modules.Name).Width(100).Title("Name");
            columns.Bound(p => p.Modules.SubModuleId).Width(100).Title("SubModule Id").Hidden();
            columns.Bound(p => p.SubModuleName).Width(100).Title("SubModule Name");
            columns.Bound(p => p.Modules.IsDisplay).Width(100).Title("Is Display");
        })
        .Sortable()
        .Filterable()

)

Answer 1

Not sure if there is a client event for refresh. On Kendo Grid the refresh button is implemented as an HTML anchor tag like this:

<a class="k-pager-refresh k-link" href="/controller/action?etc..." title="Refresh">
<span class="k-icon k-i-refresh">Refresh</span>
</a>

So to add extra functionality into the refresh you can hook in some Jquery to the anchor onclick and do your thing as well as / instead of the default behaviour.

as per your comment - you could certainly do that...

$(document).ready(function () {
    $('.k-pager-refresh').click(function () {
        alert('I was clicked ' + $(this).attr("href")); 
        var link = $(this).attr("href");
        if (link == "/SalesDb/Batch") {
            alert("Refreshing");
        }
    });
});

and the telerik default refresh script will run too (unless you return false from your click method).

If you only want to target that button then use specific jquery selectors - e.g. wrap your grid in a <div> and select the refresh anchor within that <div>

Your grid has an ID of 'Grid' so your selector would be something like:

$('#Grid .t-refresh').click(function () { ...