This is a migrated thread and some comments may be shown as answers.

Load aspx different page each tab

6 Answers 140 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Albert
Top achievements
Rank 1
Albert asked on 09 Sep 2010, 01:25 PM
In my application I have one form called [Main.aspx] :

In this page i put one tab strip called [RadTab1] and it have following tabs :
1.Home 
2.Abouut Us
3.Contact Us
4.Feedback

Now what I want is when user click on Home tab at that time Home.aspx will be load under corrosponding page view...

When click on abount us then AboutUs.aspx ,similarly for other two..

I do no want to do this with master page and user controls..every thing should be in Main.aspx.


I have tried following code but it redirect me to another page .

<telerik:RadTabStrip ID="radTabMain" runat="server" Width="100%" MultiPageID="RadMultiPage1"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Home" NavigateUrl="Home.aspx" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="AbouutUs" NavigateUrl="AbouutUs.aspx" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Contact Us" NavigateUrl="Contact.aspx" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Feedback" NavigateUrl="Feedback.aspx" runat="server">
                </telerik:RadTab>
            </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
            <telerik:RadPageView  ID="RadPageView1" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView1">
            </telerik:RadPageView>
</telerik:RadMultiPage>


So what ot do in this case ?

Please help me. Please send me code for this.

-Thanks
Albert

6 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 09 Sep 2010, 02:29 PM
Hi Albert,

You can use an iframe control and load the different pages through code-behind on TabClick event. Also you can save the Url for each tab in a custom attribute. Here's the code:

ASPX:
<telerik:RadTabStrip ID="radTabMain" runat="server" Width="100%" OnTabClick="radTabMain_TabClick">
            <Tabs>
                <telerik:RadTab Text="Home" runat="server" Url="Home.aspx">
                </telerik:RadTab>
                <telerik:RadTab Text="AboutUs" runat="server" Url="AboutUs.aspx">
                </telerik:RadTab>
                <telerik:RadTab Text="Contact Us" runat="server" Url="ContactUs.aspx">
                </telerik:RadTab>
                <telerik:RadTab Text="Feedback" runat="server" Url="Feedback.aspx">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <iframe id="frame1" width="100%" height="300" runat="server">
            <p>
                Your browser does not support iframes.</p>
        </iframe>

C#:
protected void radTabMain_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
    {
        frame1.Attributes["src"] = e.Tab.Attributes["Url"]; 
    }

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Charles
Top achievements
Rank 1
answered on 04 Oct 2012, 02:14 PM
Try doing it this way..

<telerik:RadTabStrip ID="radTabMain" runat="server" Width="100%" MultiPageID="RadMultiPage1"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Home" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="AbouutUs" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Contact Us" runat="server">
                </telerik:RadTab>
                <telerik:RadTab Text="Feedback"  runat="server">
                </telerik:RadTab>
            </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
            <telerik:RadPageView  ID="RadPageView1" runat="server"  ContentUrl="Home.aspx">
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="AboutUs.aspx">
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server" ContentUrl="....">
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="....">
            </telerik:RadPageView>
</telerik:RadMultiPage>

I had mine like that and it works.
0
Hai Feng Ma
Top achievements
Rank 1
answered on 08 Oct 2012, 05:55 AM
I configured these Content Urls, but it does not work for me.
0
Princy
Top achievements
Rank 1
answered on 08 Oct 2012, 06:45 AM
Hello,

Try the following code snippet to achieve your scenario.

ASPX:
<telerik:RadTabStrip ID="radTabMain" runat="server" Width="100%" MultiPageID="RadMultiPage1" SelectedIndex="0">
  <Tabs>
     <telerik:RadTab Text="Home" runat="server" PageViewID="RadPageView1">
     </telerik:RadTab>
     <telerik:RadTab Text="AboutUs" runat="server" PageViewID="RadPageView2">
     </telerik:RadTab>
     <telerik:RadTab Text="Contact Us" runat="server" PageViewID="RadPageView3">
     </telerik:RadTab>
     <telerik:RadTab Text="Feedback" runat="server" PageViewID="RadPageView4">
     </telerik:RadTab>
  </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
  <telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="Home.aspx" Selected="true">
  </telerik:RadPageView>
  <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="AboutUs.aspx">
  </telerik:RadPageView>
  <telerik:RadPageView ID="RadPageView3" runat="server" ContentUrl="ContactUs.aspx">
  </telerik:RadPageView>
  <telerik:RadPageView runat="server" ID="RadPageView4" ContentUrl="FeedBack.aspx">
  </telerik:RadPageView>
</telerik:RadMultiPage>

Please elaborate your scenario if it doesn't helps.

Regards,
Princy.
0
Varalakshmi
Top achievements
Rank 1
answered on 11 Jun 2019, 04:45 AM

Hi ,

I have tried using radtabstrip (same code) inside radwindow. when i add tabstrip inside window, page_load events for Home.aspx triggered twice. is it known issue? or is there any workaround for this?

Code: Default.aspx

<telerik:RadWindow ID="win" runat="server" VisibleOnPageLoad="true">
                <ContentTemplate>
                    <telerik:RadTabStrip ID="radTabMain" runat="server" Width="100%" OnTabClick="radTabMain_TabClick">
                        <Tabs>
                            <telerik:RadTab Text="Home" runat="server" Url="Home.aspx">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <iframe id="frame1" width="100%" height="300" runat="server">
                        <p>
                            Your browser does not support iframes.
                        </p>
                    </iframe>
                </ContentTemplate>
            </telerik:RadWindow>

Home.aspx:

protected void Page_Load(object sender, EventArgs e)
    {
        lbl.Text = "loaded in iframe";
    }
    protected void Page_UnLoad(object sender, EventArgs e)
    {

    }

0
Vessy
Telerik team
answered on 13 Jun 2019, 03:16 PM
Hi Varalakshmi,

When the RadWindow's VisibleOnPageLoad="true" property is set, the control is reloading its content on every full Postback, like the one performed when a tab is clicked. BĐ°basically, the Home.aspx page is requested two times:
- Once, when the tab is clicked
- Once then the Window is reloaded due to the Postback performed by the clicked tab

In order to avoid this behavior, you can consider disabling the AutoPostback of the TabStrip and change the src of the iframe in its OnClientTabClicked handler:
https://docs.telerik.com/devtools/aspnet-ajax/controls/tabstrip/client-side-programming/events/onclienttabselected

Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabStrip
Asked by
Albert
Top achievements
Rank 1
Answers by
Veronica
Telerik team
Charles
Top achievements
Rank 1
Hai Feng Ma
Top achievements
Rank 1
Princy
Top achievements
Rank 1
Varalakshmi
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or