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);

Remove

You're trying to use a linq expression but there is no overload for that. See my update below – Neath

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

Neath

thanks, looks like a good step in the right direction, but your code above omits the 'id' routing values for the links. When I try and add them, I get an error. Please see my edit which now includes this. – Remove

Thanks Mike, that wrapped it up, but you said in your comment to my original question that there is no overload for a LINQ expression, but I was successfully using LINQ expressions on the separate columns. – Remove

thanks for your persistence, and you're right that the template method does in fact support Action delegates. I've added to my code sample above. – Neath

Great, thanks again. I guess the scoping rules for Razor take some getting used to. – Remove

This works well, BUT, when I then sort a column, all my links vanish? – Hereinto

Agrh tried everything columns.Template(@<text>@Html.ActionLink("asd", "Configure")</text>); columns.Template(@<text>1212312</text>); columns.Template(x => x.Url + "asdasdasd"); but nothing works =( It just shows empty fields – Helices

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

Crumley

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.

Glyco

need vb.net version of this code @(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); }) ) – Jejunum

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)
{
}

Selfimprovement

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.

Quintain