KendoUI cannot display grid icon property after deploy in IIS

[man mau]

Our target upgrade the KendoUI to latest version  i.e. v2019.2.619 and it can be able to run in VS2019 locally without any issue. However, after the application deployed to IIS server, the icon cannot show properly. I have using browser (Chrome) debug mode to trace and find that the content value in kendo.common.min.css is changed as below in IIS server

.k-i-more-vertical:before {  content: ""; }

 

In BundleConfig.cs, we define the Bundle as below sample code :

            bundles.Add(new StyleBundle("~/bundles/kendoUI").Include(

                "~/Content/styles/kendo.common.min.css",
                "~/Content/styles/kendo.default.min.css"
            ));

 

In addition , we also check the source code in IIS server and the content is correct, here is the sample

.k-i-more-vertical:before {

    content: "\e031"
}

Remark : The DejaVu and glyphs is already added in source code as  ~\Content\styles\fonts\DejaVu and  ~\Content\styles\fonts\glyphs

 

Please advise the possible solution. Thanks you very much. 

 

 

[Dimitar]

Hello,

The described issues occur if the virtual directory for the StyleBundle for the Kendo UI styles has a root directory different than the physical one. This makes the relative path used for referencing the fonts incorrectly.

You should be able to resolve the issue if you define a separate StyleBundle for Kendo UI styles like this one (note that you may need to modify the path to match your folder structure exactly):

bundles.Add(new StyleBundle("~/Content/kendo/2018.3.1017/css").Include(
                "~/Content/kendo/2018.3.1017/kendo.common-material.min.css",
                "~/Content/kendo/2018.3.1017/kendo.material.min.css"));

You can read more about the issue and how to properly bundle the resource in the following section of the documentation:

• CSS Bundling.

In addition to the above, please make sure that the fonts, textures, images, and ThemeName folders are also correctly included in the project as described in the Themes Documentation:

• Theme-related Folders.

Also, please make sure that all of Kendo-relates stylesheets and font are correctly loaded once the application is loaded in the browser. This could be verified through the browser 'Network' tab.

I hope this helps. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik