how to add anchor link column in Kendu UI Grid in the asp.net mvc

Question

I am new in ASP.NET MVC Kendo UI. I am using ASP.NET MVC 5. I wanted to make the Name column as HTML link in the Kendo UI grid. But I am getting an error like "The best overloaded method match for 'Kendo.Mvc.UI.Fluent.GridBoundColumnBuilder.ClientTemplate(string)' has some invalid arguments". Following is my code.

@(Html.Kendo().Grid<Music.DataAccess.Models.Genre>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).ClientTemplate(Html.ActionLink(c => c.Name, "Browse", new { genre = c.Name }));                
        columns.Bound(c => c.Description).Width(190);            
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Genres_Read", "Store"))
            )
)

And here is my Genre Model

 public class Genre
{
    public int GenreId { get; set; }
    [DisplayName("Genre Name")]
    public string Name { get; set; }
    public string Description { get; set; }

    public List<Album> Albums { get; set; }
}

Can anyone help me?

Answer 1

It would be something like this:

@(Html.Kendo().Grid<Music.DataAccess.Models.Genre>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).ClientTemplate("<a href='" + Url.Action("Browse") + "/?#= Name #'>Edit</a>");
        columns.Bound(c => c.Description).Width(190);            
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("Genres_Read", "Store"))
            )
)

Answer 2

The client template for the columns either accepts a bunch of javascript as a string or a function.

Personally I prefer to pull out the formatting side of things into a javascript function as it is easier to work with.

So for your example something like this should work:

Grid Column

columns.Bound(c => c.Name).ClientTemplate("#=getActionLink(data.Name)#")

Javascript Function

function getActionLink(data)
{
 var link = "@Url.Action("YourActionHere","YourControllerHere")" + "/" + data;
 var returntext = "<a href='" + link + "'>" + data + "</a>";

return returntext;
}

Obviously customise on how you need it but this should work for you.