When a Grid is placed inside a template (e.g. hierarchy), the # symbol needs to be escaped from strings since it is a special key for the Kendo internal logic:
https://docs.telerik.com/kendo-ui/framework/templates/overview#creating-inline-templates
This creates a problem with Unicode letters, since they are automatically encoded by the framework to values containing the # symbol on the client. Currently, a column having Unicode characters in its HtmlAttributes causes an "invalid template" error:
columns.Bound(p => p.Item).Width(200).Title("Item").HeaderHtmlAttributes(new {title = "Item with äöüÄÖÜß"});Creating a .ToolTip("Hover Text") property similar to the existing .Title("Header Text") one will resolve this issue and help users to easily provide tooltips for the column headers.
Workarounds until the issue is fixed:
Workaround 1:
columns.Bound(p => p.Item).Width(200)
.HeaderHtmlAttributes(new {
title = GetEncodedText("äöüÄÖÜß"), @class="encodedHeader" });
...
@{ string GetEncodedText(string title)
{
return Html.Encode(title).Replace("#", "\\#");
} }<script>
$(document).ready(function () {
$("div.k-grid.k-widget").each(function (i, e) {
var grid = $(e).data().kendoGrid;
grid.bind("dataBound", gridDataBound);
grid.bind("detailExpand", function (args) {
var innerGrid = args.detailRow.find("div.k-grid.k-widget").data().kendoGrid;
innerGrid.bind("dataBound", gridDataBound);
});
function gridDataBound(e) {
e.sender.element.find("th.encodedHeader").each(function (i, e) {
var headerCell = $(this);
headerCell.attr("title", $("<textarea/>").html(headerCell.attr("title")).text());
});
}
});
});
</script>2. Workaround:
columns.Bound(p => p.Item).Width(200)
.ClientHeaderTemplate("<span class='headerTemplate' title='Item with äöüÄÖÜß'>Title</span>");Event
definition:
@(Html.Kendo().Grid<OrderPosModel>()
...
.Events(e=>e.DataBound("gridDataBound"))function gridDataBound(e) {
e.sender.element.find("span.headerTemplate").each(function (i, span) {
span.parentElement.title = span.title;
});