RadMultiView nested inside a RadTabStrip

2 posts, 0 answers
  1. Timothy
    Timothy avatar
    5 posts
    Member since:
    Oct 2013

    Posted 24 Apr 2014 Link to this post

    Hi,

    I am writing a dialog that displays 4 tabs using a RadTabStrip/RadMultiPage. Inside each tab is a different control. (the dialog itself is wrapped in an AJAX panel) Inside the Boundary page I want to nest another radmultiview which can be toggled back and forth between two different views. The javascript that I've written which I would have thought would work is changing the selected index but it is not actually changing the view on the screen. Is there something wrong about what I'm doing?

    Javascript to switch the view on the Boundary page (gets called from a button click from on the first of the two views on that page):

    function SwitchToNew()
            {
                if (EditOffering._BoundaryMultiPageObj)
                {
                    EditOffering._BoundaryMultiPageObj.set_selectedIndex(1);
                }
            }

    How the Tabs/Views are set up:

                   <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Default" MultiPageID="RadMultiPage1" Width="100%" SelectedIndex="0">
                        <Tabs>
                            <telerik:RadTab Text="Basic Info" PageViewID="BasicInfoPage" Value="basic" runat="server"></telerik:RadTab>
                            <telerik:RadTab Text="Types" PageViewID="TypesPage" Value="types" runat="server"></telerik:RadTab>
                            <telerik:RadTab Text="Boundary" Value="boundaryMain" PageViewID="BoundaryPage" runat="server"></telerik:RadTab>
                            <telerik:RadTab Text="(Optional) Walkin Location" Value="walkin" PageViewID="WalkinPage" runat="server"></telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
                        <telerik:RadPageView runat="server" ID="BasicInfoPage">
                            <BcgAlert:InfoTab runat="server" ID="InfoTab1" />
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="TypesPage">
                            <BcgAlert:TypesTab runat="server" ID="TypesTab1" />
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="BoundaryPage" runat="server">
                            <telerik:RadMultiPage runat="server" ID="BoundaryMultiPage" SelectedIndex="0">
                                <telerik:RadPageView runat="server" ID="ExistingBoundaryPage">
                                    <BcgAlert:ExistingBoundaryTab runat="server" ID="ExistingBoundaryTab1" />
                                </telerik:RadPageView>
                                <telerik:RadPageView runat="server" ID="NewBoundaryPage">
                                    <BcgAlert:NewBoundaryTab runat="server" ID="BoundaryTab1" />
                                </telerik:RadPageView>
                            </telerik:RadMultiPage>
                        </telerik:RadPageView>
                        <telerik:RadPageView ID="WalkinPage" runat="server">
                            <BcgAlert:WalkinTab runat="server" ID="WalkinTab1" />
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>





  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 29 Apr 2014 Link to this post

    Hello,

    Please find in the code snippet below a sample approach for changing the page views of the nested  BoundaryMultiPage dynamically by a button click. Please note that for each page view contains a text box control that has text value set to the id of the associated page view control. This way you can easily determine which page view is shown.
    //JavaScript
    function SwitchToNew() {
                    var boundaryMultiPage = $find("<%= BoundaryMultiPage.ClientID %>");
                    boundaryMultiPage.set_selectedIndex(1);
                }
    //markup code
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Default" MultiPageID="RadMultiPage1" Width="100%" SelectedIndex="0">
                <Tabs>
                    <telerik:RadTab Text="Basic Info" PageViewID="BasicInfoPage" Value="basic" runat="server"></telerik:RadTab>
                    <telerik:RadTab Text="Types" PageViewID="TypesPage" Value="types" runat="server"></telerik:RadTab>
                    <telerik:RadTab Text="Boundary" Value="boundaryMain" PageViewID="BoundaryPage" runat="server"></telerik:RadTab>
                    <telerik:RadTab Text="(Optional) Walkin Location" Value="walkin" PageViewID="WalkinPage" runat="server"></telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
                <telerik:RadPageView runat="server" ID="BasicInfoPage">
                    <asp:TextBox runat="server" Text="BasicInfoPage"></asp:TextBox>
                </telerik:RadPageView>
                <telerik:RadPageView runat="server" ID="TypesPage">
                    <asp:TextBox ID="TextBox1" runat="server" Text="TypesPage"></asp:TextBox>
                </telerik:RadPageView>
                <telerik:RadPageView ID="BoundaryPage" runat="server">
                    <telerik:RadMultiPage runat="server" ID="BoundaryMultiPage" SelectedIndex="0">
                        <telerik:RadPageView runat="server" ID="ExistingBoundaryPage">
                            <asp:TextBox ID="TextBox2" runat="server" Text="BoundaryMultiPage / ExistingBoundaryPage"></asp:TextBox>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="NewBoundaryPage">
                             <asp:TextBox ID="TextBox3" runat="server" Text="BoundaryMultiPage / NewBoundaryPage"></asp:TextBox>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </telerik:RadPageView>
                <telerik:RadPageView ID="WalkinPage" runat="server">
                    <asp:TextBox ID="TextBox4" runat="server" Text="WalkinPage"></asp:TextBox>
                </telerik:RadPageView>
            </telerik:RadMultiPage>
            <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked-="SwitchToNew"></telerik:RadButton>
        </ContentTemplate>
    </asp:UpdatePanel>



    Regards,
    Boyan Dimitrov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top