Kendo Grid button to call another page

The inline and popup editing of the Kendo grid is fine for cases where the data editing is simple but if you have more complex requirements then it may be necessary to call you own editing page.
To do this you are most likely want to select something on the grid and pass its unique id and any other required information to that page.

NOTE: this example is to call another view but if you need popup window or partial views using Ajax then see the notes on using kendo window

You can easily add buttons to the kendo grid to call another page. There are various options as follows:

You can use Javascript function:

<script type="text/javascript">  
function showDetails(e) {  
    e.preventDefault();
    var d = this.dataItem($(e.currentTarget).closest("tr"));
    //alert("Selected item ID is:" + d.Id);
    window.location.href = "@Url.Action("action", "controller")/" + d.Id;
}
</script>  
@(Html.Kendo().Grid<AGridViewModel>()
  .Name("Grid")
  .Columns(columns => {
    columns.Bound(p => p.Id).Hidden(true);
    columns.Bound(p => p.Name);
    columns.Bound(p => p.Description); 

    columns.Command(command => command.Custom("View Details").Click("showDetails"));

    etc...

})

Or with a client template:

columns.Bound(p => p.Id).Title("List").ClientTemplate("<a href='" + Url.Action("action", "controller") + "/#=Id#'>View Details</a>");  

Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus