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

Changing ajaxified TabStrip (with MultiPage rendering selected page only) externally by JS

5 Answers 140 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
GrZeCh
Top achievements
Rank 2
GrZeCh asked on 13 Nov 2008, 10:14 AM
Hello!

Is this possible to change tab using client-side javascript when TabStrip is "ajaxified" and connected to MultiPage which renders only selected page?

I need something like this:

<span onclick="changeTab("secondtabID")">Change to second tab</span> 

this will be placed somethere outside Multipage.

Thanks in advance

5 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 13 Nov 2008, 12:01 PM
Hello GrZeCh,

In order to use the RenderSelectedPageOnly property of the multipage, you have to set the AutoPostBack property of the tabstrip to True as well.

Sincerely yours,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
GrZeCh
Top achievements
Rank 2
answered on 13 Nov 2008, 12:08 PM
Yes I know. My problem is how to externally (some element with onclick event not being part of tabstrip or multipage) change selected tab using JS when tabstrip and multipage are ajaxified.
0
Paul
Telerik team
answered on 13 Nov 2008, 01:15 PM
Hello GrZeCh,

Please find below a sample code snippet that shows the needed approach.

ASPX:
<form id="form1" runat="server">  
    <div> 
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="Button1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" /> 
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
    </div> 
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" AutoPostBack="true">  
        <Tabs> 
            <telerik:RadTab runat="server" Text="Root RadTab1">  
            </telerik:RadTab> 
            <telerik:RadTab runat="server" Text="Root RadTab2">  
            </telerik:RadTab> 
        </Tabs> 
    </telerik:RadTabStrip> 
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" RenderSelectedPageOnly="true">  
        <telerik:RadPageView ID="RadPageView1" runat="server">  
            RadPageView1</telerik:RadPageView> 
        <telerik:RadPageView ID="RadPageView2" runat="server">  
            RadPageView2</telerik:RadPageView> 
    </telerik:RadMultiPage> 
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> 
</form> 

Code-behind:
using System;  
using System.Data;  
using System.Configuration;  
using System.Collections;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
using Telerik.Web.UI;  
 
public partial class _Default : System.Web.UI.Page  
{  
    protected void Page_Load(object sender, EventArgs e)  
    {  
 
    }  
    protected void Button1_Click(object sender, EventArgs e)  
    {  
        RadTab tab = RadTabStrip1.FindTabByText("Root RadTab2");  
        tab.Selected = true;  
        RadMultiPage1.SelectedIndex = tab.Index;  
    }  
}  
 


Greetings,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
GrZeCh
Top achievements
Rank 2
answered on 13 Nov 2008, 01:19 PM
can this be achieved using clientside scripts (with param which tab we want to select)?
0
Paul
Telerik team
answered on 13 Nov 2008, 02:50 PM
Hi GrZeCh,

It will be a bit useless, as you still have to make postback to the server to update the multipage, otherwise the correct pageview won't be shown.

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TabStrip
Asked by
GrZeCh
Top achievements
Rank 2
Answers by
Paul
Telerik team
GrZeCh
Top achievements
Rank 2
Share this question
or