image3

Hi Prajakta,

The WebSplitter does not support hidding splitter bar and overlapping splitter panes. The best I can do for you, is to give example how to change size (width or height depending on orientation) of a splitter pane and to get reference to internal element, which represents splitter bar. Below example reduces size of 1st pane in a loop (like animated collapse), but instead of real collapse and hiding pane completely, it stops at size equals to 10px and hides splitter bar located between 1st and 2nd panes.

Note: if you want expand with similar functionality, then you may show splitter bar and after that increase size of 1st splitter pane to desired value. Size of pane within pane.set/get_size is measured in pixels and it should be number, but not string.

<script type="text/javascript">
 function collapse() {
   var splitter = $find("WebSplitter1");
   var pane = splitter.getPaneAt(0);
   var size = pane.get_size();
   var timer = setInterval(function() {
      size -= 20;
              pane.set_size(Math.max(10, size));
              if (size <= 10) {
           clearInterval(timer);
                         var barFor1stPane = splitter._elements['b0'];
           // or
           //var barFor1stPane = $(splitter.get_element()).find("[mkr='b0']")[0];
           barFor1stPane.style.display = 'none';
      }
       }, 30);
  }
</script>

Can wrap my my division which is present in splitterpane1 at run time so that it can fly out on click of divgray.also on click of arrow on divgray is it possible to wrap the div inside the splitterpane1?

I forgot to mention, that explicit moving of html elements using javascript may have side effects. For example, if WebSplitter or content of SplitterPane was wrapped into UpdatePanel and content of SplitterPane was moved to another container and async postback of UpdatePanel was triggered, then response may generate doubled elements or raise exceptions.
After a full postback layout of moved elements will be lost.
In these situations an application is responsible for any side effects.

Hi Prajakta,

That is possible to implement.
SplitterPane (base class $IG.LayoutPane) has method getBody(), which returns reference to container element. So, application may remove that element from its parent node and insert it into another container.

Application also may insert its own "wrapper" element (for example DIV) and all content of splitter pane insert into that wrapper-container rather than directily into SplitterPane. In this case application may move that wrapper div anywhere.

Sample below shows examples for both those cases.
On popUp1 button click, the custom wrapper DIV is moved into container1 and on restore1 button click that element is moved back into SplitterPane1.
On popUp2 button click, whole SplitterPane2 element is moved into container2 and on restore2 button click the SplitterPane2 is moved back into its original container.

<div id="container1" style="width:300px;height:300px;border:1px solid blue"></div>
<div id="container2" style="border:1px solid orange"></div>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="400px" Width="650px">
 <Panes>
   <ig:SplitterPane runat="server">
     <Template>
       <div id="ContentOfSplitterPane1" style="width:100%;height:100%;background:red;">
          this is content of splitter pane 1
                </div>
     </Template>
   </ig:SplitterPane>
   <ig:SplitterPane runat="server">
      <Template>
         <asp:Button ID="Button1" runat="server" Text="Button" />
      </Template>
   </ig:SplitterPane>
 </Panes>
</ig:WebSplitter>

<script type="text/javascript">
 var contentOfPane2, parentOfPane2;
 function popUp1() {
   var content = document.getElementById("ContentOfSplitterPane1");
   var container = document.getElementById("container1");
   container.appendChild(content);
  }
 function popUp2() {
   contentOfPane2 = contentOfPane2 || $find("WebSplitter1").get_panes()[1].getBody();
   parentOfPane2 = parentOfPane2 || contentOfPane2.parentNode;
      var container = document.getElementById("container2");
   container.appendChild(contentOfPane2);
 }
function restore1() {
   var content = document.getElementById("ContentOfSplitterPane1");
   var container = $find("WebSplitter1").get_panes()[0].getBody();
   container.appendChild(content);
 }
function restore2() {
  if (parentOfPane2)
    parentOfPane2.appendChild(contentOfPane2);
 }
</script>
<input type="button" value="pop up splitter pane 1" onclick="popUp1()" /><br />
<input type="button" value="pop up splitter pane 2" onclick="popUp2()" /><br />
<input type="button" value="restore splitter pane 1" onclick="restore1()" /><br />
<input type="button" value="restore splitter pane 2" onclick="restore2()" />