Define a Template column for Telerik MVC Grid in Razor syntax

Question

I have the following legacy code that I would like to mimic, with all action links inside one column. However, I can't seem to get the Razor syntax right. How should I express this in Razor?

The ASPX column template is like this:

.Columns(column =>
{
    column.Template(o =>
        {%>
            <%= Html.ActionLink("Edit", "Edit", new{ id = o.DeviceID}) %> | 
            <%= Html.ActionLink("Delete", "Delete", new { id = o.DeviceID })%>
        <%});

I have only been able to get three separate columns using Razor without complaints about syntax etc. as below:

.Columns(columns =>
{
    columns.Template(o => @Html.ActionLink("Edit", "Edit", new { id = o.ProductId })).Width(50);
    columns.Template(o => @Html.ActionLink("Details", "Details", new { id = o.ProductId })).Width(50);
    columns.Template(o => @Html.ActionLink("Delete", "Delete", new { id = o.ProductId })).Width(50);

How can I define one template column that contains all three action links using Razor syntax?

EDIT: In trying the following small adaptation of Mike's answer below, I get the error "Only assignment, call, increment, decrement, and new object expressions can be used as a statement":

columns.Template(o => @<text>@Html.ActionLink("Edit", "Edit", new { id = o.CampaignId }) | 
                        @Html.ActionLink("Delete", "Delete", new { id = o.CampaignId })
                        </text>).Width(100);

Answer 1

Here is a quick sample showing both bound columns and a template column:

Sample #1 using @<text></text> syntax

@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.UserName);
        columns.Bound(m => m.Email);
        columns.Template(@<text> @Html.ActionLink("Edit", "Edit", new { id = item.UserId} ) | 
                                 @Html.ActionLink("Delete", "Delete", new { id = item.UserId)  
                         </text>).Width(100);
    })
 )

Sample #2 using an Action delegate

@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(m => m.UserName);
        columns.Bound(m => m.Email);
        columns.Template(m => @Html.ActionLink("Edit", "Edit", new { id = m.UserId} ) + " | " +
                              @Html.ActionLink("Delete", "Delete", new { id = m.UserId)  
                         ).Width(100);
    })
 )

Hope that helps, if didn't already figure it out. :)

UPDATE - added the implicitly defined "item" parameter in code sample above. It shows how to get the Model properties within the Telerik control template.
UPDATE#2 - korchev showed the "@item.someProperty" syntax within his code sample. The @ symbol is not needed in our case since we are within an extension method, but doesn't hurt to leave it for clarity. UPDATE#3 - added Sample #2 code sample

Answer 2

If you are binding with ajax, the format has to look something more like this:

c.Bound(i => i.Name).ClientTemplate(@Html.ActionLink("<#= Name #>", "[Action]", "[Controller]", new { Id = "<#= Id #>" }, new { Area = "[Area]" }).ToHtmlString())

See here for more info: http://www.telerik.com/forums/kendo-mvc-grid-actionlink-column

Answer 3

columns.Template(@Html.ActionLink("Edit", "Edit", new {id = @item.id }));

Check ScottGu's blog posts with regard to Razor for what @item is.

Answer 4

columns.Command(commands => {
 commands.Custom("Update").Text(Resource.Edit)
 .ButtonType(GridButtonType.BareImage)                                                .SendState(true).SendDataKeys(true).HtmlAttributes(new { id = "popUp"})   
                                              Action("Gallery_Bar_EditOrAddTranslate", "Administration").Ajax(false);
commands.Custom("Update").Text(Resource.Edit)
 .ButtonType(GridButtonType.BareImage)                                                .SendState(true).SendDataKeys(true).HtmlAttributes(new { id = "popUp"})                                                 Action("Gallery_Bar_EditOrAddTranslate", "Administration").Ajax(false);                                  }).Width("5%").Title(Resource.Coomand);

This will generate something like action Link the id id = m.UserId you can show like DataKeys:

 .Name("GridName")  .DataKeys(key =>
                        {
                            key.Add(c => c.UserId).RouteKey("userId");

                        })

at the post method you will have :

public ActionResult xxx(int userId)
{
}

Answer 5

I had a print button I needed to put in the Header row, that I chose to put in the same column as, but above where the Update button goes. I was able to do it just fine in Razor like this:

columns.Command(command => {command.Edit(); }).Width(100).HeaderTemplate(i => @Html.ActionLink("Print Grid", "OutputAgencies", "Admin", new { @class = "k-button" }) );

This is where "Print Grid" was for display on my linkbutton, "OutputAgencies" was a method in my controller, and "AdminController" was the name of my controller.