Load only contents of page on tab click with tabs visibile.

6 posts, 0 answers
  1. Akki
    Akki avatar
    79 posts
    Member since:
    Nov 2011

    Posted 06 Jan 2013 Link to this post


    Hi,
    I have a scenario where im using RadTabStrip in usercontrol.This userControl is registred on .aspx page. RadStrip has 4 to 5 tabs. Each tab click should be navigated to new page with some contents.I can set the NavigateUrl="FirstTab.aspx" so that it will navigate to respective pages, But these pages don't have Tabstrip.It only contains Contents of particular page. How to load contents of page with radstrip still visible ?.  How to go about this scenario.

    Attached is screenshot.

    Please Suggest

    Regards,
    Akki
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Jan 2013 Link to this post

    Hi,

    You can use the RadMultiPage control to organize the content of tabbed pages. Following is the sample code that I tried to achieve your scenario.

    ASPX:
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="0" AutoPostBack="true">
        <Tabs>
            <telerik:RadTab Text="RadTab1" PageViewID="RadPageView1">
            </telerik:RadTab>
            .............
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
        <telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="FirstTab.aspx">
        </telerik:RadPageView>
        ..............
    </telerik:RadMultiPage>

    Please take a look into this documentation and demo for more information.

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Akki
    Akki avatar
    79 posts
    Member since:
    Nov 2011

    Posted 07 Jan 2013 Link to this post

    Hi Princy,

    Thanks for reply.
    Now i am using telerik:RadMultiPage in combination of telerik:RadTabStrip. But in RadMultipage, if  there are more than onetelerik:RadPageView ID="RadPageView1 with contentUrl then page is not loading with respect to contentUrl.

    Below is the code,
    WebForm2.aspx contains tabstrip, On click of Root RadTab1 - WebForm3.aspx should display which contains set of labels, Same way on click of Root RadTab2 - WebForm1.aspx should display which contains only one label text.Root RadTab2

    Let me know if i'm doing anything wrong or Any other things that i have to do ?


    Webform2.aspx
     <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
                Skin="Outlook" CssClass="NoBg">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="PageView2">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="PageView3">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">
                <telerik:RadPageView ID="PageView1" runat="server">
                    Name: John Smith<br />
                    Birthday: October 20th 1976<br />
                    Marital Status: Single
                    <br />
                </telerik:RadPageView>
                <telerik:RadPageView ID="PageView2" runat="server" ContentUrl="WebForm3.aspx">
                </telerik:RadPageView>
                <telerik:RadPageView ID="PageView3" runat="server" ContentUrl="Webform1.aspx">
                </telerik:RadPageView>
            </telerik:RadMultiPage>

    WebForm3.aspx

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="lbl1" runat="server" Text="Third Page" Visible="true"></asp:Label>
            <asp:Label ID="Label5" runat="server" Text="Third Page" Visible="true"></asp:Label>
            <asp:Label ID="Label4" runat="server" Text="Third Page" Visible="true"></asp:Label>
            <asp:Label ID="Label3" runat="server" Text="Third Page" Visible="true"></asp:Label>
            <asp:Label ID="Label2" runat="server" Text="Third Page" Visible="true"></asp:Label>
            <asp:Label ID="Label1" runat="server" Text="Third Page" Visible="true"></asp:Label>
        </div>
        </form>
    </body>
    </html>

    WebForm1.aspx

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
           <asp:Label ID="lbl1" runat="server" Text="Third Page"></asp:Label>
        </div>
        </form>
    </body>
    </html>

    Regards,
    Kiran
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Jan 2013 Link to this post

    Hi Akki,

    Try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" Skin="Outlook" CssClass="NoBg">
        <Tabs>
            <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="PageView2">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="PageView3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="1" Width="400">
        <telerik:RadPageView ID="PageView1" runat="server">
            Name: John Smith<br />
            Birthday: October 20th 1976<br />
            Marital Status: Single
            <br />
        </telerik:RadPageView>
        <telerik:RadPageView ID="PageView2" runat="server" ContentUrl="WebForm3.aspx" Selected="true">
        </telerik:RadPageView>
        <telerik:RadPageView ID="PageView3" runat="server" ContentUrl="Webform1.aspx">
        </telerik:RadPageView>
    </telerik:RadMultiPage>

    Hope this helps.

    Regards,
    Princy.
  6. Akki
    Akki avatar
    79 posts
    Member since:
    Nov 2011

    Posted 07 Jan 2013 Link to this post

    Hi Princy,

    I tried with your code , But still i am not able to see the contents of webform3.aspx and webform1.aspx contents specified in pageview2
    and pageview3. Let me know how to go about this.
     Attached is screenshot.
      <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
                Skin="Outlook" CssClass="NoBg">
                <Tabs>
                 <telerik:RadTab runat="server" Text="Root RadTab1" PageViewID="PageView1">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="PageView2">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Root RadTab2" PageViewID="PageView3">
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400" >
                <telerik:RadPageView ID="PageView1" runat="server" Selected="true">
                    Name: John Smith<br />
                    Birthday: October 20th 1976<br />
                    Marital Status: Single
                    <br />
                </telerik:RadPageView>
                <telerik:RadPageView ID="PageView2" runat="server" ContentUrl="WebForm3.aspx" >
                </telerik:RadPageView>
                <telerik:RadPageView ID="PageView3" runat="server" ContentUrl="WebForm1.aspx">
                </telerik:RadPageView>
            </telerik:RadMultiPage>
  7. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 10 Jan 2013 Link to this post

    Hello Akki,

    I have prepared a sample project for you, base on the provided snippet of code. Please give it a try and let us know if you still face any issues at your end.

    Greetings,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017