Wrong processing french letters on .Net Core Kendo.Mvc, Version=2022.3.913.0

[Vladyslav]

Cannot create grid with french title 'Détail'

var res = html
            .Kendo()
            .Grid<object>()
            .Name("Test")
            .Columns(x =>
            {
                var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
                var strCreated = new string(arr); //"Détail" - get from localization from french
                x.Template(string.Empty)
                .HtmlAttributes(new {title = strCreated});
            });

        var ws = res.ToClientTemplate().ToString();

        //Détail => D\u0026#xE9;tail
        //<div id="Test" name="Test"></div><script>kendo.syncReady(function(){jQuery("\#Test").kendoGrid({"columns":[{"attributes":{"title":"D\u0026#xE9;tail"}}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}});});<\/script>

That's why cannot parse template on client side.

Code

res.ToComponent().VisibleColumns[0].ToJson()

returns 'Détail' when Framework returns 'Détail'.

 

Some investigations give me that on Core your code is like

        HtmlEncoder encoder = HtmlEncoder.Default;

        var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
        var strCreated = new string(arr); //Détail
        var encoded2 = encoder.Encode(strCreated);
        //endoded == "Détail"

When old code is like

var arr = new char[] { (char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
string s = HttpUtility.HtmlAttributeEncode(strCreated).Replace(" ", " ").Replace("'", "'");
s = HttpUtility.HtmlDecode(s);
//s == "Détail"

 

[Alexander]

Hi Vladislav,

I noticed that this is a duplicate of a support thread you previously opened. Nevertheless, for the benefit of the community, I will update this thread as soon as I receive further confirmation regarding the matter.

In the meantime, I'm posting the suggested workaround here as well:

• Wire to the document.ready() event and get the grid's columns through its built-in columns configuration.

• Filter out the desired column using the conventional filter() method.

• Explicitly set the desired attribute programmatically by utilizing the setOptions() built-in method of the Grid.

Here is an example:

<script type="text/javascript">
        $(document).ready(function(){
            var grid = $("#grid").getKendoGrid(); // Get the Grid's reference.
            var column = grid.columns.find(function(v, i) { return grid.columns[i].field == 'ProductName'; }); // Filter out the desired column by its field.
            column.attributes = {"title":"Détail"}; // Set the desired attribute.
            grid.setOptions({ // Update the column options of the Grid.
                columns: grid.columns 
            });
        })
</script>

This would produce the following result within the HTML markup:



For your convenience, here is a Telerik REPL example that tackles this approach:

Telerik REPL for ASP.NET Core Example

Kind Regards,
Alexander
Progress Telerik