[Solved] Bug in ClientTemplate, HTML Attributes, and data binding?

[Scott Anderson]

Is there some way to make the HTML extensions with HTML attributes work with the client template and client data binding?

    <%= Html.Telerik().Grid<TelerikMvc.Models.PersonModel>()
                .Name("PersonGrid")
                .Columns(columnBuilder =>
                    {
                        columnBuilder.Bound(modelItem => modelItem.PersonId)
                            .ClientTemplate(
                                Html.CheckBox(
                                        "Selected",
                                        false,
                                        new {value="<#= PersonId #>"})
                                    .ToHtmlString())
                            .Title(" ");
                    })
                .DataBinding(dataBindingBuilder =>
                    {
                        dataBindingBuilder.Ajax()
                                          .Select("IndexAjax", "Person", "PersonGrid");
                    })
    %>

The above example results in a JavaScript error when trying to load the data.  The issue appears to be the escaping of the angle brackets.  I've also tried the following for the value and none of these work either.  The first two result in the encoded text being literally set to the value attribute.  The last one results in the JavaScript.

value = Html.Encode("<#= PersonId #>")

value = "<#= PersonId #>"

value = "\u003c#= PersonId #\u003e"

Thanks.

[Scott Anderson]

It appears as though the <#= > syntax was not the best choice.  After looking through the Telerik MVC source code and .NET code in Reflector, the root cause is the HttpUtility.HtmlAttributeEncode that encodes <#= > as &lt;#= >.  This utility method is used by the HtmlHelper extensions to build the MvcHtmlString that is returned.  As a work around, I created an extension method (and included the namespace in the web.config) that will unencode the &lt;#= so that the Telerik encoding will work.

    public static class MvcHtmlStringExtensions
    {
        /// <summary>
        /// This method is a work around for to use the Html extension methods and the Telerik
        /// MVC Grid's ClientTemplate.
        /// </summary>
        /// <remarks>
        /// The default ToHtmlString of the MvcHtmlString will encode &lt;, &, and " to their
        /// &xxx; equivalents.  This will break the Telerik client binding.  This method will
        /// unescape the &lt; when it has been encoded to &amp;lt;#=.
        /// </remarks>
        /// <param name="mvcHtmlString">The MvcHtmlString instance inteaded for a Telerik Grid client template.</param>
        /// <returns>A string that removes the HTML encoding that Telerik does not handle.</returns>
        public static string ToTelerikClientTemplateString(this MvcHtmlString mvcHtmlString)
        {
            string htmlDecodedString =  HttpUtility.HtmlDecode(mvcHtmlString.ToHtmlString());
            return HttpUtility.UrlDecode(htmlDecodedString);
        }
    }

[Atanas Korchev]

Hi Scott Anderson,

We have fixed the problem internally. The fix involves two changes:

1. Patch the telerik.grid.js file as shown in this forum thread
2. Change the implementation of the ClientTemplate property (in GridBoundColumn.cs) to this
   

   private string clientTemplate;
   
   public string ClientTemplate
   {
       get
       {
           return clientTemplate;
       }
       set
       {
           clientTemplate = HttpUtility.HtmlDecode(value);
       }
   }

 
Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Scott Anderson]

That does fix the Html.CheckBox extension issue!  Thanks!  Should the internal fix also include UrlDecode in the template set?  That will handle the Html.ActionLink extension.  The following example, without a fix, would result in a URL that does not support client data binding.

                    columnBuilder.Bound(modelItem => modelItem.PersonId)
                        .ClientTemplate(Html.ActionLink(
                                                "Edit",
                                                "Edit",
                                                "Person",
                                                new
                                                    {
                                                        Id = "<#= PersonId #>"
                                                    },
                                                new
                                                    {
                                                        @class = "t-grid-action t-button t-grid-edit"
                                                    })
                                            .ToTelerikClientTemplateString())

Thanks.

[Atanas Korchev]

Hi Scott Anderson,

If you apply the first patch from the other forum thread - this would be resolved as well.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ryan]

Hi Atanas,

I am having a similar problem as well.

The forum post you referred to for updating the js only seems to point to the downloads page.

Is this correct or is there another post for updaing the grid js file ?

thanks

Ryan

[Atanas Korchev]

Hi Ryan,

Indeed I pasted the wrong link. Actually that URL would point to an internal build which contains fixes for both problems. You can download it and give it a try.

The correct link to the forum post is this. I have also updated the older post.

All the best,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Morgan]

We are encountering a very similar problem with the Telerik ASP.Net MVC extensions.  When we use an HtmlAttribute method in the grid code, we are getting javascript errors that say "Invalid Character."  We have traced it down to the opening bracket in the "<#=" being encoded as UTF of some sort, while the closing bracket is encoded as the normal url encoded value.

Could this possibly be the same or related problem?