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

Navigate to the specified page using server side code

5 Answers 328 Views

TabStrip

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

Dorababu asked on 03 Jul 2012, 08:40 AM

How can I navigate to the specified page using tabs. This is my design

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="tabNavigate.aspx.cs" Inherits="tabNavigate" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>

<link href="StyleSheet2.css" rel="stylesheet" type="text/css" />

<link href="TabStrip.WebBlue.css" rel="stylesheet" type="text/css" />

<link href="Ajax.Office2010Silver.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="Rd" runat="server">

</telerik:RadScriptManager>

<div>

<telerik:RadTabStrip ID="rdtabPersonalDetails" runat="server" UnSelectChildren="True"

AutoPostBack="true" OnTabClick="rdtabPersonalDetails_Click" Skin="WebBlue" EnableEmbeddedSkins="False"

ClickSelectedTab="True" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Overview">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Personal">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Contact">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Salary">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Bank">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Taxes">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</div>

</form>

</body>

</html>

My code to navigate is as follows

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class tabNavigate : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void rdtabPersonalDetails_Click(object sender, RadTabStripEventArgs e)

{

RadTab tab1 = new RadTab();

switch (e.Tab.Text)

{

case "Overview":

tab1.NavigateUrl = "Default1.aspx";

break;

case "Personal":

tab1.NavigateUrl = "Default2.aspx";

break;

case "Contact":

tab1.NavigateUrl = "Default3.aspx";

break;

case "Salary":

tab1.NavigateUrl = "Default4.aspx";

break;

case "Bank":

tab1.NavigateUrl = "Default5.aspx";

break;

case "Taxes":

tab1.NavigateUrl = "Default6.aspx";

break;

}

But unable to achieve the required

5 Answers, 1 is accepted

answered on 12 Mar 2013, 03:50 PM

Hello Bill,

You could easily achieve the desired functionality with setting the Selected property of the RadTab and the corresponding RadPageView. In addition, you could use the FindTabByText or FindTabByValue methods in order to access the desired Tab. Please consider the following implementation:

protected void Page_Load(object sender, EventArgs e)

{

RadTabStrip1.FindTabByText("Tab 2").Selected = true;

RadMultiPage1.FindPageViewByID("PageView2").Selected = true;

}

Lastly, please refer to our documentation article, where the aforementioned methods are listed and described in details.

Kind regards,
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.

answered on 13 Mar 2013, 05:06 PM

Hello Nencho,

Thanks for responding! I tried using your advice but have no luck!

What I am trying to accomplish is much more complex. I am trying to use a regular fromhere.aspx page with hyperlinks pointing to a specific RadPageView using a RadMultiView tab strip. See below

Each hyperlink I want to point to an <a id="BM2" name="bookmark#2">bookmark 2</a> (and for #1 and #3 as well).
Code: fromhere.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fromhere.aspx.cs" Inherits="fromhere" %>

<!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:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Tabs.aspx?Tab=Tab1">Open Tab 1</asp:HyperLink><br />

<asp:HyperLink ID="HyperLink2" runat="server"

NavigateUrl="~/Tabs.aspx?Tab=Tab1#boomark1">Open Tab 2</asp:HyperLink><br />

<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Tabs.aspx?Tab=Tab2#boomark2">Open Tab 3</asp:HyperLink><br />

<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Tabs.aspx?Tab=Tab3#boomark3">Open Tab 4</asp:HyperLink><br />

</div>

</form>

</body>

</html>

-----------
Each fromhere.aspx hyperlink will open the Tabs.aspx page with the corresponding tab opening on Page_Load. See screen shot for desired outcome:

-----------
Tabs.aspx code: (see c# code below too)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tabs.aspx.cs" Inherits="Tabs" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!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">

<script type="text/javascript">

// function selectTab(text) {

// // var tabstrip = window.top.$find("ctl00_ContentPlaceHolder1_RadTabStrip1");

// var tabstrip = $find("<%= RadTabStrip1.ClientID %>");

// var tab = tabstrip.toString(text);

// if (tab)

// {

// tabstrip = selectTab

// }

// else

// {

// alert("Tab with text '" + text + "' not found.");

// }

</script>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab runat="server" Text="Tab1" Value="1" PageViewID="RadPageView1">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab2" Value="2" PageViewID="RadPageView2">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Tab3" Value="3" PageViewID="RadPageView3">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server">

<telerik:RadPageView ID="RadPageView1" runat="server">

RadPageView1

<br />

<a id="BM1" name="bookmark1" runat="server">Book Mark 1</a>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

RadPageView2

<br />

<a id="BM2" name="bookmark2" runat="server">Book Mark 2</a>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server">

RadPageView3

<br />

<a id="BM3" name="bookmark2" runat="server">Book Mark 3</a>

</telerik:RadPageView>

</telerik:RadMultiPage>

</form>

</body>

</html>

Tabs.aspx.cs code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class Tabs : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e, string Tab2)

{

//{

// RadTab tab = RadTabStrip1.Tabs.FindTabByText();

// tab.Selected = true;

//}

//else

//{

// RadTab tab2 = RadTabStrip1.Tabs.FindTabByText("Tab2");

// tab2.Selected = true;

//}

//{

// RadTab tab3 = RadTabStrip1.Tabs.FindTabByText("Tab3");

// tab3.Selected = true;

//}

//{

RadTabStrip1.Tabs.FindTabByText("Tab2").Selected = true;

RadMultiPage1.FindPageViewByID("RadPageView2").Selected = true;

// foreach (Telerik.Web.UI.RadTab item in RadTabStrip1.Tabs.FindTabByText("Tab1").Controls)

// {

// if (item.Text == "Tab2")

// {

// item.Selected = true;

// item.PageView.Selected = true;

// }

//}

}

//protected void Page_Load(object sender, EventArgs e, string CraneParts)

//{

// RadTabStrip1.Tabs.FindTabByText("CraneParts").Selected = true;

// foreach (Telerik.Web.UI.RadTab item in RadTabStrip1.Tabs.FindTabByText("CraneParts").Controls)

// {

// if (item.Text == "CraneParts")

// {

// item.Selected = true;

// item.PageView.Selected = true;

// }

//    //RadMultiPage1.FindPageViewByID("RadPageView_CraneParts").ContentUrl = "~/products.aspx?Tab=CraneParts#industrial";

//}

}

As you can see I have tried many different ways and have read through all the posts on TabStrips but could not find the answer.
Can you make a working sample so I can test it out? Thank so much!

P.S. I would have uploaded a sample project but the support submission doesn't allow it anymore?

answered on 18 Mar 2013, 12:23 PM

RadTabStripNavigate.zip

Hello Bill,

I have used the provided snippet of code to prepare a sample project for you, implementing the desired functionality. I had used the parameters passed in the Query String in order to determine which RadTab and RadPageView should be selected when the Tabs.aspx page is load. Here is a video demonstrating the behavior at my end.

Note that dll files are removed from the attachment.

Kind regards,
Nencho
the Telerik team