Telerik MVC Grid ClientTemplate Issue

Question

Alright I need some help with this. I've reviewed a few other answers that pertain to my issue but didn't resolve it.

I am trying to add an action image to a grid row in a Telerik MVC client template.

The issue I am having is I cannot get the ID from the column the client template is for.

Here is my grid:

@(Html.Telerik().Grid<xxx.Business.Entities.EntityName>()
    .Name("StudentSearchResults")
    .Columns(columns =>
    {
        columns.Bound(o => o.SchoolStudentID);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.StudentID).ClientTemplate(
            @Html.ActionImage("SubmitDegree", new { studentID = "<#= StudentID #=>" }, "~/Content/Images/Icons/16/bullet_go.png", "Submit Degree").ToString()
            ).Title("")
            .Width(20);
    })
    .DataBinding(databinding => databinding
    .Ajax()
    .OperationMode(GridOperationMode.Client)
    .Select("AjaxBindAction", "ControllerName"))
    .Pageable()
    .Sortable()

)

And I am using an HtmlHelperExtension to construct the ActionImage:

public static MvcHtmlString ActionImage(this HtmlHelper html, string action, object routeValues, string imagePath, string alt)
    {
        var url = new UrlHelper(html.ViewContext.RequestContext);

        // build the <img> tag
        var imgBuilder = new TagBuilder("img");
        imgBuilder.MergeAttribute("src", url.Content(imagePath));
        imgBuilder.MergeAttribute("alt", alt);
        string imgHtml = imgBuilder.ToString(TagRenderMode.SelfClosing);

        // build the <a> tag
        var anchorBuilder = new TagBuilder("a");
        anchorBuilder.MergeAttribute("href", url.Action(action, routeValues));
        anchorBuilder.InnerHtml = imgHtml; // include the <img> tag inside
        string anchorHtml = anchorBuilder.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(anchorHtml);
    }

I also tried setting a server side template and then a client side one.. as posted here

@(Html.Telerik().Grid<AIPortal.Business.Entities.EntityName>()
    .Name("StudentSearchResults")
    .Columns(columns =>
    {
        columns.Bound(o => o.SchoolStudentID);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.StudentID).Template(t => {
                    @Html.ActionImage("SubmitDegree", new { studentID = t.StudentID }, "~/Content/Images/Icons/16/bullet_go.png", "Submit Degree");
                     })
                     .ClientTemplate(
                     @Html.ActionImage("SubmitDegree", new { studentID = "<#= EntityName.StudentID #>" }, "~/Content/Images/Icons/16/bullet_go.png", "Submit Degree").ToString())
            .Title("")
            .Width(20);
    })
    .DataBinding(databinding => databinding
    .Ajax()
    .OperationMode(GridOperationMode.Client)
    .Select("AjaxBindAction", "DegreeCompletion"))
    .Pageable()
    .Sortable()

)

thinking it might be an issue with the @Html.ActionImage running on the server in the client template?

I am able to hard code the StudentID and everything works fine. The only problem is when trying to get access to the StudentID that the client template is for.

Can somebody point me in the right direction to get this ID into my client template?

Thanks!!

I know I'm late to the party, but am currently trying to setup an editable grid. With regards to the Html.ActionImage in the client, I'm experimenting with using RazorEngine to generate the client side string using Razor syntax. — B2K, Sep 16 '14 at 15:11

score 0 · Answer 1 · answered Mar 02 '12 at 14:48

This is the solution I came up with.. Couldn't use the @Html.ActionImage method in the client side template.

@(Html.Telerik().Grid<xxx.Business.Entities.EntityName>()
    .Name("StudentSearchResults")
    .Columns(columns =>
    {
        columns.Bound(o => o.SchoolStudentID);
        columns.Bound(o => o.FirstName);
        columns.Bound(o => o.LastName);
        columns.Bound(o => o.StudentID).ClientTemplate(
                     "<a href=\"/DegreeCompletion/SubmitDegree?studentID=<#= StudentID #>\"><img alt=\"Submit Degree\" src=\"/Content/Images/Icons/16/bullet_go.png\"></a>")
            .Title("")
            .Width(20);
    })
    .DataBinding(databinding => databinding
    .Ajax()
    .OperationMode(GridOperationMode.Client)
    .Select("AjaxBindMethod", "DegreeCompletion"))
    .Pageable()
    .Sortable()

)

You can use ' instead of \" in your client template string - will be much more readable. — Jakub Konecki, Mar 16 '12 at 14:28
Hah.. yeah I pulled that from an example. using the single quotes now. — Kurt Dowswell, Mar 16 '12 at 19:53

Telerik MVC Grid ClientTemplate Issue

1 Answers1