kendo scheduler image missing IE 11 with dynamic theme change

5 posts, 0 answers
  1. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 13 Nov 2014 Link to this post

    Hello,

    I have a Dropdown with themes  and when changed i dynamically Change theme of Kendo Scheduler. Doing so works fine in Firefox and Safari Browsers but Problem Comes on IE 11 browser. The theme is changed successfully but the Scheduler Navigation arrow is missing and also the calendar Icons for datetimepicker is missing. Attached the Images how it Looks on FF and IE 11.
    Here is the jquery method for dynamic theme Change.

    function ResetTheme(data) {       
    var skinName = data;
            //alert(skinName);
            var skinRegex = /kendo\.[\w\-]+(\.min)?\.(.+)/i;
            var themeLink = $("head link").filter(function () {
                return (/kendo\./gi).test(this.href) && !(/common|rtl|dataviz/gi).test(this.href);
            });        var currentThemeUrl = themeLink.attr("href");
            var newThemeUrl = currentThemeUrl.replace(skinRegex, "kendo." + skinName + "$1.$2");        var newLink,
                doc = document,
    exampleElement = $("#example"),
    less = window.less,
    isLess = /\.less$/.test(themeLink.attr("href"));
            if (kendo.support.browser.msie && kendo.support.browser.version < 11) {
                newLink = $(doc.createStyleSheet(newThemeUrl));
            } else {
                newLink = themeLink.eq(0).clone().attr("href", newThemeUrl);
                themeLink.eq(0).before(newLink);
            }
           // alert(currentThemeUrl + ' ' + newThemeUrl);
            themeLink.remove();
            if (isLess) {
                $("head style[id^='less']").remove();            less.sheets = $("head link[href$='.less']").map(function () {
                    return this;
                });            less.refresh(true);
            }
            if (exampleElement.length) {
                exampleElement[0].style.cssText = exampleElement[0].style.cssText;
            }
        };
    Let me know how can i fix it for IE 11 browser.

    Thanks

    Anamika
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Nov 2014 Link to this post

    Hi Anamika,

    The provided description suggests that the IE browser does not load new CSS images after a stylesheet is changed. I am not sure why this happens, but you can compare your implementation with the following example, which works correctly in IE as well. You can also test the behavior on our online demo site (first remove the modal overlay of the Scheduler's edit form via the browser's DOM inspector).

    http://jsfiddle.net/dimodi/cra9jv75/

    http://screencast.com/t/ab5d03gh

    http://screencast.com/t/h74k0HGTrf

    Keep in mind that the discussed problem falls outside the scope of our technical support, because switching stylesheets on the fly represents a general web development task, which is not related to Kendo UI, does not require Kendo UI APIs to work, and depends on the browser behavior.

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 28 Nov 2014 in reply to Dimo Link to this post

    Hello,

    I copied the same changeTheme function but it will not show images on IE. I am using the css files not locally but from cloudfront
     <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.3.1119/styles/kendo.default.min.css"  type="text/css"/>
            <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.3.1119/styles/kendo.common.min.css"  type="text/css"/>
            <link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2014.3.1119/styles/kendo.rtl.min.css"  type="text/css"/>

    Could this be the problem

    Anamika
  5. Anamika
    Anamika avatar
    124 posts
    Member since:
    Mar 2014

    Posted 28 Nov 2014 in reply to Anamika Link to this post

    The final finding is if i have http: in href it works fine
    <link rel="stylesheet" href="http://da7xgjtj801h2.cloudfront.net/2014.3.1119/styles/kendo.default.min.css"  type="text/css"/>

    without http: it changes theme but the arrows missing and in editor images are missing, in scheduler arrow is missing.
    I cannot use http: as the site is published as both http and https.

    Not sure how can i fix. the new theme url looks ok but why images missing
  6. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Dec 2014 Link to this post

    Hi Anamika,

    The described behavior looks like a browser bug. The theme stylesheet is loaded correctly, and the paths to the CSS images inside it are relative to the stylesheet location. So the browser should be able to request them. A failure to do so can indicate that the browser is unable to construct valid image URLs, based on the stylesheet's protocol-less URL. Did you check the browser's console to see if there are failing HTTP requests? Is there a request made for the sprite image at all?

    //da7xgjtj801h2.cloudfront.net/2014.3.1119/styles/Default/sprite.png

    If the above assumption is correct, then the only thing that I can suggest you is to include the stylesheets and theme images in your project and load them from your web server.

    Regards,
    Dimo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready