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

    Server-side API

    Pane1
    Pane2
    Pane3
    • Demo Configurator

    RadSplitter provides a flexible server-side API that allows you to change easily the splitter configuration.

    In the splitter's Items collection are included all panes and splitbars. You can use the standard collection methods to add/remove items in the collection.

    Note that the Items collection is not kept across page postbacks and you have to rebuild it everytime.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    <%@ Page Language="C#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true"Inherits="Telerik.Web.Examples.Splitter.ServerSideApi.DefaultCS"  %>
     
    <!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" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadSplitter1" />
                        <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <div class="demo-container size-thin">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="300" Width="300" EnableViewState="false">
                <telerik:RadPane ID="Pane1" runat="server">
                    Pane1
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Pane2" runat="server">
                    Pane2
                </telerik:RadPane>
                <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Forward">
                </telerik:RadSplitBar>
                <telerik:RadPane ID="Pane3" runat="server">
                    Pane3
                </telerik:RadPane>
            </telerik:RadSplitter>
        </div>
        <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
            <Views>
                <qsf:View>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:Button runat="server" ID="AddNewSplitBarAtEnd" Text="Add new splitbar at the end"
                                            OnClick="AddNewSplitBarAtEnd_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                            <li>
                                <qsf:Button runat="server" ID="AddSplitBarAtStart" Text="Add splitbar at the start"
                                            OnClick="AddSplitBarAtStart_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                            <li>
                                <qsf:Button runat="server" ID="RemoveFirstPane" Text="Remove the first pane"
                                            OnClick="RemoveFirstPane_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" ID="ConfiguratorColumn2" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:Button runat="server" ID="AddNewPaneAtEnd" Text="Add new pane at the end"
                                            OnClick="AddNewPaneAtEnd_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                            <li>
                                <qsf:Button runat="server" ID="AddPaneAtPosition" Text="Add pane at 3rd position"
                                            OnClick="AddPaneAtPosition_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                            <li>
                                <qsf:Button runat="server" ID="RemoveFirstSplitBar" Text="Remove the first splitbar"
                                            OnClick="RemoveFirstSplitBar_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn runat="server" ID="ConfiguratorColumn3" Size="Medium">
                        <ul class="fb-group">
                            <li>
                                <qsf:Button runat="server" ID="AddNewPaneAtStart" Text="Add new pane at the start"
                                            OnClick="AddNewPaneAtStart_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                            <li>
                                <qsf:Button runat="server" ID="AddSplitBarAtPosition" Text="Add splitbar at 3rd position"
                                            OnClick="AddSplitBarAtPosition_Click" Size="Auto">
                                </qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance