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
5 Answers, 1 is accepted
0
Princy
Top achievements
Rank 2
Rank 2
answered on 07 Jan 2013, 04:35 AM
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:
Please take a look into this documentation and demo for more information.
Hope this helps.
Regards,
Princy.
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.
0
Akki
Top achievements
Rank 1
Rank 1
answered on 07 Jan 2013, 06:55 AM
Hi Princy,
Thanks for reply.
Now i am using
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
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
0
Princy
Top achievements
Rank 2
Rank 2
answered on 08 Jan 2013, 03:59 AM
Hi Akki,
Try the following code snippet to achieve your scenario.
ASPX:
Hope this helps.
Regards,
Princy.
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.
0
Akki
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2013, 04:42 AM
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>
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>
0
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
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.