[Solved] HtmlHelper in Client Template

[Chris]

I have been trying to figure out how to pass the bound value to an HtmlHelper extension inside the Client Template.  this thread is pretty similar, but they seem to be passing the value as a route value.  The source code has also changed since that post.

Example:

@(Html.Telerik().Grid<RSBBADetail>()
        .Name("BBaGrid")
        .DataKeys(keys => { keys.Add(o => o.ProjectNumber).RouteKey("id"); })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_SelectDetailsAjax", "RequiredActions");
        })
        .Columns(columns =>
        {
            columns.Bound(o => o.ProjectNumber).ClientTemplate(Html.CustomExtension("<#= ProjectNumber #>");
        })

or as a lamda expression since it doesn't seem like "<#=  #>" would be interpreted until it is passed to ClientTemplate?

.Columns(columns =>
   {
       columns.Bound(o => o.ProjectNumber).ClientTemplate(Html.CustomExtensionFor(o => o.ProjectNumber));

Thanks,
Chris

[Atanas Korchev]

Hello Chris,

This is not possible. You cannot pass a JavaScript variable to a server-side method. Please describe in more detail what you are trying to achieve - I am sure there are better ways to do it. 

Regards,
Atanas Korchev
the Telerik team

[Chris]

Thanks for responding so quickly.

I'm trying to create a template column in an AJAX grid that uses an HTML helper or some other function to generate the cell content. The helper/function would be able to access the values of the members passed to it so that it could generate the content according to those values.

It would look something like one of the two columns in this grid:

@(Html.Telerik().Grid<RSBBADetail>() 

        .Name("BBaGrid") 

        .DataKeys(keys => { keys.Add(o => o.ProjectNumber).RouteKey("id"); }) 

        .DataBinding(dataBinding => 

        { 

            dataBinding.Ajax() 

                .Select("_SelectDetailsAjax", "RequiredActions"); 

        }) 

        .Columns(columns => 

        { 

            /* method 1 */    
                columns.Bound(o => o.ProjectNumber).ClientTemplate(o => Html.CustomExtension(o.ProjectNumber, o.ProjectName));
                /* method 2 */
                columns.Template(o => Html.CustomExtension(o.ProjectNumber, o.ProjectName));

        })

It is possible to do this (using the second method) with a non-AJAX grid and I am wondering if there is a way to accomplish the same thing in a grid that uses AJAX.

Thanks again for your help.

[Atanas Korchev]

Hi Chris,

How does your helper method work? If it embeds correct client-side expressions it may work even this way:

Html.CustomExtension("<#= ProjectNumber #>"

This must return some string which contains "<#= ProjectNumber #>" in order for the client template to be properly evaluated in the browser.

Regards,
Atanas Korchev
the Telerik team

[Chris]

That will work, but it doesn't work for what I am trying to do. I'm asking if there is a way for the helper method to know the value of ProjectNumber (and other members) for the row that is being bound. So for each row in the grid, the contents of the cell I'm configuring would be set to the value returned by Html.CustomExtension(row.ProjectNumber, row.ProjectName).

Ajax grids seem to completely ignore the Template() column builder. If they didn't then that seems like it would solve my problem.

[Atanas Korchev]

Hello Chris,

 This is by design as Template is executed on the server side whereas ClientTemplate is executed in the browser. There is no way server code to node the value of a JavaScript object. You cannot mix server code with JavaScript parameters.

Regards,
Atanas Korchev
the Telerik team

[Robert]

I have the same issue. I have a helper method that takes the name of a document, parses out the extension then returns the correct path of the appropriate icon for the document.

ClientTemplate("<img src='" + Url.Content(Html.IconPath("<#= Name #>").ToString()) + "' alt='<#=DocumentType.Name#>' style='vertical-align: middle;'/>" + Html.ActionLink("<#=Name#>", "GetDocument", "Quote", new { id = "<#=DocumentId#>" }, null).ToString());

The helper method is Html.IconPath. The problem is that the value being passed in to the helper is literally <#= Name #> instead of the document name.

[Atanas Korchev]

Hello,

 As I said in my previous reply you can't execute server-side code on the client-side. You need to either use server binding or translate your helper method to JavaScript so it can be executed client-side.

Regards,
Atanas Korchev
the Telerik team

[Robert]

I thought I'd just use CSS.... Can't do that either with this grid. While this CSS works fine in my pages, it doesn't work in the grid.

a[href $='.rtf']
{
    padding-right: 18px;
    background: transparent url("../Images/icons/icon_doc.gif") no-repeat center left;
}

[Atanas Korchev]

Hello,

 This CSS rule will be applied only for <a> elements whose href attribute ends with .rtf. Does your link's generated href end with rtf?

Regards,
Atanas Korchev
the Telerik team

[Robert]

That was a stupid goof on my part. I figured that out after I posted. To fix it I just added an htmlattribute for "title" and gave that the doc name, then adjusted the css to use title instead of href.

columns.Bound(o => o.Name).ClientTemplate(Html.ActionLink("<#=Name#>", "GetDocument", "Quote", new { id = "<#=DocumentId#>" }, new { title = "<#= Name #>" }).ToString());

a[title $='.pdf']
{
    padding-right: 28px;
    background: transparent url("../Images/icons/icon_pdf.gif") no-repeat center right;
}