Splitter - Server-side API

Pane1
Pane2
Click on the buttons below to alter the configuration of the SlidingZone from the code behind.

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.SP_ServerSideApi.DefaultCS"  %>

<!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">
    <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>

Find Assistance

Help Us Improve

Was this example helpful?