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

Navigate to the specified page using server side code

5 Answers 248 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Dorababu
Top achievements
Rank 1
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">
<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

Sort by
0
Nencho
Telerik team
answered on 04 Jul 2012, 10:26 AM
Hello,

RadTabStrip provides it's own functionality to handle navigation through different pages. You could simply use the RadMultiPage control and set the ContentUrl property of the PageViews. Here is our help section on how to integrate the RadMultiPage with RadTabStrip.

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.
0
Bill
Top achievements
Rank 1
answered on 08 Mar 2013, 02:30 AM
I was wonder if the reverse could be done, where you have a Button that navigates to a specific tab that opens?  The button would be on a separate page that opens up a tab control and pageview on a page load event?

Bill.
0
Nencho
Telerik team
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.
0
Bill
Top achievements
Rank 1
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">
 
<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">
 
<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 />
            <br />
            <a id="BM1" name="bookmark1" runat="server">Book Mark 1</a>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView2" runat="server">
            RadPageView2
            <br />
            <br />
            <a id="BM2" name="bookmark2" runat="server">Book Mark 2</a>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageView3" runat="server">
            RadPageView3
            <br />
            <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?
0
Nencho
Telerik team
answered on 18 Mar 2013, 12:23 PM
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
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.
Tags
TabStrip
Asked by
Dorababu
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Bill
Top achievements
Rank 1
Share this question
or