Try Now
More in this section

Forums / Developing with Sitefinity / Creating Widget Drop Zone In Tabs

Creating Widget Drop Zone In Tabs

5 posts, 0 answered
  1. Chris
    Chris avatar
    4 posts
    16 Jan 2013
    24 Jan 2013
    Link to this post

    Hello -

    I am new to Sitefinity and recently built my first custom widget. The widget allows you place a RadTabStrip on the page with up to 5 tabs. Right now the widget designer uses an HtmlField control to let the user enter the content for each tab.

    However, I would like to make a way that, instead, each tab has an area where you can drop any of the available widgets just as you would on a normal page. Is this possible and how would I go about doing it? I have attached the .ascx file I am currently using and an image of what I have in mind.

    If adding a drop zone within each tab is not possible, is there a way to programatically include another Sitefinity page within the tabs?

    Thank you for any help or direction you can provide!


    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.ControlDesign" TagPrefix="designers" %>
    <telerik:RadTabStrip ID="TabStripMain" runat="server" MultiPageID="TabPages" SelectedIndex="0" Skin="Metro">
            <telerik:RadTab runat="server" Value="Tab1Label" Text="" Selected="True" ViewStateMode="Enabled"></telerik:RadTab>
            <telerik:RadTab runat="server" Value="Tab2Label" Text=""></telerik:RadTab>
            <telerik:RadTab runat="server" Value="Tab3Label" Text=""></telerik:RadTab>
            <telerik:RadTab runat="server" Value="Tab4Label" Text=""></telerik:RadTab>
            <telerik:RadTab runat="server" Value="Tab5Label" Text=""></telerik:RadTab>
    <telerik:RadMultiPage ID="TabPages" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="Tab1Page" runat="server">
            <asp:Literal ID="Tab1Content" runat="server"></asp:Literal>
        <telerik:RadPageView ID="Tab2Page" runat="server">
            <asp:Literal ID="Tab2Content" runat="server"></asp:Literal>
        <telerik:RadPageView ID="Tab3Page" runat="server">
            <asp:Literal ID="Tab3Content" runat="server"></asp:Literal>
        <telerik:RadPageView ID="Tab4Page" runat="server">
            <asp:Literal ID="Tab4Content" runat="server"></asp:Literal>
        <telerik:RadPageView ID="Tab5Page" runat="server">
            <asp:Literal ID="Tab5Content" runat="server"></asp:Literal>

  2. Stephen2
    Stephen2 avatar
    94 posts
    05 Feb 2012
    25 Jan 2013 in reply to Chris
    Link to this post
    The magic is to:
    1) Use Sitefinity Thunder to create a "Sitefinity Layout Widget" (not a Widget or UserControl)
    2) have <div>s like: <div runat="server" class="sf_colsIn"></div> <--- Creates a drop zone

    So, e.g., to use jQuery Tabs:
    <div class="tabMaster">
            <li><a href="#tab-1">Tab One</a></li>
            <li><a href="#tab-2">Tab Two</a></li>
        <div id="tab-1">
            <div runat="server" class="sf_colsIn">
        <div id="tab-2">
            <div runat="server" class="sf_colsIn">
    <script type="text/javascript">
        $(document).ready(function () {
            //Create TABS

    The same method should work with RadTabStrip I'd say...

    There's various enhancements you might consider, like:
    1) Making the tab headings dynamic
    2) Making the number of tabs dynamic
    3) Removing empty TABs on render
  3. Chris
    Chris avatar
    4 posts
    16 Jan 2013
    27 Jan 2013 in reply to Stephen2
    Link to this post
    Thanks for the reply! This solution works great and definitely helps. However, in regards to the enhancements you suggested, that is exactly why I had put it in a widget in the first place. The widget let the user select the number of tabs, name them, and select various other settings (skin, orientation, etc...). Screenshot attached.

    I am not sure how I could accomplish this using the Layout widget described above. I hate to ask for more help, but if you or any others have any suggestions I am all ears.

    When I tried adding <div runat="server" class="sf_colsIn"></div> into the .ascx of my widget display it did not work and I am guessing that this may be by design. Perhaps I am doing something wrong though.

    Thanks again for taking the time to respond and for any other guidance.

    - Chris
  4. Arun
    Arun avatar
    10 posts
    03 Nov 2011
    16 Aug 2014 in reply to Chris
    Link to this post

    Hi Chris,

    I am also looking for sort of same solution, where I will be able to add generic content to the tabs, Please let me know if you got a work around for this?





  5. Nikola Zagorchev
    Nikola Zagorchev avatar
    424 posts
    19 Oct 2016
    20 Aug 2014
    Link to this post

    You can use the tab strip control made by Steve. You can check it out in this video and download it from his site here.

    Nikola Zagorchev
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
5 posts, 0 answered