This is a migrated thread and some comments may be shown as answers.

kendo scheduler image missing IE 11 with dynamic theme change

4 Answers 156 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Anamika asked on 13 Nov 2014, 01:25 PM

ie_scheduler.png

firefox_scheduler.png

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

4 Answers, 1 is accepted

answered on 17 Nov 2014, 12:53 PM

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.

answered on 01 Dec 2014, 01:15 PM

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.