foreign language in template issue

[Brad]

I'm using kendo Telerik.UI.for.AspNet.Mvc5 version 2016.2.607 in .net 452

inside one of my templates i have a reference to a localization string, like this:

<script type="text/x-kendo-tmpl" id="msgTemplate">
    <div class="media">
        <a class="pull-left" href="#=RelevantURL#" target="_blank" title="@CoBRALocalization.MVC.RootResource.ClickToAccess">
            <img  src="@Url.Content("~/Content/images/incAlert.png")?h=30&mode=max" alt="Active" />
        </a>
        <div class="media-body">
            <div class="media-heading">
                <small><time datetime="#=UnixDateCreated#">#= kendo.toString(DateCreated, 'G') #</time></small>
            </div>
            <p>#=FriendlyMessage#</p>
        </div>
    </div>
</script>

 

look at the @CoBRALocalization.MVC.RootResource.ClickToAccess reference.  works fine if the localization value is in english or something like that, but trying a turkish value like 

Erişim'i tıklatın

will give me an error saying the template is invalid, and the title looks like:

title="Erişim'i tıklatın"

clearly the hashtag is causing the problem, but i can't find a way around that.  Solutions like 

http://www.telerik.com/forums/escaping-with-new-syntax

don't really fit this case.  Any other ideas?

[Dimiter Topalov]

Hi Brad,

In the given scenario, the only way to avoid errors in the template will be to prevent @CoBRALocalization.MVC.RootResource.ClickToAccess from containing non-escaped hash literals, as described in the following section of our documentation:

http://docs.telerik.com/kendo-ui/framework/templates/overview#hash-literals

Regards,
Dimiter Topalov
Telerik by Progress

[Brad]

There are no 'non escaped hashed literals' in my text though.  like i wrote, the text is:

Erişim'i tıklatın

which translates to have a hash when it gets compiled to HTML in your template.  Theres no way around this?  Basically, you're not supporting Turkish (or japanese) characters in your templates is what you're saying?

[Dimiter Topalov]

Hello Brad,

The issue is not related to Kendo UI, but to the way in which the Razor engine handles apostrophes. The generated "#" in the HTML encoded value "'" causes the described problem. You can check out the following Stack Overflow discussion for details, and the try the suggested solution:

http://stackoverflow.com/questions/5225796/javascript-razor-and-escape-characters-like-apostrophe

If this does not help, you can replace the undesired hash literal at the client, just make sure to do so before any widgets that are using try to access it:

<script>
   $(function () {
       $("#template").html($("#template").html().replace("&#39;", "'"));
...
   });
</script>

Just to be clear - I am not saying that Kendo UI Templates do not support non-latin characters (like some letters from the Turkish alphabet) - they do, and it is the Razor behavior beyond our control that renders the apostrophe as its HTML encoded value at the client.

Regards,
Dimiter Topalov
Telerik by Progress

[Brad]

I'm sorry, but what you're saying is absolutely that Kendo UI Templates do not support non-latin characters.  The link you gave just tells me how to replace the # symbol, which doesn't really help.  I get that the # symbol is reserved, i understand that.  If i remove that # symbol from &#39 however, that will no longer be a turkish character?  It will be gibberish.  I don't see any realistic way to show a turkish character inside this kendo template.

And as far as i can tell, the code that you put above just replaces a single quote with another single quote.  did you mean to put something else?

[Dimiter Topalov]

Hi Brad,

The code snippet in my previous replay meant to replace "'" with an actual apostrophe "'", but "'" got rendered as an apostrophe. Now the snippet is fixed.

