+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / RadTabStrip in Master Page

RadTabStrip in Master Page

9 posts, 0 answered
  1. Muhammad Saqib
    Muhammad Saqib avatar
    95 posts
    Registered:
    09 Sep 2009
    24 Nov 2009
    Link to this post
    Hi,

    I want to create Radtabs in some portionof my master file. what i did is:

    1  <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Black" MultiPageID="RadMultiPage1" 
    2                 SelectedIndex="0" CssClass="tabStrip"
    3                 <Tabs> 
    4                     <telerik:RadTab Text="Details"
    5                     </telerik:RadTab> 
    6                     <telerik:RadTab Text="Education"
    7                     </telerik:RadTab> 
    8                     <telerik:RadTab Text="Skills"
    9                     </telerik:RadTab> 
    10                 </Tabs> 
    11             </telerik:RadTabStrip> 
    12             <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage"
    13                 <telerik:RadPageView ID="RadPageView1" runat="server"
    14                      <asp:Panel ID="Panel1" runat="server" Height="100%" Width="635px"  
    15                                          ScrollBars="None"
    16                                         <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"
    17                                        
    18                                             </asp:contentplaceholder> 
    19                                             </asp:Panel> 
    20                                         
    21                 </telerik:RadPageView> 
    22                 <telerik:RadPageView ID="RadPageView2" runat="server" CssClass="pageViewEducation"
    23                     <asp:Panel ID="Panel2" runat="server" Height="100%" Width="635px"  
    24                                          ScrollBars="None"
    25                                         <asp:contentplaceholder id="ContentPlaceHolder2" runat="server"
    26                                        
    27                                             </asp:contentplaceholder> 
    28                                             </asp:Panel> 
    29                                         
    30                 </telerik:RadPageView> 
    31                 <telerik:RadPageView ID="RadPageView3" runat="server"
    32                     <asp:Panel ID="Panel3" runat="server" Height="100%" Width="635px"  
    33                                          ScrollBars="None"
    34                                         <asp:contentplaceholder id="ContentPlaceHolder3" runat="server"
    35                                        
    36                                             </asp:contentplaceholder> 
    37                                             </asp:Panel> 
    38                                         
    39                 </telerik:RadPageView> 
    40             </telerik:RadMultiPage> 

    But in design mode i was unable to shift to other tabs. Like i was able to drag contol into "Details" tab , but i wan unable to switch on to other tabs so that i can drag control on them. as each tab has contentplaceholder so i though i can add content to different tabs. but designer wont allow me to shift tabs.

    any suggestion?

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    24 Nov 2009
    Link to this post
    Hello Muhammad Saqib,

    There are two options:

    1. For each RadMultiPage you have a content place holder. You can change the css for the control you have only in edit mode so that the public layout will not be affected and you will be able to drag-drop controls in edit mode. In this case you need to modify

    Sitefinity\Admin\Themes\Default\PageEditorOverlay.css - this is the css that applies when you are working in page edit overlay mode.

    Sitefinity\Admin\Themes\Default\PageEditor.cssthis is the css that applies when you are working in page edit classic mode.

    2. If you do not want to drag and drop controls, you can remove the ContentPlaceHolder controls and create a custom ControlDesigner from where you can edit only the content/

    Regards,
    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. Muhammad Saqib
    Muhammad Saqib avatar
    95 posts
    Registered:
    09 Sep 2009
    24 Nov 2009
    Link to this post
    Thanks for your quick reply..
    I think i'll go for Op 1.
    What need to be change in CSS file?

    by the way which option you recommend :-) ?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    24 Nov 2009
    Link to this post
    Hi Muhammad Saqib,

    In the past I had similar problem and I decided to use the first approach, so I added some div elements around my ContentPlaceholders and then modified the above mentioned style sheets. You can use display: block !important;

    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.
  5. Muhammad Saqib
    Muhammad Saqib avatar
    95 posts
    Registered:
    09 Sep 2009
    24 Nov 2009
    Link to this post
    Well,, i just did'nt get you...
    i am confused, in which style tag i need to add this 'display: block !important;'

    and do i need to change something in my existing code as well? (the code i have submitted in my first post)
  6. mimholt
    mimholt avatar
    11 posts
    Registered:
    01 Mar 2007
    14 Dec 2009
    Link to this post
    Is there a way to enable the javascript for the tab strip when you're in edit mode?
  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    14 Dec 2009
    Link to this post
    Hello mimholt,

    You can use js in edit mode. Also the control is AJAX based so it always use java script. It depends on what you want to achieve, but generally it does not make sense to execute some logic when you are in edit mode.


    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.
  8. mimholt
    mimholt avatar
    11 posts
    Registered:
    01 Mar 2007
    14 Dec 2009
    Link to this post
    Hi Ivan - 

        If you put in the exact markup that Muhammad used above into a master page, and create a new page from the template, the "on click" events on the tabs are all changed to javascript:void(); when you're in edit mode.  You cannot click on then, the javascript has been disabled.  

    Am I missing something?

    -Matt
  9. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    14 Dec 2009
    Link to this post
    Hello mimholt,

     The tabs cannot be clicked because you will change the state. This is why I suggest him to use css to show the ContentPlaceholders for each of the tabs.


    Regards,
    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
9 posts, 0 answered