Splitter - Server-side API

Pane1
Pane2
Pane3

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

Find Assistance

Help Us Improve

Was this example helpful?