Splitter resize with silverlight content

2 posts, 1 answers
  1. paaland
    paaland avatar
    17 posts
    Member since:
    Jun 2009

    Posted 21 May 2010 Link to this post

    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?


  2. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 26 May 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top