German Umlaut in Client Detail Template

[Raphael]

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

[Tsvetina]

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

[Raphael]

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

[Tsvetina]

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

[Raphael]

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

[Tsvetina]

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

[Raphael]

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

[BVZ]

What should we do if we use LabelFor and not Label?

The German Umlaut ist inside a DataAnnotation of the Model Class

<script id="detailTemplate" type="text/kendo-tmpl">
            <div>
                @Html.LabelFor(vm => vm.importedAt)
                @Html.Kendo().TextBox().Name("test").Value("#= kendo.toString( importedAt,'dd.MM.yyyy') #").ToClientTemplate()
                @Html.LabelFor(vm=>vm.iban)
                @Html.Kendo().TextBox().Name("iban#=transactInID#").Value("#=iban#").ToClientTemplate()
                @Html.LabelFor(vm => vm.transactInID)
                @Html.Kendo().TextBox().Name("transactInID#=transactInID#").Value("#=transactInID#").ToClientTemplate()
                @Html.LabelFor(vm => vm.value)
                @Html.Kendo().TextBox().Name("value#=transactInID#").Value("#=value# #=currIsoCode#").ToClientTemplate()
                @Html.LabelFor(vm => vm.gvcDescription)
                @Html.Kendo().TextBox().Name("gvcDescription#=transactInID#").Value("#=gvcDescription#")

            </div>
        </script>

 

And the DataAnnotation looks like this

[Display(Name = "Geschäftsvorfall)]
public string gvcDescription { get; set; }

 

[Tsvetina]

Hello BVZ,

The best I could find was the solution suggested in this Stack Overflow thread.

Which in a detail template would look like this:

<script id="template" type="text/kendo-tmpl">

    @model Hierarchy.Models.MyViewModel



    @Html.Raw(HttpUtility.HtmlDecode(Html.DisplayNameFor(x => x.gvcDescription ).ToHtmlString()))

  

</script>

Regards,
Tsvetina
Progress Telerik

[Daniel]

I've overridden asp-for on ASP.NET Core for this issue, below my taghelper for label.

 

[HtmlTargetElement("label", Attributes = "asp-for")]
    public class LabelExtTagHelper : TagHelper
    {
        [HtmlAttributeName("asp-for")]
        public ModelExpression For { get; set; }

      
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);

            output.Content.SetHtmlContent($"{System.Net.WebUtility.HtmlDecode(For.ModelExplorer.Metadata.DisplayName)}");
        }
      
    }