Missing icons for GRID and Datepicker on deployment

[Pankaj]

I have recently started working on KENDO UI stack for ASP.NET MVC.

Question: The icons for the GRID and DatePicker are missing in the deployment.
Looked at the resolution (link below) for  missing icons, but could not figure out where are the FONT-files and what exactly need to set in the web.config.
http://www.kendoui.com/forums/kendo-ui-mobile/general-discussions/2012-3-1114---kendo-mobile-all-min-css---missing-icons.aspx
If some one could help me walk through Step by Step how to resolve the missing icons issue on deployment of an ASP.Net application.

Thank You,
Pankaj Kumar

[Ignacio]

Hi Pankaj, 

Are you sure all your files (pngs, tiff, etc) are included in your solution?
You need to make sure of this.
Otherwise they dont get uploaded to the server.

This has happened to me several times before :)

[Pankaj]

Hi Nikobellic,
I checked the files. They are in the project.
Not sure why it is not showing in the deployment.
Thx
Pankaj

[Dimo]

Hi Pankaj,

Does the problem occur on the production server only? If yes, then the problem could be related to incorrect bundling. Please refer to our documentation.

http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction#using-kendo-ui-in-asp.net-mvc-4-application

Pay special attention to the yellow note at the end of point 8

If the problem seems to be caused by something else, then please inspect the HTML output wth a DOM inspector to check whether the background image styles are applied correctly and whether the referenced images are at the expected location.

Regards,
Dimo
Telerik

[tiffany]

Hi,

I had the same problem, after I publish the project, all kendo icons not showing when browsing the website through IIS. I'm using version 2014.1.528, and visual studio 2013 asp.net MVC5.
I can see all kendo icons very well if i run the project in debug mode, but after publish it to IIS, all icons gone even the dropdownlist arrow button, and the arrow of the grid page size dropdown. the code in my BundleConfig.cs looks like this:

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
            "~/Scripts/kendo/2014.1.528/kendo.all.min.js",
            "~/Scripts/kendo/2014.1.528/kendo.aspnetmvc.min.js"));

            bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
                "~/Content/kendo/2014.1.528/kendo.common-bootstrap.min.css",
                "~/Content/kendo/2014.1.528/kendo.bootstrap.min.css",
                "~/Content/kendo/2014.1.528/kendo.common.min.css",
                "~/Content/kendo/2014.1.528/kendo.default.min.css"
                ));

is there anything wrong?
Thanks a lot
Tiffany

[Dimo]

Hi Tiffany,

Please refer to the following forum post:

http://www.telerik.com/forums/asp-mvc-css-minification-breaks-kendo-bootstrap#5_PIevmzV0iIW0G9Kx8R-g

The most important part is:

"the easier way to achieve the desired correct loading of theme images is to make the virtual bundle URL match the Kendo UI CSS files' physical location"

Regards,
Dimo
Telerik

 

 

[tiffany]

Hi Dimo,

Thank you for your reply, the instruction is very helpful. everything is working for me now.

Thanks
Tiffany

[Ashley]

Hey guys, it occurred to me. I am using the Kendo UI grid example. Some icons such as arrow are missing. In android device, some icons are missing. However, the icons show in ios device but totally wrong ones. I tried the above solutions but could find the icon folder. 

Please help me out. 

Thanks 

[Konstantin Dikov]

Hello Ashley,

If you are using the latest version of the Kendo UI suite, please ensure that you are loading the font file containing the font icons:

• http://docs.telerik.com/kendo-ui/styles-and-layout/icons-web

The font files should be located in your installation folder under "styles/fonts/glyphs".


Regards,
Konstantin Dikov
Telerik by Progress

[David]

Help me, as unexperienced learner on the job, try to understand, because I'm experiencing the same symptoms although it might be a bit different cause here.

In my deploy/integration test environment with IIS, a direct link to an icon in Index.html page shows fine.

<img src="~/Content/images/folder.png" />

 

In the same environment, a direct link to an icon in a template for kendogrid column doesn't show.

$("<div/>").appendTo(e.detailCell).kendoGrid({
                dataSource: {
                    data: e.data.MDReferences
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [{
                    template: "<div><img src=\"~/Content/images/folder.png" />#:Title #</div>",
                    field: "Title",
                    title: "Title",
                    width: 40
                }, {
                    field: "ClassName",
                    title: "ClassName",
                    width: 20
                }]
            });

 

That is something I do not understand because why should the link have a different meaning if used as template or used on the html page? Is it caused by very simply missing escaping for the ~-sign or is it more complex?

[David]

Noticed a typo: missing the escape for the src-attribute in the template definition. This doens't change the question, however because with correct escaping the issue is still there.

template: "<div><img src=\"\~/Content/images/folder.png\" />#:Title #</div>",

[Konstantin Dikov]

Hi David,

To get the same result as with the external img tag you could use the following:

template: "<div><img src=\"~/Content/images/folder.png\" />#:Title #</div>",

However, for reference images/files in HTML, please refer to the following forum thread and article:

• https://stackoverflow.com/questions/3655059/html-pick-images-of-root-folder-from-sub-folder
• https://www.w3schools.com/html/html_filepaths.asp

The "~" symbol will be handled as a folder and will not resolve the path.


Regards,
Konstantin Dikov
Progress Telerik