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

    Server-side API

    Pane1
    Pane2
    Pane1
     
     
     
    1
    Pane2
     
     
     
    2
    Click on the buttons below to alter the configuration of the SlidingZone from the code behind.
    • Demo Configurator

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

    All sliding panes are included in the SlidingZone's Items collection and you can use the standard collection methods to add/remove items in the collection.

    Note that the Items collection is not maintained across page postbacks and you have to rebuild it every time.

    • DefaultVB.aspx
    • DefaultVB.aspx.vb
    <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.SP_ServerSideApi.DefaultVB" %>
     
    <!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" style="width: 600px;">
            <telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Height="400" Width="600">
                <telerik:RadPane ID="LeftPane" runat="server" Width="22" Scrolling="None">
                    <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22" ClickToOpen="true">
                        <telerik:RadSlidingPane ID="Pane1" runat="server" Title="Pane1" Width="150">
                            1
                        </telerik:RadSlidingPane>
                        <telerik:RadSlidingPane ID="Pane2" runat="server" Title="Pane2" Width="150">
                            2
                        </telerik:RadSlidingPane>
                    </telerik:RadSlidingZone>
                </telerik:RadPane>
                <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>
                <telerik:RadPane ID="Middle" runat="server">
                    Click on the buttons below to alter the configuration of the SlidingZone from the
                    code behind.
                </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="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 2nd position" OnClick="AddPaneAtPosition_Click" Size="Auto"></qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" 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="RemoveFirstPane" Text="Remove the first pane" OnClick="RemoveFirstPane_Click" Size="Auto"></qsf:Button>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:View>
            </Views>
        </qsf:ConfiguratorPanel>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance