This is a migrated thread and some comments may be shown as answers.

UTF-8 Characters Not Rendered in Grid Cell

1 Answer 1473 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 06 Jan 2016, 04:42 PM

Hi,

I have a grid bound to java script array.  The problem is utf-8 characters are not rendered, instead the escape sequence is displayed.     For example in utf-8 176 is the degree symbol.    Instead of the degree symbol the grid cell displays '°'

 

Thankyou!

Example code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
  <p>THIS WORKS:    PREHEAT oven to 350&#176;F for glass </p>
    <style>html { font: 12px sans-serif; }</style>

    <div id="grid"></div>

    <script type="text/javascript" charset="utf-8">
        var sampleData = [
            {ProductID: 1, ProductName: 'PREHEAT oven to 350&#176;F for glass or' },
 
        ];
 
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: function (e) {
                        // on success
                        e.success(sampleData);
                        // on failure
                        //e.error("XHR response", "status code", "error message");
                    },
                    
                },
              
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                    
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
     
                columns: [
                    { field: "ProductName", title: "Mobile Phone" },

                ] 
      
            });
        });
    </script>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 08 Jan 2016, 11:49 AM
Hello Robert,

In order to resolve the issue you have to set the encoded column property to false.


Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Robert
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or