Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Splitter / Client-side API

Click on the links below the splitter and see the result. Check the source code to see how the actions are implemented. See also the Client Side Events example.
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
-----------------
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Left Pane - 120px
Middle Pane1 - 100px
End Pane - free size

Toggle Collapse on 'Left Pane' Toggle Increase Splitter size Change External Url using client-side API
Toggle Collapse on End Pane Toggle Increase 'Left Pane' size Change External Url using 'target' attribute
Scroll 'Left Pane' with 50px Toggle 'Middle Pane' locked state Get 'Left Pane' state as JSON string
Change Splitter ResizeMode Print the content of 'Left Pane'


  • Client-Side API

    RadSplitter provides a flexible client-side API that allows you to change easily the configuration in the browser.

    1. Getting the RadSplitter client-side object:

      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      

    2. Once you get the client-side object of RadSplitter, you can use the getPaneById method to get the instance of a particular pane. Example:

      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      	var pane = splitter.getPaneById("RadPane1");
      
      You can also use the getPaneByIndex method to get an instance of a pane. Example:
      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      	var pane = splitter.getPaneByIndex(1);
      
      You can also get the collection of all panes in the splitter using the getPanes method:
      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      	var panes = splitter.getPanes(); // get the panes collection
      	// loop the the collection
      	for (var i=0; i < panes.length; i ++)
      	{
      		var paneObj = panes[i]; // get instance of the RadPane
      	}
      
    3. Using the client-side API you can collapse, expand, resize. Examples:

      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      	var pane = splitter.getPaneById("RadPane1");
      	var isCollapseSuccess = pane.collapse(); // collapse this pane
      	var isExpandSuccess = pane.expand(pane); // expand this pane
      	pane.resize(100); // increase panes size with 100px
      

    4. You can use the get_width, get_height methods to get the size of the splitter or panes. Example:

      	var splitter = $find("<%= RadSplitter1.ClientID %>");
      	var splitterWidth = splitter.get_width();
      	var splitterHeight = splitter.get_height();
      
      	var pane = splitter.getPaneById("RadPane1");
      	var paneWidth = pane.get_width();
      	var paneHeight = pane.get_height();
      

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.ClientSideApi.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div class="bigModule" style="margin-bottom: 40px">
            <div class="bigModuleBottom">
                Click on the links below the splitter and see the result. Check the source code
                to see how the actions are implemented. See also the <b>Client Side Events</b> example.<br />
            </div>
        </div>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="200" Width="600">
            <telerik:RadPane ID="LeftPane" runat="server" Width="120">
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                -----------------<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
                Left Pane - 120px<br />
            </telerik:RadPane>
            <telerik:RadSplitBar runat="server" CollapseMode="Both" />
            <telerik:RadPane ID="MiddlePane1" runat="server" Width="100">
                Middle Pane1 - 100px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward" />
            <telerik:RadPane ID="ExternalContentPane" ContentUrl="http://www.telerik.com" runat="server"
                Width="300" />
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server" />
            <telerik:RadPane ID="EndPane" runat="server">
                End Pane - free size
            </telerik:RadPane>
        </telerik:RadSplitter>
        <br />
        <table cellpadding="5">
            <tr>
                <td>
                    <a href="javascript:ToggleCollapsePane('LeftPane')">Toggle Collapse on 'Left Pane'</a>
                </td>
                <td>
                    <a href="javascript:ResizeSplitter(50)">Toggle Increase Splitter size</a>
                </td>
                <td>
                    <a href="javascript:LoadExternalContent('http://google.com', 'ExternalContentPane')">
                        Change External Url using client-side API</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:ToggleCollapseEndPane()">Toggle Collapse on End Pane</a>
                </td>
                <td>
                    <a href="javascript:ResizePane(50, 'LeftPane')">Toggle Increase 'Left Pane' size</a>
                </td>
                <td>
                    <a href="http://yahoo.com" target="ExternalContentPane">Change External Url using 'target'
                        attribute</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:ScrollPane('LeftPane', 0, 80)">Scroll 'Left Pane' with 50px</a>
                </td>
                <td>
                    <a href="javascript:TogglePaneLock('MiddlePane1');alert('Now resize the \'Left Pane\' to see the difference')">
                        Toggle 'Middle Pane' locked state</a>
                </td>
                <td>
                    <a href="javascript:alert(GetPaneState('LeftPane'));alert('Now resize/collapse or scroll the content in the \'Left Pane\' and click again to see the state updated.');">
                        Get 'Left Pane' state as JSON string</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:ChangeSplitterResizeMode(); alert('Now try to resize the panes to see the change in resizeMode property.');">
                        Change Splitter ResizeMode</a>
                </td>
                <td>
                    <a href="javascript:PrintPane('LeftPane');">Print the content of 'Left Pane'</a>
                </td>
                <td>
                </td>
            </tr>
        </table>
        <br />

        <script type="text/javascript">
                    //<![CDATA[
                    /***********************************************
                                Splitter examples
                    ***********************************************/                
                    var isSplitterResized = false;
                    function ResizeSplitter (delta)
                    {
                        var splitter = $find("RadSplitter1");
                        if (isSplitterResized) {
                            delta *= -1;
                        }
                        var newWidth = splitter.get_width() + delta;
                        isSplitterResized = !isSplitterResized;
                        splitter.resize(newWidth, null);
                    }
                    
                    var SplitterResizeModes = ['AdjacentPane', 'Proportional', 'EndPane'];
                    var resizeModeInt = 0;
                    function ChangeSplitterResizeMode ()
                    {
                        var splitter = $find("RadSplitter1");
                        if (!SplitterResizeModes[resizeModeInt]) resizeModeInt = 0;
                        splitter.set_resizeMode(Telerik.Web.UI.SplitterResizeMode[SplitterResizeModes[resizeModeInt]]);

                        alert('Resize Mode set to [' + SplitterResizeModes[splitter.get_resizeMode() - 1] + ']');
                        resizeModeInt ++;
                    }

                    /***********************************************
                                Pane examples
                    ***********************************************/
                    function PrintPane (paneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);

                        if (!pane) return;
                        var cssFileAbsPath = location.href.substr(0, location.href.toString().lastIndexOf('/') + 1) + 'printStyles.css';
                        var arrExtStylsheetFiles = [
                            cssFileAbsPath
                        ];
                        
                        pane.print(arrExtStylsheetFiles);

                    }
                    
                    function ScrollPane (paneID, scrollX, scrollY)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);

                        if (!pane) return;
                        
                        pane.setScrollPos(scrollX, scrollY);
                    }
                    
                    function GetPaneState(paneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);

                        if (!pane) return;
                        
                        return pane.get_clientState();
                    }
                
                    function ToggleCollapsePane(paneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);

                        if (!pane) return;

                        if (pane.get_collapsed())
                        {
                            pane.expand();
                        }
                        else
                        {
                            pane.collapse();
                        }
                    }
                    
                    function ToggleCollapseEndPane()
                    {
                        var splitter = $find("RadSplitter1");
                        var endPane = splitter.getEndPane();
                        if (endPane.get_collapsed())
                        {
                            endPane.expand(Telerik.Web.UI.SplitterDirection.Backward);
                        }
                        else
                        {
                            endPane.collapse(Telerik.Web.UI.SplitterDirection.Backward);
                        }
                    }

                    var paneResized = false;
                    function ResizePane(delta, paneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);
                        if (!pane) return;
                        if (paneResized) delta *= -1;
                        paneResized = !paneResized;
                        pane.resize(delta);
                    }

                    function LoadExternalContent (url, targetPaneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(targetPaneID);
                        if (!pane) return;
                        pane.set_contentUrl(url);
                    }
                    
                    function TogglePaneLock (paneID)
                    {
                        var splitter = $find("RadSplitter1");
                        var pane = splitter.getPaneById(paneID);
                        if (!pane) return;
                        if (pane.get_locked())
                        {
                            pane.set_locked(false);
                        }
                        else
                        {
                            pane.set_locked(true);
                        }
                    }
                    //]]>
        </script>

        <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451