Grid k-icon not appearing when using local kendo.common.min.css file

4 posts, 0 answers
  1. Dean
    Dean avatar
    12 posts
    Member since:
    Jul 2012

    Posted 24 Oct 2017 Link to this post

    I'm building a local WPF application that uses kendo grids. The application needs to work offline so I'm referencing the kendo css and js files in local directory within my application. Everything is working fine except the icons for filtering and paging aren't appearing within the grid. I've attached a small sample project to show my problem.

    If you uncomment line 45 in MainWindow.xaml.cs to reference the remote copy of kendo.common.css everything works fine, but when referencing the local copy of that file, the images don't appear properly.

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 26 Oct 2017 Link to this post

    Hello, David,

    Thank you very much for the provided runnable project.

    The Kendo UI icons are now font icons and the font should be available as a resource so the icons can appear. I can see that the files are in the correct folder but I am unsure if the WPF application needs an additional configuration to serve the font locally or if it is a matter of the way that paths are declared in the kendo css files combined with the WPF environment.

    I will need more time to tell you what exactly is the issue but it most likely has to do with the URL src path to the WebFontIcons font in the kendo.common.min.css:

    @font-face {
      font-family: 'WebComponentsIcons';
      src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo');
      src: url('fonts/glyphs/WebComponentsIcons.eot?gedxeo#iefix') format('embedded-opentype'), url('fonts/glyphs/WebComponentsIcons.ttf?gedxeo') format('truetype'), url('fonts/glyphs/WebComponentsIcons.woff?gedxeo') format('woff'), url('fonts/glyphs/WebComponentsIcons.svg?gedxeo#WebComponentsIcons') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    I suggest replacing the path with the local path in the CSS file and possibly removing the query part of the URL. I will get back to you when I have more information why you may be missing the font icons.

    Let me know what you think.

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dean
    Dean avatar
    12 posts
    Member since:
    Jul 2012

    Posted 30 Oct 2017 in reply to Alex Hajigeorgieva Link to this post

    Thanks for the reply Alex. I tried updating the CSS file to point to the local path of the glyph files but that didn't fix the issue either.
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    773 posts

    Posted 01 Nov 2017 Link to this post

    Hello, David,

    I am sorry to hear that the suggestion produced no results.

    I am wondering if the reason lies with the WebBrowser component and its limitations to load custom fonts. Kendo UI Supports the browsers listed here:

    https://docs.telerik.com/kendo-ui/intro/supporting/browser-support

    Are you able to add another custom font to the page from the local files and use that in the application?

    Look forward to hearing back from you.

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top