Creating Widget Drop Zone In Tabs
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"> <Tabs> <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> </Tabs></telerik:RadTabStrip><telerik:RadMultiPage ID="TabPages" runat="server" SelectedIndex="0"> <telerik:RadPageView ID="Tab1Page" runat="server"> <asp:Literal ID="Tab1Content" runat="server"></asp:Literal> </telerik:RadPageView> <telerik:RadPageView ID="Tab2Page" runat="server"> <asp:Literal ID="Tab2Content" runat="server"></asp:Literal> </telerik:RadPageView> <telerik:RadPageView ID="Tab3Page" runat="server"> <asp:Literal ID="Tab3Content" runat="server"></asp:Literal> </telerik:RadPageView> <telerik:RadPageView ID="Tab4Page" runat="server"> <asp:Literal ID="Tab4Content" runat="server"></asp:Literal> </telerik:RadPageView> <telerik:RadPageView ID="Tab5Page" runat="server"> <asp:Literal ID="Tab5Content" runat="server"></asp:Literal> </telerik:RadPageView></telerik:RadMultiPage>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"> <ul> <li><a href="#tab-1">Tab One</a></li> <li><a href="#tab-2">Tab Two</a></li> </ul> <div id="tab-1"> <div runat="server" class="sf_colsIn"> </div> </div> <div id="tab-2"> <div runat="server" class="sf_colsIn"> </div> </div></div><script type="text/javascript"> $(document).ready(function () //Create TABS $('.tabMaster').tabs(); );</script>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
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?
Thanks,
Arun
Hello,
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.
Regards,
Nikola Zagorchev
Telerik