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

[GrZeCh]

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

[Paul]

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.

[GrZeCh]

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.

[Paul]

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.

[GrZeCh]

can this be achieved using clientside scripts (with param which tab we want to select)?

[Paul]

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.