Splitter resize with silverlight content

[paaland]

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?

[Tsvetie]

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.