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

Creating SlidingZone Programmatically

You can create sliding panes dynamically in server-side code. To do this, you need to create RadSlidingZone controls and add them to the Controls collection of existing RadPane controls. Then create RadSlidingPane controls and add them to the Items collections of the RadSlidingZone controls.

The Items collections do not persist in the ViewState when you create the splitter controls in the code-behind. You need to recreate them on every postback!

Example

The example below demonstrates how to declare left and right sliding zones, containing two sliding panes each. Note that you can also create the RadSplitter programmatically instead of declaring it in the ASPX page.

<telerik:radsplitter id="RadSplitter1" runat="server" height="300" width="400">
    <telerik:RadPane id="LeftPane" runat="server" Width="22" />
    <telerik:RadSplitBar id="RadSplitBar1" runat="server" />
    <telerik:RadPane id="MiddlePane" runat="server">Middle Pane</telerik:RadPane>
    <telerik:RadSplitBar id="RadSplitBar2" runat="server" />
    <telerik:RadPane id="RightPane" runat="server" Width="22" />
</telerik:radsplitter>
protected void Page_Load(object sender, EventArgs e)
{
    RadSlidingZone leftZone = new RadSlidingZone();
    leftZone.ID = "LeftZone";
    leftZone.Width = LeftPane.Width;
    RadSlidingPane leftSlidingPane1 = new RadSlidingPane();
    leftSlidingPane1.ID = "LeftSlidingPane1";
    leftSlidingPane1.Title = "Left1";
    leftSlidingPane1.Width = new Unit(150);
    leftZone.Items.Add(leftSlidingPane1);
    RadSlidingPane leftSlidingPane2 = new RadSlidingPane();
    leftSlidingPane2.ID = "LeftSlidingPane2";
    leftSlidingPane2.Title = "Left2";
    leftSlidingPane2.Width = new Unit(150);
    leftZone.Items.Add(leftSlidingPane2);
    LeftPane.Controls.Add(leftZone);
    RadSlidingZone rightZone = new RadSlidingZone();
    rightZone.ID = "RightZone";
    rightZone.SlideDirection = Telerik.Web.UI.SplitterSlideDirection.Left;
    rightZone.Width = LeftPane.Width;
    RadSlidingPane rightSlidingPane1 = new RadSlidingPane();
    rightSlidingPane1.ID = "RightSlidingPane1";
    rightSlidingPane1.Title = "Right1";
    rightSlidingPane1.Width = new Unit(150);
    rightZone.Items.Add(rightSlidingPane1);
    RadSlidingPane rightSlidingPane2 = new RadSlidingPane();
    rightSlidingPane2.ID = "RightSlidingPane2";
    rightSlidingPane2.Title = "Right2";
    rightSlidingPane2.Width = new Unit(150);
    rightZone.Items.Add(rightSlidingPane2);
    RightPane.Controls.Add(rightZone);
}           
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim leftZone As New RadSlidingZone()
    leftZone.ID = "LeftZone"
    leftZone.Width = LeftPane.Width
    Dim leftSlidingPane1 As New RadSlidingPane()
    leftSlidingPane1.ID = "LeftSlidingPane1"
    leftSlidingPane1.Title = "Left1"
    leftSlidingPane1.Width = New Unit(150)
    leftZone.Items.Add(leftSlidingPane1)
    Dim leftSlidingPane2 As New RadSlidingPane()
    leftSlidingPane2.ID = "LeftSlidingPane2"
    leftSlidingPane2.Title = "Left2"
    leftSlidingPane2.Width = New Unit(150)
    leftZone.Items.Add(leftSlidingPane2)
    LeftPane.Controls.Add(leftZone)
    Dim rightZone As New RadSlidingZone()
    rightZone.ID = "RightZone"
    rightZone.SlideDirection = Telerik.Web.UI.SplitterSlideDirection.Left
    rightZone.Width = LeftPane.Width
    Dim rightSlidingPane1 As New RadSlidingPane()
    rightSlidingPane1.ID = "RightSlidingPane1"
    rightSlidingPane1.Title = "Right1"
    rightSlidingPane1.Width = New Unit(150)
    rightZone.Items.Add(rightSlidingPane1)
    Dim rightSlidingPane2 As New RadSlidingPane()
    rightSlidingPane2.ID = "RightSlidingPane2"
    rightSlidingPane2.Title = "Right2"
    rightSlidingPane2.Width = New Unit(150)
    rightZone.Items.Add(rightSlidingPane2)
    RightPane.Controls.Add(rightZone)
End Sub

See Also

In this article