Change CollapsedDirection of SplitterPane of WebSplitter Using Javascript

215

chittaranjan posted over 13 years ago

Hi,

Below I given a exam which i done with VB.NET and ASP.NET under Infragistics WebSplitter now my task is

I want same out put using Javascript

This is the code what i done

Sourse code:

<%@ Page Language="VB" MasterPageFile="~/Master.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>

<%@ Register Assembly="Infragistics35.Web.v11.1, Version=11.1.20111.1006, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>

<%@ Register Assembly="Infragistics35.Web.v11.1, Version=11.1.20111.1006, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI" TagPrefix="ig" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script type="text/javascript" id="igClientScript">

function WebSplitter1_Expanded(sender, eventArgs)
{

}
function WebSplitter1_Collapsed(sender, eventArgs)
{

}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">

<table style="height: 213px">

    <tr>
    <td>


        <ig:WebSplitter ID="WebSplitter1" runat="server" Height="200px" Width="300px"
           DynamicResize="True" >

            <AutoPostBackFlags Collapsed="On" Expanded="On"
                SplitterBarPositionChanged="On" />

           <ClientEvents Collapsed="WebSplitter1_Collapsed"
                Expanded="WebSplitter1_Expanded" />
            <Panes>
                 <ig:SplitterPane   FrameTitle="Product information" runat="server"
                Size="50%" EnableRelativeLayout="true"     BackColor="#F4F4F4"
             CollapsedDirection="NextPane" >

                <Template>
                SplitterPane 1
                </Template>
                </ig:SplitterPane>
              <ig:SplitterPane FrameTitle="Supplier information" runat="server" Size="50%" EnableRelativeLayout="true" BackColor="#F4F4F4"
            CollapsedDirection="PreviousPane" >
                  <Template>
                SplitterPane 2
                </Template>
                </ig:SplitterPane>
            </Panes>
        </ig:WebSplitter>
    </td>
    </tr>

    </table>

VB Code:

Protected Sub WebSplitter1_Collapsed(ByVal sender As Object, ByVal e As Infragistics.Web.UI.LayoutControls.SplitterPaneCollapsedEventArgs) Handles WebSplitter1.Collapsed
        Dim ID As String, title1 As String
        ID = e.Pane.ID
        If ID = "0" Then

            title1 = WebSplitter1.Panes(1).FrameTitle
            WebSplitter1.Panes(1).CollapsedDirection = Infragistics.Web.UI.LayoutControls.CollapseDirection.None

        End If
        If ID = "1" Then

            title1 = WebSplitter1.Panes(0).FrameTitle

            WebSplitter1.Panes(0).CollapsedDirection = Infragistics.Web.UI.LayoutControls.CollapseDirection.None

        End If

    End Sub

    Protected Sub WebSplitter1_Expanded(ByVal sender As Object, ByVal e As Infragistics.Web.UI.LayoutControls.SplitterPaneExpandedEventArgs) Handles WebSplitter1.Expanded
        Dim ID As String, title1 As String
        ID = e.Pane.ID
        If ID = "0" Then

            title1 = WebSplitter1.Panes(1).FrameTitle
            WebSplitter1.Panes(1).CollapsedDirection = Infragistics.Web.UI.LayoutControls.CollapseDirection.NextPane

        End If
        If ID = "1" Then

            title1 = WebSplitter1.Panes(0).FrameTitle

            WebSplitter1.Panes(0).CollapsedDirection = Infragistics.Web.UI.LayoutControls.CollapseDirection.PreviousPane

        End If
    End Sub

output:

24497

[Infragistics] Viktor Snezhko posted over 13 years ago

Hi Chittaranjan,

WebSplitter does not support changes to configuration of panes on client.

On the other hand, application may access its child html elements on client and modify them. I wrote a sample for you which will show/hide collapse/expand buttons/images in splitter bar. Of course in order to work, those buttons should be enabled on server.

It is possible to add more logic to improve alignment of images using marginTop.

<script type="text/javascript">
function changeSplitter(indexOfPane, next, show)
{
var splitter = $find('WebSplitter1');
var elements = splitter._elements;
var flag = next ? 'n' : 'p';
var img = elements[flag + indexOfPane];
if(!img)
{
  alert('Pane #' + indexOfPane + ' does not have collapse ' + (next ? 'next' : 'previous') + ' image');
  return;
}
img.style.display = show ? 'block' : 'none';
if(!next && elements['n' + indexOfPane])
{
  elements['n' + indexOfPane].style.marginTop = show ? '' : img.style.marginTop;
}
}
</script>

<ig:WebSplitter ID="WebSplitter1" runat="server" Height="200px" Width="400px">
   <Panes>
    <ig:SplitterPane runat="server" CollapsedDirection="NextPane">
    </ig:SplitterPane>
    <ig:SplitterPane runat="server" CollapsedDirection="PreviousPane">
    </ig:SplitterPane>
   </Panes>
</ig:WebSplitter>
<input type="button" value="Hide Previous 0" onclick="changeSplitter(0, false, false)" />
<input type="button" value="Show Previous 0" onclick="changeSplitter(0, false, true)" />
<input type="button" value="Hide Next 0" onclick="changeSplitter(0, true, false)" />
<input type="button" value="Show Next 0" onclick="changeSplitter(0, true, true)" />
Cancel
Reply

Cancel