Custom Button in a ClientRowTemplate on the Telerik MVC Grid - asp.net-mvc-3

Question

Sorry if this is a repeat. I did a search and didn't find anything that exactly matched my situation.
I have a grid that requires a ClientRowTemplate. I have the template working very well.
I need a button in that RowTemplate that calls back to a controller method through ajax. The controller method needs to perform some complex logic and then return a new set of data to the grid which the grid will then need to bind to. I thought this should work in the same fashion as an ajax binding. For instance, when you do a save or delete (using the built in buttons) an ajax method that is attributed with [GridAction] is called and then has an IQueryable returned. The grid automatically binds to this IQueryable.
How do I do the same thing with a custom button? Is it even possible to add a custom button when using a ClientRowTemplate?

Answer 1

Put a link in the clienttemplate of your grid row
#(Html.Telerik().Grid<myModel>()
.Name("myGrid")
.Columns(columns =>
{
#* You can put a link in your client template to trigger a refresh function *#
columns.Bound(o => o.Id).ClientTemplate("<a href='javascript:refreshGrid(<#= Id #>);'>Refresh</a>");
columns.Bound(e => e.col1);
columns.Bound(e => e.col2);
columns.Bound(e => e.col3);
})
.ClientEvents(events => events.OnDataBinding("myGrid_onRowDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller", new { param1 = ..., param2 = ... } )))
Write your code to refresh grid
<script type="text/javascript">
//parameters needed for grid
var x = ...;
var y = ...;
//grid refresh function
function refreshGrid(id) {
//make a call to server
$.post("/controller/action/" + id, function() {
//after making a successfull call to server
//you may update parameters
x = ...;
y = ...;
//and rebind your grid
$('#myGrid').data('tGrid').rebind();
})
}
//grid on row data binding event
function myGrid_onRowDataBinding(e) {
e.data = $.extend(e.data, { param1: x, param2: y });
}
</script>
That's it
EDIT:
ClientRowTemplate example
You need to change only the grid code. The rest is same.
#(Html.Telerik().Grid<myModel>()
.Name("myGrid")
.ClientRowTemplate(grid => "<div class='firstcolumn'><a href='javascript:refreshGrid(<#= Id #>);'>Refresh</a></div><div class='secondcolumn'>Content....</div>")
.ClientEvents(events => events.OnDataBinding("myGrid_onRowDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("Action", "Controller", new { param1 = ..., param2 = ... } )))