Select Tab on clicking Next Button

[Zeeshan]

Hi Guys,
I am using AJAX toolkit Q2 2013 version of Telerik AJAX controls. I am using RadTabStrip control and I am facing problem of Tab selection. My scenario is give below:

I've 5 Tabs of RadTabStrip control on my page and this tab strip control is associate with RadMultipage control. In RadMultipage control every page view is  a separate .aspx control and there is next button control in my page (Next button is the part of page.aspx page). By clicking on this next button I want to select next tab and also show it as a selected.

<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" Width="100%" Height="100%" runat="server" MultiPageID="RadMultiPage1" CssClass="RadTabStrip_Default" Skin="Default" EnableEmbeddedSkins="false" >
< Tabs>
< tab>Tab1</Tab>
.
.
.
.
< /Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated" CssClass="multiPage">

<telerik:RadPageView runat="server" ContentUrl="Page.aspx"> </telerik:RadPageView>

.
.
.

</telerik:RadMultiPage>

Can anyone guide my that how I can achieve this??? Thanks in advance.

Regards,

[Princy]

Hi Zeeshan,

You wont be able to access the RadTabStrip from the page which is loaded in the RadPageView using ContentUrl. So the better option is to add the button in the page containing the RadTabStrip. Please check the following code.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
    Skin="Web20">
    <Tabs>
        <telerik:RadTab runat="server" Text="File Explorer" PageViewID="RadPageView1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Drop Down" PageViewID="RadPageView2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="AsyncUpload" PageViewID="RadPageView3">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
    <telerik:RadPageView runat="server" ID="RadPageView1" ContentUrl="~/RadFileExplorer/RadFileExplorer1.aspx">
    </telerik:RadPageView>
    <telerik:RadPageView runat="server" ID="RadPageView2" ContentUrl="DropDown.aspx">
    </telerik:RadPageView>
    <telerik:RadPageView runat="server" ID="RadPageView3" ContentUrl="RadTabInRow.aspx">
    </telerik:RadPageView>
</telerik:RadMultiPage>

JavaScript:

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var radtabstrip = $find('<%=RadTabStrip1.ClientID %>');
        var count = radtabstrip.get_tabs().get_count();
        var currentindex = radtabstrip.get_selectedIndex();
        var nextindex = currentindex + 1;
        if (nextindex < count) {
            radtabstrip.set_selectedIndex(nextindex);
        }
    }
</script>

Thanks,
Princy.