More in this section

Forums / Developing with Sitefinity / Tabstrip content management

Tabstrip content management

4 posts, 0 answered
  1. Nigel
    Nigel avatar
    49 posts
    Registered:
    07 Jul 2008
    19 Nov 2009
    Link to this post
    Hi, I am going to require the ability to add a RadTabStrip to a page and allow the user to manage the tabs and the content of the tabstrip in my next project. I have a pretty good idea on how I can do this, but it will require significant developmend of custom designers and webeditors and I thought I would throw it out there to the community first to see if anyone else out there has tackled this issue yet.

    Just to be clear I need a control that can be dropped onto a page, allow the user to define the tabs, and for each tab allow the user to define the rich text HTML (using the radeditor) that will appear in the pageview for that tab.
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Nov 2009
    Link to this post
    Hi Nigel,

    It is possible, but you should better have predefined tabs that your users will modify.

    1. You need to create a custom control that inherits from SimpleControl or CompositeControl classes
    2. You need to create a control designer for your control from where you can manage RadTabStrip tabs.
    3. If you are going to create new tags from the control designer you should use RadTabStrip API to create and delete tabs.

    RadTab tab1 = new RadTab();
    ....
       ....
    RadTabStrip1.Tabs.Add(tab1);
     
       ....
     RadTabStrip1.Tabs.Remove(tab1);

    This will require post back of the control designer or using form with UpdatePanel
    Below is a sample code from which you can gather more information.

    Template for our designer ( if you have predefined tabs you can have the same structure for the front end). Here you can use RadEditor to edit the content.

    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="MultiPage1" Skin="Outlook">
    <Tabs>
    <telerik:RadTab runat="server" PageViewID="RadPageView1"  Text="Tab1" Selected="true"></telerik:RadTab>
    <telerik:RadTab runat="server" PageViewID="RadPageView2" Text="Tab2"></telerik:RadTab>
    <telerik:RadTab runat="server" PageViewID="RadPageView3" Text="Tab3"></telerik:RadTab>
    </Tabs>
    </telerik:RadTabStrip>
     
    <telerik:RadMultiPage runat="server" ID="MultiPage1">
    <telerik:RadPageView runat="server" ID="RadPageView1">
    <telerik:RadEditor Skin="Black" ToolsFile="~/Sitefinity/ControlTemplates/Forums/ToolsFile.xml" ID="RadEditor1" runat="server" Width="350" Height="350"></telerik:RadEditor>
    </telerik:RadPageView>
    <telerik:RadPageView runat="server" ID="RadPageView2">
    <telerik:RadEditor Skin="Black" ToolsFile="~/Sitefinity/ControlTemplates/Forums/ToolsFile.xml" ID="RadEditor2" runat="server" Width="350" Height="350"></telerik:RadEditor>
    </telerik:RadPageView>
    <telerik:RadPageView  runat="server" ID="RadPageView3">
    <telerik:RadEditor Skin="Black" ToolsFile="~/Sitefinity/ControlTemplates/Forums/ToolsFile.xml" ID="RadEditor3" runat="server" Width="350" Height="350"></telerik:RadEditor>
    </telerik:RadPageView>
     
     
    </telerik:RadMultiPag

    Our sample for the control designer

    namespace Telerik.Samples
    {
        public class TabStripCustomControlDesigner : Telerik.Framework.Web.Design.ControlDesigner
        {
     
            public override string LayoutTemplatePath
            {
                get
                {
                    return "~/CustomControls/TabStripTemplate.ascx";
                }
            }
     
            protected override void InitializeControls(System.Web.UI.Control viewContainer)
            {
                base.InitializeControls(viewContainer);
     
                // JUST FOR DEMONSTRATION...
                this.RadEditor1.Content = "text1";
                this.RadEditor2.Content = "text2";
                this.RadEditor3.Content = "text3";
            }
     
            public override void OnSaving()
            {
                base.OnSaving();
     
                // HERE PERSIST THE DATA AND MAKE A REFERENCE TO THE PUBLIC TEMPLATE
                //((TabStripCustomControl)TabStripCustomControlDesigner).TextForTab1 = RadEditor1.Content;
               // ((TabStripCustomControl)TabStripCustomControlDesigner).TextForTab2 = RadEditor2.Content;
               // ((TabStripCustomControl)TabStripCustomControlDesigner).TextForTab3 = RadEditor3.Content;
            }
     
            protected virtual RadEditor RadEditor1
            {
                get
                {
                    return base.Container.GetControl<RadEditor>("RadEditor1", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst);
                }
            }
            protected virtual RadEditor RadEditor2
            {
                get
                {
                    return base.Container.GetControl<RadEditor>("RadEditor2", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst);
                }
            }
            protected virtual RadEditor RadEditor3
            {
                get
                {
                    return base.Container.GetControl<RadEditor>("RadEditor3", false, Telerik.Framework.Web.TraverseMethod.BreadthFirst);
                }
            }
        
    }

    our custom control

    using System.Web;
    using Telerik.Cms.Web.UI;
    using Telerik.Framework.Web.Design;
    using System.Web.UI.WebControls;
     
    /// <summary>
    /// Summary description for TabStripCustomControl
    /// </summary>
    ///
    [ControlDesignerAttribute("Telerik.Samples.TabStripCustomControlDesigner, App_Code")]
    public class TabStripCustomControl : SimpleControl
    {
     
        //  SOME PROPERTIES JUST FOR DEMONSTRATION- YOU SHOULD MAKE THEM VIEW STATE PROPERTIES
        public TabStripCustomControl()
        {
     
        }
     
        public string TextForTab1
        {
            get { }
            set { }
        }
        public string TextForTab2
        {
            get { }
            set { }
        }
        public string TextForTab3
        {
            get { }
            set { }
        }
     
     
     
    }


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Nigel
    Nigel avatar
    49 posts
    Registered:
    07 Jul 2008
    19 Nov 2009
    Link to this post
    Hi Ivan, thanks for the extremely prompt reply, yeah that solution is very close to what I was thinking, thanks heaps.

    If I come up with anything that is super ordainary will put it on the marketplace :)

    thanks again
    Nigel
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Nov 2009
    Link to this post
    Hi Nigel,

    Let me know if you get stuck somewhere.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
4 posts, 0 answered