Editor icons not visible

[Diljeet]

Please see the attached screen shot, the editor renders but there are no icons on the tool bar, I checked editor.png is in the default folder.

 <textarea cols="25" rows="5" id="History" style="width:420px"  name="History"  placeholder="this is a History field" ></textarea>

 $("#History").kendoEditor({
            tools: [
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull"
                   ]
        });

This is urgent  please  help

[Dimo]

Hello Diljeet,

Did you inspect whether the sprite.png file is at the correct location, where the CSS theme expects it to be? Did you inspect whether the button styles are overridden by some other styles on the page? All contemporary browsers provide tools for these tasks.

If the above verifications do not show the cause of the problem, please provide a runnable example or a live URL for further investigation.

Regards,
Dimo
Telerik

[Diljeet]

http://eesea.antheminfotech.net/terminals

this is the working url, editors are placed at the bottom of the page. 

[Dimo]

Hi Diljeet,

The Kendo UI CSS code is from a newer version than the sprite.png image.

Please try upgrading again and correctly.

Regards,
Dimo
Telerik

[Diljeet]

Hi Dimo,

Thanks for your reply.

Can you please provide me the updated  sprite.png image. As i have no idea from where to get the latest image.
Or can you let me know from where i can get this image.

Best Regards.

[Dimo]

Hello Diljeet,

The sprite image is located in

styles / ThemeName / sprite.png

of the Kendo UI installation folder.

http://docs.kendoui.com/getting-started/introduction

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction#manually-add-kendo-ui-to-asp.net-mvc-applications

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/vs-integration/upgrade-wizard

Since it is not clear if there are other non-upgraded files as well, I recommend you to delete all Kendo UI-related stylesheets, Javascript files and wrapper assemblies (if you are using the MVC wrappers) and add them again, following the documentation guidelines.

Regards,
Dimo
Telerik

[Alka]

Hi Dimo,

I have a similar issue where I don't see the editor icons on the editor. When I hover the mouse over the editor tool, I can see the text indicating the type of tool. And as per this thread and the thread http://www.kendoui.com/forums/kendo-ui-web/editor/editor-tool-icons-not-displaying-after-themebuilder-theme-applied.aspx the version of the theme (sprite.png, etc. files) and the scripts (.js files) should be the same.

I don't know how to check the version of the sprite.png and also which of the below two sprite.png files I should check for the version. However, I do see that the -
.css files in the project name>webroot>resources>styles>theme name folder have version V2013.1.514 and .css files in the project name>webroot>styles>theme name folder have version V2013.1.319

project name>webroot>resources>styles>theme name>sprite.png
and
project name>webroot>styles>theme name>sprite.png

Also, I find scripts (.js file) in 2 folders as mentioned below. Which one should I check for the version and compare it's version with the sprite.png file's version.
project name>webroot>resources>js (version V2013.1.514) and
project name>webroot>scripts>js (version V2013.2.716)

Another thing I see is that the editor.png has a different sequence of tools and the sequence of the tools in the actual editor is different. I am not sure if this is relevant or not. Again editor.png is present in these 2 folders: project name>webroot>resources>styles>theme name and project name>webroot>styles>theme name

Please provide me clear instructions on the files I need to change to correct the problem and where can I find these files. Any other steps I need to take to correct this problem. This is urgent! Thanks in advance for your help.

Alka

[Dimo]

Hi Alka,

The sprite images do not have a version specified anywhere, but you need to make sure that you are always copying images together with the theme CSS files when uprading Kendo UI. In this way the CSS files will always be referencing the correct images.

Having three different versions of Kendo UI scripts and stylesheets in a single project is unnecessary, messy and unmaintainable. I recommend you to remove all Kendo UI scripts and stylesheets and take a single fresh copy of them from your Kendo UI installation folder.

http://docs.kendoui.com/getting-started/introduction

Generally, there are two very straightforward and commonsense things that a web developer should do when some background images do not appear:

1. Check whether the CSS styles, which reference the missing images, are applied (if not, they may be missing or be overridden).
2. Check whether the images are placed at the location specified in the CSS code (if not, you will see 404 errors in the browser's console).

Any DOM inspector, which modern browser provide, will help you with these tasks.

Finally, if only the Editor icons are not displayed, while other Kendo UI widgets work fine, then the reason is indeed mismatching versions of the CSS file and the image sprite.

Regards,
Dimo
Telerik

[Alka]

Thanks Dimo. I downloaded latest version of Kendo UI and upgraded the js, css and image files in my project and that did solve the problem. However the rest of the UI of the application got messed up. If I can find out the exact js, css and image files being used for the editor, then I will just change those without touching the rest of the project, to make sure their version matches and the issue I face is resolved without affecting the rest of the UI.

[Dimo]

Hello Alka,

The Editor scripts, styles and images cannot be isolated and upgraded separately. Please investigate what exactly the problem is and provide a runnable demo if you need additional assistance.

Regards,
Dimo
Telerik