Manually switching Tab not working from user control

6 posts, 0 answers
  1. sohrab
    sohrab avatar
    12 posts
    Member since:
    Feb 2007

    Posted 16 Jan 2009 Link to this post

    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.
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. sohrab
    sohrab avatar
    12 posts
    Member since:
    Feb 2007

    Posted 20 Jan 2009 Link to this post

    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 :)
  5. chris_cf
    chris_cf avatar
    53 posts
    Member since:
    Jul 2007

    Posted 21 Mar 2009 Link to this post

    How would I validate the current PageView before switching to another tab via javascript?
  6. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 23 Mar 2009 Link to this post

    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.
  7. Mike Conine
    Mike Conine avatar
    12 posts
    Member since:
    Aug 2004

    Posted 16 Aug 2009 Link to this post

    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 ObjectByVal 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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017