I want to call Action Method of controller and return View on Kendo grid row click

Question

Below is my kendo grid code

@(Html.Kendo().Grid<DataSource>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Quote_ID).Filterable(false);
        columns.Bound(p => p.Ticket_ID).Groupable(true);
        columns.Bound(p => p.Channel).Groupable(true);
        columns.Bound(p => p.Agent_Alias).Groupable(true).Hidden(true);
        columns.Bound(p => p.Shipping_Carrier).Groupable(true).Hidden(true);
        columns.Bound(p => p.Quote_ID).Title("View 
        Details").Groupable(false)

        .Template(@<text>
            @Html.ActionLink("Show Product Details", "GridRowSummary", 
        "GridOrderSummary")</text>);                                                         

    })

From ActionLink I am trying to call Action Method of my controller.

Below My controller code

public ActionResult GridRowSummary()
    {
        return View();
    }

Answer 1

Using Template will work when using Ajax bound grids e.g:

columns.Template(c => @Html.ActionLink("GridRowSummary", "GridOrderSummary", new { id = c.Id, }));

If not using Ajax bound grids use ClientTemplate attribute on the column, along with a method to display the associated data, if required e.g.:

columns.Bound(p => p.Quote_ID).Title("View Details").Groupable(false)
    .ClientTemplate(@Html.ActionLink("#=Quote_ID#", "GridRowSummary", new { ID = "#=ID#" }).ToHtmlString());

There is a third method (a little messy) which allows you to add custom buttons/icons etc e.g:

columns.Bound(p => p.Quote_ID).ClientTemplate("<a href='" + @Url.Action("GridRowSummary", "GridOrderSummary", new { id = "#=Id#" }) + "' class='btn btn-primary'><i class='fa fa-eye'></i>  Link</a>" );

EDIT

From looking through the FAQ section, found an even neater solution where you can pass controller name and your Quote_ID parameter (although this way does involve setting up a Javascript function):

columns.Bound(p => p.Quote_ID).ClientTemplate("#= getDetails(data) #");

<script>
function getDetails(data) {
    var action = '@Url.Action("NameOfMethod", "NameOfController")';

    var html = kendo.format("<a href='{0}/{1}'>Link</a>",
        action,
        data.Quote_ID
    );

    return html;
}
</script>