foreign language in template issue

16 posts, 0 answers
  1. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 02 Aug Link to this post

    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&#39;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?

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 04 Aug Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 05 Aug in reply to Dimiter Topalov Link to this post

    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?

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 09 Aug Link to this post

    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 "&#39;" 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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  6. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 09 Aug in reply to Dimiter Topalov Link to this post

    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?

  7. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 11 Aug Link to this post

    Hi Brad,

    The code snippet in my previous replay meant to replace "&#39;" with an actual apostrophe "'", but "&#39;" 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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  8. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 11 Aug in reply to Dimiter Topalov Link to this post

    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:

    &#12450;&#12463;&#12475;&#12473;&#12377;&#12427;&#12383;&#12417;&#12395;&#12463;&#12522;&#12483;&#12463;

    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?

  9. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 16 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  10. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 17 Aug in reply to Daniel Link to this post

    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?
  11. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 22 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  12. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 22 Aug Link to this post

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

  13. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 24 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  14. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 30 Aug in reply to Daniel Link to this post

    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.

  15. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 01 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  16. Brad
    Brad avatar
    13 posts
    Member since:
    Jun 2016

    Posted 11 Sep in reply to Daniel Link to this post

    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?

  17. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Sep Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready