[Solved] Strange characters in different Kendo objects

[Chase]

We are noticing these characters "â€<" showing up intermittently after updating our kendo-angular dependencies to 15.5.0.
It's not an issue we are able to reproduce every day, and sometimes reloading will fix it, but it will appear at the beginning of kendo window headers, and options in kendo dropdowns. We have not changed anything about our code, nor are we using any special characters ourselves in these locations.

Our angular version is 17.3.12

Is this a known issue? What would the fix be?

Thanks.

[Zornitsa]

Hi Chase,

Based on my understanding, the appearance of the strange characters shown in the screenshots does not seem to be particularly linked to the Kendo UI for Angular components. The issue appears to be rather related to the loading of some fonts or the UTF-8 encoding of the application. 

On that note, I would suggest doing some research online for issues similar to the experienced one. For your convenience, I am linking here some resources I found, which might prove helpful in your scenario as well:

• https://stackoverflow.com/questions/2477452/%C3%A2%E2%82%AC-showing-on-page-instead-of 
• https://stackoverflow.com/questions/45198803/i-get-the-wrong-character-even-using-html-encoding 
• https://blog.codeasite.com/weird-characters-like-a-are-showing-up-on-my-site/ 
• https://www.i18nqa.com/debug/utf8-debug.html 

Furthermore, in case the strange characters replace some letters in your case, what I can also suggest is trying to load the particular font that contains these letters since the browser may not have loaded a suitable font for them to appear correctly:

• https://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/embedded-fonts#using-css-declarations 

In case the issue persists, it would be great if you could provide an isolated runnable example that reproduces the problematic behavior, or the data that is used in the application, so that we can try debugging it and provide further assistance if needed.

Please observe the provided information and let me know how it goes.

Regards,
Zornitsa
Progress Telerik

[Matthew]

I think this *may* have something to do with the local *.css files...  When I open up classic-silver.css in Visual Studio, I get the "Inconsistent Line Endings" notification asking me to normalize the line endings.  This to me says that the *.css file was not saved as a UTF-8 file, which could be the source of the issue.  Are the *.css files saved in UTF-8 format?

[Zornitsa]

Hi Matthew,

I am not entirely sure that I understand which CSS files you are referring to. Are you perhaps talking about the CSS files provided by the Kendo UI Themes:

• https://www.telerik.com/kendo-angular-ui/components/styling#using-precompiled-css

In this line of thought, can you please elaborate more on this matter and share more details about the referred CSS files in your scenario? Is the described issue related to the Kendo UI for Angular components, and are the CSS files the ones coming from the  Kendo UI Themes, which provide the proper rendering and styling of the components? This information will help me provide further assistance on the matter.

Thank you in advance.

Regards,
Zornitsa
Progress Telerik

[Matthew]

In case anyone is wondering, this is because there are Zero-Width Space (ZWSP) characters in the *.css files.  You must replace all ZWSP special characters with a normal space.  If you open the file in Notepad++ and enable view --> Show non-printing characters, you will be able to find the ZWSP characters.  Highlight them and replace them by doing a find and replace all with a space instead of the ZWSP. 

[Bhavika]

Here are some common causes and solutions:

1. Encoding Issues: If you're loading data from a server, ensure that the server is sending data in UTF-8 encoding. You can check this by looking at the response headers. In some cases, you might need to specify the encoding in your server settings.

2. Data Format: Ensure that the data you are binding to the Kendo UI objects (like grids, dropdowns, etc.) is correctly formatted. Sometimes, unexpected characters can appear if the data is not properly serialized or deserialized.

3. Localization Settings: Kendo UI supports localization. If you're using localized strings, ensure that you have correctly configured the culture settings. You can set the culture globally or on individual Kendo widgets.

4. HTML Entities: If your data includes HTML entities (e.g., &, <, etc.), make sure that they are being rendered correctly. You might want to decode these entities before binding them to the Kendo UI components.

5. Inspect Data: Use browser developer tools to inspect the data being passed to the Kendo UI objects. This can help identify any anomalies or unexpected characters.

6. JavaScript Functions: If you're manipulating the data through JavaScript functions, ensure that you're not inadvertently introducing characters (e.g., through string concatenation or manipulation).

7. Third-party Libraries: If you're using any third-party libraries alongside Kendo, check for conflicts that might alter the data.