It seems there is some misunderstanding here. The "&#39," expression is not related to the Turkish alphabet or any other non-latin letters. It is the HTML encoded value for an apostrophe (').

I can confirm that Kendo UI Templates do support non-latin characters. However, if any character is provided via its HTML encoded value that contains a hash literal (#), this hash literal has to be escaped, or the whole HTML encoded value needs to be replaced with its corresponding symbol.

I hope this clarifies the discussed issue.

Regards,
Dimiter Topalov
Telerik by Progress

[Brad]

I apologize, you're right.  there was a misunderstanding because i missed the apostrophe in turkish.  I can see why that would have caused the problem.  Unfortunately, the reason why i missed that is because turkish wasn't actually my first issue.  Japanese was, which using the characters:

アクセスするためにクリック

in a template, it gets translated to:

アクセスするためにクリック

The hash values here cause an error like before, but unlike the apostrophe example above this doesn't have an easy replace ability.  This is why i was asking about non-latin characters.  I have no idea how to use your method to make this readable.

Additionally, your function replace method, you say that it should be run 'before any widgets that are using try to access it'.  What is a good event for that?  I'm using this template on a listview, and i'm guessing the databound event wouldn't work cause it's after the fact.  Databinding event maybe?

[Daniel]

Hello Brad,

Besides escaping the "#" characters you could also use the Html.Raw helper to prevent the encoding:

<a class="pull-left" href="#=RelevantURL#" target="_blank" title="@Html.Raw(CoBRALocalization.MVC.RootResource.ClickToAccess)">

As for escaping the characters via code - you do not need specific widget event. You could either use a script after the template without document ready handler or a script tag placed anywhere before the helper and a document ready handler.


Regards,
Daniel
Telerik by Progress

 

 

[Brad]

The html.raw idea did not work for me, nor did the other option.  I was trying to make a sample project for you to show my issue, but in the sample project it worked fine.  The main difference however, is that in the sample project i was creating the listview using javascript, but in my original application, i'm using the MVC html helper from kendo to build the listview.  Could that be causing the issue?  Maybe it's just the helper that is the problem?

[Daniel]

Hello again,

For external template there shouldn't be a difference between using the MVC wrapper and the JavaScript initialization. Could you provide the error message so I can check which character(s) are causing the issue?

Regards,
Daniel
Telerik by Progress

 

 

[Brad]

using the japanese characters above, here is the error i get:

kendo.web.js:198Uncaught Error: Invalid template:'

    <div class="media">
        <a class="pull-left" href="#=RelevantURL#" target="_blank" title="&#12450;&#12463;&#12475;&#12473;&#12377;&#12427;&#12383;&#12417;&#12395;&#12463;&#12522;&#12483;&#12463;">
            # if (IsExpired) {#
            <img  src="/COBRAja-JP/Content/images/Information.png?h=30&mode=max" alt="Expired" />
            #} else {#
            <img  src="/COBRAja-JP/Content/images/incAlert.png?h=30&mode=max" alt="Active" />
            #}#
        </a>
        <div class="media-body">
            <div class="media-heading">
                <small><time datetime="#=UnixDateCreated#">#= kendo.toString(DateCreated, 'G') #</time></small>
            </div>
            <p>#=FriendlyMessage#</p>
        </div>
    </div>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="media">\n        <a class="pull-left" href="'+(RelevantURL)+'" target="_blank" title="&';12450;&;$kendoOutput+='12463;&';12475;&;$kendoOutput+='12473;&';12377;&;$kendoOutput+='12427;&';12383;&;$kendoOutput+='12417;&';12395;&;$kendoOutput+='12463;&';12522;&;$kendoOutput+='12483;&';12463;">
            ;$kendoOutput+=' if (IsExpired) {';
            <img  src="/COBRAja-JP/Content/images/Information.png?h=30&mode=max" alt="Expired" />
            ;$kendoOutput+='} else {';
            <img  src="/COBRAja-JP/Content/images/incAlert.png?h=30&mode=max" alt="Active" />
            ;$kendoOutput+='}';
        </a>
        <div class="media-body">
            <div class="media-heading">
                <small><time datetime=";$kendoOutput+='=UnixDateCreated';">;$kendoOutput+='= kendo.toString(DateCreated, \'G\') ';</time></small>
            </div>
            <p>;$kendoOutput+='=FriendlyMessage';</p>
        </div>
    </div>
;$kendoOutput+=;}return $kendoOutput;'

[Daniel]

Hi,

Strange, the characters from the error message does not seem to be encoded by default at least when I tested the case on my side? Could you check the attached sample project and let me know if I am missing something?
I also created an example that demonstrates how to escape all entities from the template via code.

Regards,
Daniel
Telerik by Progress

 

 

[Brad]

no, your attached project works fine for me.  I have no idea what is causing the different in our results.  I even

• moved the japanese to a resource file
• removed all javascript on your example except for the kendo ones i use (like dataviz or kendo.modernizr)
• used a newer version of jquery
• changed the template type to text/x-kendo-tmpl

just anything i could think of to make it more like my actual application, and none of it worked.  I'm pretty stumped.

[Daniel]

Hello,

Perhaps the .NET version or some Web.config configuration is enabling the encoding in your project. Could you specify which version are you using and check if there is anything related to the encoding in your configuration?

Regards,
Daniel
Telerik by Progress

 

 

[Brad]

using .net 4.5.2

only encoding settings i have in web.config are:

<httpRuntime targetFramework="4.5.2" maxRequestLength="52428800" encoderType="System.Web.Security.AntiXss.AntiXssEncoder" enableVersionHeader="false" />

and

<add assembly="System.Text.Encoding, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
        <add assembly="System.Text.Encoding.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />

 

Anything else you can think of to look for?

[Daniel]

Hello,

I tried with the same configuration and the value is encoded by default but the Html.Raw helper still prevents the encoding. Unfortunately I am out of ideas. Does the script to manually escape the characters work in your case?

Regards,
Daniel
Telerik by Progress