Splitter and iframe troubles

[Bob]

Hi,

I have a simple view using a vertical splitter bar. Left of the splitter is a pane containing a Telerik MVC TreeView (for navigation), right of the splitter is a pane containing an iframe HTML element. With any kind of HTML other than iframes, the splitter works great, moving easily left and right and collapsing / expanding.
 
However, once I put an iframe in the pane to the right of the splitter I find that the splitter will easily move left and collapse / expand, but I have trouble moving the splitter to the right (making tree pane bigger and iframe pane smaller). If I grab the splitter bar with left mouse click and move it to the right with the mouse pointer above or below the iframe pane then it moves right, otherwise it doesn't. I guess the iframe is somehow registered to suck up all mouse move events and pass them on to the page in the iframe and my main page (containing the panes & iframe) never sees them.

Are there any ideas? My hunch is something to register perhaps with iframe to get passed on events, or a wrapper that will intercept the mouse movements first before they are passed on to the iframe but I have no idea if feasible or where to start.

I am running VS2008, MVC2, Telerik MVC 2011 Q1 build 315, IE8 on Win7 32-bit.
I checked with Firefox and saw same behavior. A demo project is attached.

Thanks in advance for any help anyone can offer,

Rob

[Rosen]

Hi Rob,

Indeed, this is expected behavior and it is caused by the fact that iframe element will not bubble the events. Therefore, in order to workaround this you should place an element over the iframe while dragging the split bar. I have attached a modified version of the View in question which illustrates a possible implementation.

All the best,
Rosen
the Telerik team

[Bob]

Rosen,

Thanks much, that worked like a charm. I saw on the Internet general ways to fix problems with iframes but couldn't figure out how / where to connect when using the Telerik MVC controls. Nice work with finding the closest pane to overlay.

Rob

[Jon]

I have seen your example, and I was wondering if you had a fix similar for MVC3 and Razor code.  The code listed in your solution is for web forms.

Thanks,

Jon

[Bob]

The solution has much more to do with HTML/Javascript/jQuery than any framework version or view syntax. To convert web forms syntax to Razor bascically the <% is replaced with @. The wrapper syntax changes slighly, but all the client events, DOM manipulation, etc... is still done at the client and is unchanged.

...rest of view...

@(Html.Telerik().Splitter()
    .Name("LayoutSplitter")
    .ClientEvents(events => events.OnLoad("splitter_load").OnResize("splitter_resize"))
    .Panes(panes =>
    {
        panes.Add().Size("330px")
            .MinSize("20%")
            .MaxSize("50%")
            .Collapsible(true)
            .Resizable(true)
            .Scrollable(false)
            .Content(@<p>
                Panel 1</p>);
        panes.Add()
            .Scrollable(false)
            .Content(@<iframe id="iframeContent" src="http://www.telerik.com" height="100%" width="100%"></iframe>);
    }))
<script type="text/javascript">
    function splitter_load() {
        $("#iframeContent").mouseenter(function () {
            var pane = $(this).closest(".t-pane");
            if (pane.parent().find(".t-ghost-splitbar").length > 0) {
                var overlay = $("<div class='overlay'/>");
                overlay.appendTo(pane);
                overlay.css({
                    position: "absolute",
                    width: "100%",
                    top: 0,
                    left: 0,
                    height: "100%"
                });
            }
        });
    }
 
    function splitter_resize(arg) {
        $(this).find(".overlay").remove();
    }
</script>