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

Splitter resize with silverlight content

1 Answer 106 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
paaland
Top achievements
Rank 2
paaland asked on 21 May 2010, 02:11 PM
I have a web page that is divided in two halves using a rad splitter. The left RadPane contains a Silverlight application and the right pane contains web pages. I can resize and make the silverlight pane bigger, but not smaller. I start dragging the splitterbar to the left, but as soon as the mouse enters over the silverlight application it takes focus and the resize is canceled.

I've tried fiddling with z-index and stuff, but I simply cannot make the size of the left pane smaller. Any javascript magic on some client side events I can try? I was thinking I might be able to do something on OnClientBeforeResize and the something else on OnClientResized. But what?


1 Answer, 1 is accepted

Sort by
0
Accepted
Tsvetie
Telerik team
answered on 26 May 2010, 02:54 PM
Hello Paal Andreassen,
In this case, you can use one of the following approaches:
  • Set LiveResize of RadSplitter to true. Please note however, that the re-size will not be smooth even with this setting. For example:
    <telerik:RadSplitter ID="RadSplitter1" runat="server"
        LiveResize="true">
  • Wrap the Silverlight object in a DIV element and hide this DIV element while you move the splitbar. For example:
    In case you are using ContnentUrl:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoad="OnClientLoad">
        <telerik:RadPane ID="RadPane1" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server" ContentUrl="SilverlightApplication1TestPage.aspx"
            OnClientResized="OnClientResized">
        </telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function OnClientLoad(sender,args)
        {
            $get("<%= RadSplitBar1.ClientID %>").onmousedown = window.SplitBarMouseDown;
        }
        function SplitBarMouseDown()
        {
            var iframe = $find("<%= RadPane2.ClientID %>").getExtContentElement();
            iframe.style.display = "none";
        }
        function OnClientResized(sender,args)
        {
            var iframe = $find("<%= RadPane2.ClientID %>").getExtContentElement();
            iframe.style.display = "";
        }
    </script>

    In case you are not using ContnentUrl:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoad="OnClientLoad">
        <telerik:RadPane ID="RadPane1" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server" OnClientResized="OnClientResized">
            <div id="silverlightControlHost">
                <%-- silverlight object --%>
            </div>
        </telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function OnClientLoad(sender, args)
        {
            $get("<%= RadSplitBar1.ClientID %>").onmousedown = window.SplitBarMouseDown;
        }
        function SplitBarMouseDown()
        {
            $get("silverlightControlHost").style.display = "none";
        }
        function OnClientResized(sender, args)
        {
            $get("silverlightControlHost").style.display = "";
        }
    </script>

Regards,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Splitter
Asked by
paaland
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Share this question
or