German Umlaut in Client Detail Template

7 posts, 0 answers
  1. Raphael
    Raphael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 15 Jun Link to this post

    Hello,

    in my application I use a grid that works with client detail template via ClientDetailTemplateId property. In the client detail template I want to show a label with german umlauts like:

    @Html.Label("olb_currentaccount_overdraftcommission", "Überziehungsprovision", new { @class = "detail-label" })

    Whenever there is a german umlaut in the label text I receive an invalid template exception. The raw HTML code looks like this:

    <label class="detail-label" for="olb_currentaccount_overdraftcommission">&';220;berziehungsprovision</label>

     

    Is there any way to use german umlauts for a HTML label in a client detail template?

    Any help is appreciated.

    Regards

    Raphael

  2. Tsvetina
    Admin
    Tsvetina avatar
    2073 posts

    Posted 19 Jun Link to this post

    Hello Raphael,

    This issue happens because the Views are rendered in the browser with encoded characters, which breaks the template syntax. This could be caused by saving your View files with a different encoding than UTF-8 or missing a setting in your web.config to serve content with UTF-8 encoding. This Stack Overflow thread discusses the possible settings that you can try:
    How to force ASP.NET MVC to read .cshtml files as UTF-8?

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Raphael
    Raphael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 19 Jun Link to this post

    Hi Tsvetina,

    unfortunately non of your suggested solutions is working.

    • The file encoding of all cshtml files in my project is utf-8 (see screenshot)
    • I tried both solutions suggested by stackoverflow:
    <system.web>
      <compilation debug="true"
                   targetFramework="4.5.2" />
      <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" />
      <httpRuntime targetFramework="4.5.2" />
      <pages>
        <namespaces>
          <add namespace="Kendo.Mvc.UI" />
        </namespaces>
      </pages>
    </system.web>

     

    I still get the same error when loading a client detail template containing german umlauts.

    Regards

    Raphael

  4. Tsvetina
    Admin
    Tsvetina avatar
    2073 posts

    Posted 20 Jun Link to this post

    Hi Raphael,

    Can you confirm if the label that you are declaring is inside a Kendo UI widget? If so, you need to call the ToClientDetailTemplate() method of the widget in question to ensure that encoded values are escaped inside the template.

    I copied your label definition in the the local version of the Detail Template demo and when I used it as a standalone part of the template, it rendered successfully. When I copied the Überziehungsprovision string into one of the detail template Grid buttons, I could reproduce the error, but only with the ToClientTemplate call removed.
    If the problem persists, would it be possible that you show you full detail template definition?

    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Raphael
    Raphael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 21 Jun Link to this post

    Hi Tsvetina,

    my client detail template is not inside a Kendo UI widget. It is placed directly inside in the detail template JavaScript. Therefore there is no option to call ToClientTemplate on @Html.Label()

    Here is a small example which shows the problem:

    @{
        ViewBag.Title = "Home Page";
    }
     
    @model List<TelerikMvcApp2.Models.Account>
     
    @(Html.Kendo().Grid(Model)
          .Name("Grid")
          .ClientDetailTemplateId("accountDetailsTemplate")
          .Columns(columns => {
              columns.Bound(account => account.AccountNumber);
              columns.Bound(account => account.Name);
          })
          .DataSource(dataSource => dataSource
              .Ajax()
              .ServerOperation(false)
          )
          .Scrollable(scroll => scroll.Height(800))
          )
     
    <script id="accountDetailsTemplate" type="text/kendo-tmpl">
        @Html.Label("foundationdate", "Gründungsdatum")
        @(Html.Kendo().TextBox()
              .Enable(false)
              .Name("foundationdate")
              .Value("#=FoundationDate#")
              .ToClientTemplate())
    </script>

     

    The model class is a dummy that only contains three properties AccountNumber, Name and FoundationDate. The model is filled in the corresponding controller.

    Regards

    Raphael

  6. Tsvetina
    Admin
    Tsvetina avatar
    2073 posts

    Posted 23 Jun Link to this post

    Hi Raphael,

    I managed to reproduce this in a standalone project and the only solution that I found to work consistently is to use Raw rendering of the text to prevent encoding of the string:
    @Html.Raw("Gründungsdatum")

    You can put this inside a static label definition:
    <label>@Html.Raw("Gründungsdatum")</label>


    Regards,
    Tsvetina
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Raphael
    Raphael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 27 Jun Link to this post

    Hi Tsvetina,

    although I think that this is not a very beautiful solution, it is fixing my problem, too.

    Thank you very much for your help!

    Regards

    Raphael

Back to Top