New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

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
  • Demo Configurator
  • Splitter
  • Pane
Splitter's Resize mode
Collapsing
Splitter's Size
Pane's Size
External Content Set it via 'target' attribute
Scrolling
JSON

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.ClientID %>");

    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);

    or to 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.ClientID %>");
    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.ClientID %>");
    var paneWidth = pane.get_width();
    var paneHeight = pane.get_height();
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="false"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadScriptBlock ID="RadSCriptBlock1" runat="server">
        <script type="text/javascript">
            //<![CDATA[
            $splitterClientApiDemo.ResizeModesListID = "<%=ResizeModesList.ClientID%>";
            $splitterClientApiDemo.LeftPaneID = "<%=LeftPane.ClientID%>";
            $splitterClientApiDemo.MiddlePaneID = "<%=MiddlePane.ClientID%>";
            $splitterClientApiDemo.ExternalContentPane = "<%=ExternalContentPane.ClientID%>";
            $splitterClientApiDemo.EndPaneID = "<%=EndPane.ClientID%>";
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <div class="demo-container size-medium">
        <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="200" Width="595" OnClientLoad="SplitterLoad">
            <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:RadSplitBar>
            <telerik:RadPane ID="MiddlePane" runat="server" Width="100">
                Middle Pane1 - 100px
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="ExternalContentPane" ContentUrl="http://www.telerik.com" runat="server"
                Width="300">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="EndPane" runat="server">
                End Pane - free size
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server">
        <Views>
            <qsf:View Title="Splitter">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Splitter's Resize mode" Size="Narrow">
                    <qsf:RadioButtonList ID="ResizeModesList" runat="server" AutoPostBack="false" onclick="ChangeSplitterResizeMode();">
                        <asp:ListItem Text="AdjacentPane" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Proportional"></asp:ListItem>
                        <asp:ListItem Text="EndPane"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Collapsing" Size="Narrow">
                    <span class="checkbox">
                        <asp:CheckBox ID="CollapseLeftPane" Text="Collapse Left Pane" runat="server" onclick="ToggleCollapsePane('LeftPane')" /></span><br />
                    <span class="checkbox">
                        <asp:CheckBox ID="CollapseEndPane" Text="Collapse End Pane" runat="server" onclick="ToggleCollapsePane('EndPane')" /></span>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Splitter's Size" Size="Narrow">
                    <qsf:CheckBoxList ID="IncreaseSizeList" runat="server" AutoPostBack="false" onclick="ResizeSplitter(100);">
                        <asp:ListItem Text="Increase Splitter size"></asp:ListItem>
                    </qsf:CheckBoxList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Pane">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow" Title="Pane's Size">
                    <span class="checkbox">
                        <asp:CheckBox ID="LockPaneChkbx" Text="Lock the 'Middle Pane' size" runat="server" onclick="TogglePaneLock('MiddlePane')" /></span>
                    <span class="checkbox">
                        <asp:CheckBox ID="IncreaseSizeChkbx" Text="Increase 'Left Pane' size" runat="server" onclick="ResizePane(50, 'LeftPane')" /></span>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn5" runat="server" Title="External Content" Size="Medium">
                    <a href="http://www.stumbleupon.com/" target="<%=ExternalContentPane.ClientID%>">Set it via 'target' attribute</a><br />
                    <qsf:Button ID="ExtUrlBtn" runat="server" AutoPostBack="false" Text="Set it via client-side API" OnClientClicked="LoadExternalContent"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn6" runat="server" Size="Narrow" Title="Scrolling">
                    <asp:Label ID="ScrollingLabel" runat="server" Text="Scroll 'Left Pane' with 50px:" AssociatedControlID="ScrollingBtn"></asp:Label><br />
                    <qsf:Button ID="ScrollingBtn" runat="server" Text="Scroll" AutoPostBack="false" OnClientClicked="function(){ScrollPane('LeftPane', 0, 80);}"></qsf:Button>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn7" runat="server" Size="Medium" Title="JSON">
                    <asp:Label ID="GetJsonLabel" runat="server" Text="Get 'Left Pane' state as JSON string:" AssociatedControlID="GetJsonBtn"></asp:Label><br />
                    <qsf:Button ID="GetJsonBtn" runat="server" Text="Get JSON" AutoPostBack="false" OnClientClicked="function(){GetPaneState('LeftPane');}"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance