Creating sliding zones and sliding panes dynamically in OnInit override method

3 posts, 0 answers
  1. sanyog
    sanyog avatar
    2 posts
    Member since:
    Apr 2011

    Posted 20 Apr 2011 Link to this post

    I am implementing a Silverlight application with combination of Silverlight controls and ASP.net user controls on same aspx page.

    One pane (left pane) is reserved for Silverlight controls and other pane is for ASPX controls (right pane).  Right pane will be containing multiple user control based on inputs from Silverlight application.

     

    Initially there won’t be any user controls on my page and only Silverlight controls (left pane) will capture whole area of the page. When request comes from Silverlight application, I do want to create a user control dynamically using RAD controls.

     

    To achieve it, I am creating a RAD Pane (right pane) and this pane will contain a RAD sliding zone, within RAD sliding zone there will be multiple RAD sliding panes. Each sliding pane will contain one user control in it.

     

     

    This way I want to place user control on different sliding panes based on request from Silverlight application dynamically.

    I am having RAD control for ASPX (Ajax) and want to create multiple panes and placing user control on respective pane. I want to show only one user control at a time and other can be in hidden mode until user selects tab option to show one of the hidden controls.

     

    Please help me how to create these sliding zones and sliding panes dynamically in OnInit override method.

  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 25 Apr 2011 Link to this post

    Hello Sanyog,

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

    ASPX:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <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>
        </form>
    </body>
    </html>

    Codebehind:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(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);
        }
    }

    Use the above code as a base to implement your scenario.

    Kind regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sanyog
    sanyog avatar
    2 posts
    Member since:
    Apr 2011

    Posted 27 Apr 2011 Link to this post

    Thanks Rumen.
    It's working  fine with slight changes in code (placing control inside panel)

    Regards,
    Sanyog
Back to Top