kendo scheduler image missing IE 11 with dynamic theme change

[Anamika]

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
​

[Dimo]

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

 

 

[Anamika]

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

[Anamika]

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

[Dimo]

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