Manually switching Tab not working from user control

[sohrab]

Hello,

On the demo site I found your client side example how to switch tabs on a button click. This example is working as expected as long as I am not using User Controls.

On my page ("default.aspx") I do have a TabStrip with 2 tabs, and a Multipage with 2 PageViews.

<telerik:RadTabStrip ID="rtsTabs" runat="server" SelectedIndex="0" Skin="WebBlue" Orientation="HorizontalTop"
                    MultiPageID="rmpMultipages" OnClientTabSelecting="rtsTabs_TabSelecting" OnTabClick="rtsTabs_TabClick">
                    <Tabs>
                        <telerik:RadTab Text="Employee" runat="server" PageViewID="rpvEmployee" />
                        <telerik:RadTab Text="Manager" runat="server" PageViewID="rpvManager" TabIndex="1" />
                    </Tabs>
                </telerik:RadTabStrip>

                <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1">
                    <asp:Image runat="server" ID="LoadingImage1" SkinID="AjaxBigBlue" />
                </telerik:RadAjaxLoadingPanel>

                <telerik:RadMultiPage ID="rmpMultipages" runat="server" SelectedIndex="0">
                    <telerik:RadPageView ID="rpvEmployee" runat="server" Selected="true" TabIndex="0" CssClass="ContentForm">
                        <ucEmployee:UserControl ID="ucEmployeeForm" runat="server" />
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="rpvManager" runat="server" TabIndex="1" CssClass="ContentForm">
                        <ucManager:UserControl ID="ucManagerForm" runat="server" />
                    </telerik:RadPageView>

                </telerik:RadMultiPage>

When I trigger an event on details.aspx to switch tab and pageview everything works as expected (according to your advertised example on the demo pages).

function SetTab(sTabText)
            {
                var tab = $find("rtsTabs").findTabByText(sTabText);
                if (tab != null)
                {
                    tab.set_selected(true);
                    var pageView = $find("<%= rmpMultipages.ClientID %>");
                    var pageViewIndex = 3;
                    pageView.get_pageViews().getPageView(pageViewIndex).set_selected(true);
                }
            }

But as I said, the pageviews are actually loading User Controls and so the Events are triggered from the User Control and that is causing the problem.

$find("rtsTabs") always returns a proper object. But it never finds the Multipages. $find("rmpMultipages") or $find("<%= rmpMultipages.ClientID %>") always returns null.

The Button Click in the User Control is doing this (RowCommandEvent within a Gridview):

if (e.CommandName == "Aufgabe")
{
      ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetTab('Employee');", true);
}

I also tried to create my own event which is triggered from the UserControl and executed from details.aspx but the result remains the same: I can switch the tabs but I cant switch the pageview.

[Atanas Korchev]

Hello sohrab,

Unfortunately RegisterStartupScript executes before the client-side objects of RadTabStrip and RadMultipage are initialized. Please try changing the SetTab method like this:

function SetTab(sTabText) 
{ 
    window.setTimeout(function () {
        var tab = $find("rtsTabs").findTabByText(sTabText); 
        if (tab != null) 
        { 
            tab.set_selected(true); 
            var pageView = $find("<%= rmpMultipages.ClientID %>"); 
            var pageViewIndex = 3; 
            pageView.get_pageViews().getPageView(pageViewIndex).set_selected(true); 
        }
    }, 100);
}
Sincerely yours,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[sohrab]

Awesome, that did the trick :)

However, Register Startupscript works fine as long as it is used on the aspx Page where the pageview is situated. Only when you try to get it working from a usercontrol you need to set the timeout :)

[chris_cf]

How would I validate the current PageView before switching to another tab via javascript?

[Paul]

Hello chris_cf,

By default, the value of tabstrip's CausesValidation property is true, so your validations should fire upon clicking on other than the selected tab.

Kind regards,
Paul
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Mike Conine]

Greetings;

I need help as well on this exact scenario from a User Control. I have confirmed the code works in a .aspx page. I am trying to hit RadMultipage with RadMenu - VB.Net. I have a dynamically generated TabStrip on the parent page:

The ascx is called from the containing page:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        RadTabStrip1.Tabs.Add(_Tab)
        _Tab.Text = "My Dashboard"
        RadMultiPage1.PageViews.Add(_PageView)
        _Control = LoadControl("~/Admin/Orgs/UCL/ucl_ProfileHome.ascx", "", _User)
        _PageView.Controls.Add(_Control)
     End Sub

In the .ascx I have a menu and a MultiPage

<script type="text/javascript">

function showPageView(sender, eventArgs) {

window.setTimeout(function() {

var item = eventArgs.get_item();

alert("Clicking: " + item.get_value());

var pageView = $find("<%= RadMultiPage1.ClientID %>");

pageView.get_pageViews().getPageView(2).set_selected(true);

alert("pageView: " + pageView.get_pageViews().getPageView(item.get_value()).get_id());

return false;

}, 1000);

}        </scipt>

<div style="float: left; width: 90px;">             <Telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemClicked="showPageView" Flow="Vertical" Skin="Black">

<Items>

<Telerik:RadMenuItem runat="server" Text="Page 1" Value="0">

</Telerik:RadMenuItem>

<Telerik:RadMenuItem runat="server" Text="Page 2" Value="1">

</Telerik:RadMenuItem>

<Telerik:RadMenuItem runat="server" Text="Page 3" Value="2">

</Telerik:RadMenuItem>

</Items>

</Telerik:RadMenu>

</div>

<div style="float: left; width: 400px;">

<Telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="167px" Width="240px" Style="border: 1px solid black" RenderSelectedPageOnly="True">

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

<ul>

<li>1</li>

<li>RadControls for WinForms</li>

<li>Telerik Reporting</li>

<li>Sitefinity CMS</li>

</ul>

</Telerik:RadPageView>

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

<ul>

<li>2</li>

<li>Enterprise Account Manager</li>

<li>On-site Training</li>

<li>GoToMeeting Sessions</li>

</ul>

</Telerik:RadPageView>

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

<ul>

<li>3</li>

<li>Press Center</li>

<li>Customers</li>

<li>Awards</li>

</ul>

</Telerik:RadPageView>

</Telerik:RadMultiPage>

</div>

</div>

I can get everything on the menu click - menu value, Rad MultiPage Id and so on. I simply cannot fire set_selected(true)

I believe the issue I am having is Register.StartupScript:

From this thread:
"However, Register Startupscript works fine as long as it is used on the aspx Page where the pageview is situated. Only when you try to get it working from a usercontrol you need to set the timeout :)"

Can you send me a sample to impliment, Register Startupscript, in the .ascx?

Mike