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

Select Tab on clicking Next Button

1 Answer 72 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Zeeshan
Top achievements
Rank 1
Zeeshan asked on 30 Jul 2013, 09:40 AM
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,

1 Answer, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 01 Aug 2013, 11:09 AM
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.
Tags
TabStrip
Asked by
Zeeshan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Share this question
or