Unplanned
Last Updated: 25 Feb 2020 09:36 by ADMIN
George
Created on: 18 Feb 2020 17:42
Category: Chart
Type: Feature Request
0
Category field doesn't handle encoded characters

Hello,

We have an issue where encoded characters (for example: ö) in the chart category field cause the label to be misaligned.

You can see this in the following dojo example here: https://dojo.telerik.com/aMEYaziy

This dojo is based on your example (https://demos.telerik.com/kendo-ui/bar-charts/index) but I've added an encoded 'รถ' character to the label for Februrary.

In our application we are passing our the labels down via ajax, and defining the field in series.categoryField (as oposed to the hard-coded values in your demo and dojo), but the effect is the same.

Please let us know what the problem is and how we can resolve it.

Thank you,

George

7 comments
ADMIN
Alex Hajigeorgieva
Posted on: 25 Feb 2020 09:36

Hello, George,

The link to the public item is below:

https://feedback.telerik.com/kendo-jquery-ui/1454266-category-field-doesn-t-handle-encoded-characters

Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
George
Posted on: 24 Feb 2020 09:32

Hi,

That's fine.

Thanks. 

ADMIN
Alex Hajigeorgieva
Posted on: 21 Feb 2020 14:00

Hello, George,

Would you mind if I convert this thread to a public Feedback item so others can upvote it?

The more popularity an item gets, the sooner it gets pushed forward for implementation because of the higher impact it has.

Let me know if you would like me to do that.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
George
Posted on: 20 Feb 2020 15:18

Thanks Alex,

I've got that working in our app. Thanks very much for your help.

Could I suggest that you raise this with your development team, so that html-encoded text is handled without work-arounds in future?

Many thanks,

George

ADMIN
Alex Hajigeorgieva
Posted on: 20 Feb 2020 09:02

Hello, George,

For the remote binding scenario, you can use either option:

  • use the data source schema model field parse function to process that particular field 

https://dojo.telerik.com/EnOweVuL/2

           schema:{
                model: {
                  fields:{
                    month: { parse: decodeEntities } // where month is the categoryField
                  }
                }
              }
  • use the dataSource requestEnd event to loop through all of the data and decode each field at that point 

https://dojo.telerik.com/@bubblemaster/ikELUBOG

            requestEnd: function(e){
                var data = e.response;
                for(var i=0; i< data.length; i++){
                	data[i].month = decodeEntities(data[i].month);
                }
                return data;
              }

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
George
Posted on: 19 Feb 2020 15:00

Hi Alex,

Thanks for the response. How do these solutions apply when the categories are sent via ajax, after the chart control is initialised?

As I said, we receive the categories via ajax, and use the series.categoryField configuration to specify the field from which to read the text value.
i.e.
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.categoryfield

Thanks,

George

ADMIN
Alex Hajigeorgieva
Posted on: 19 Feb 2020 13:52

Hello, George,

To overcome this issue, you can decode the categories before passing them to the chart:

	function decodeEntities(input) {
          return $("<div>").html(input).text();
        }
      
      	var categories = ["Jan", "Feb&#246;", "Mar", "Apr", "May", "Jun"].map(decodeEntities);

https://dojo.telerik.com/@bubblemaster/eJapISiW/2

There is another way of including HTML entities as illustrated in this how-to article:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/various/html-in-axes-labels

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.