<Object> Tag Hides Sub Menu Items

[Andrew]

Hi,

I am currently in the process of migrating from the MVC controls to the Kendo UI.
For the MVC controls, there was a work around to the old IE bug where menu sub items were hidden behind object tags. This work around can be seen below.

if ($.browser.msie) {

    var oldFxPlay = $.telerik.fx.play;

 

    $.telerik.fx.play = function () {

 

        var target = $(arguments[1]);

        if (target.is(".t-menu .t-group") && !target.find("iframe").length) {

            target.append("<li style='width:100%;height:100%;z-index:-1;position:absolute;top:0;left:0;'>" +

                      "<iframe src='#' frameborder='0' style='width:100%;height:100%;z-index:-1;position:absolute;'></iframe>" +

                  "</li>");

        }

        oldFxPlay.apply(this, Array.prototype.slice.apply(arguments));

    };

}

I now need something similar for the Kendo UI menu. Is there anything available?

Many thanks in advance for your support.

[Dimo]

Hi Andrew,

You can inject an iframe in the Menu's Open event:

function onOpen(e) {
    if ($.browser.msie) {
        var groupUL = $(e.item).children(".k-group"),
            iframePlaced = groupUL.find(".iframeWrapper").length > 0;

        if (!iframePlaced) {
            groupUL.append("<li class='iframeWrapper' style='width:100%;height:100%;z-index:-1;position:absolute;top:0;left:0;'>" +
                "<iframe frameborder='0' style='width:100%;height:100%;z-index:-1;position:absolute;'></iframe>" +
            "</li>");
        }
    }
}

Overriding a prototype, similar to the previous approach, seems impossible, unfortunately. You will need to apply the above workaround for each Menu instance that needs it separately.


Regards,
Dimo
the Telerik team

[Andrew]

Hi Dimo,

Thank you very much for your support, that works great for me.

Regards

Andrew