Hi,

I need to collapse/expand websplitter pane using javascript.

is there any api or javascript with which i can collapse/expand the websplitter on click of a button.

Arati

Hi Arati,

That api belongs to SplitterPane object. The get_panes() returns array of them. Below is example:

<script type="text/javascript">
function togglePane()
{
 var splitter = $find('WebSplitter1');
 var pane0 = splitter.get_panes()[0];
 pane0.set_collapsed(!pane0.get_collapsed());
}
</script>

<input type="button" onclick="togglePane()" value="toggle" />
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="40px" Width="400px">
  <Panes>
    <ig:SplitterPane runat="server" CollapsedDirection="NextPane"></ig:SplitterPane>
    <ig:SplitterPane runat="server"></ig:SplitterPane>
  </Panes>
</ig:WebSplitter>

Below is my code: i am not able to fire any client script inside "LeftMainContentHolder" contentplance holder. What is property i have to set to enable client event/click?

 <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

                        <ContentTemplate>

                            <asp:ContentPlaceHolder ID="TopContentHolder" runat="server">

                            </asp:ContentPlaceHolder>

                            <ig:WebSplitter runat="server" ID="WebSplitter3" Orientation="Vertical" Height="100%"

                                DynamicResize="false">

                                <Panes>

                                    <ig:SplitterPane ToolTip="Left Pane" Size="80%" CollapsedDirection="None">

                                        <Template>

                                            <asp:ContentPlaceHolder ID="LeftMainContentHolder" runat="server">

                                            </asp:ContentPlaceHolder>

                                        </Template>

                                    </ig:SplitterPane>

                                    <ig:SplitterPane ToolTip="Right Pane" Size="20%" MaxSize="20%" CollapsedDirection="NextPane">

                                        <Template>

                                            <asp:ContentPlaceHolder ID="RightContentHolder" runat="server">

                                            </asp:ContentPlaceHolder>

                                        </Template>

                                    </ig:SplitterPane>

                                </Panes>

                            </ig:WebSplitter>

                            <asp:ContentPlaceHolder ID="BottomContentHolder" runat="server">

                            </asp:ContentPlaceHolder>

                        </ContentTemplate>

                    </asp:UpdatePanel>

Hi hublion,

WebSplitter should not supress browser events in its SplitterPanes and there is no option to enable or disable that.

Your codes do not contain any children in splitter but holders. In order to help you, I need a simple sample which shows that a particular client event fails. I suggest you to debug your application by inserting
debugger;
or
alert('my client event');
lines at the top of your handlers. Maybe handlers are called, but there are exceptions or wrong logic.

You also may debug by replacing you contenplaceholders by a simple test controls with your client events and test if they work.