Select Maintab and Maintabpage from Child page

[nazeer]

Hi Telerik Team,

How to select maintab and maintabpage from Child page.

For Example:
I am having MainContentPage.aspx page inside this i have my Tabstrip and MultiPage hierarchy as mentioned below.

<

telerik:RadTabStrip ID="RadToolTabs" SelectedIndex="0" runat="server" MultiPageID="radMultiPage">

     <Tabs>

         <telerik:RadTab runat="server" Text="Products " SelectedIndex="0">

             <Tabs>

                 <telerik:RadTab Text=" Lux " SelectedIndex="0"></telerik:RadTab>

                 <telerik:RadTab Text=" Santoor "></telerik:RadTab>

             </Tabs>

         </telerik:RadTab>

         <telerik:RadTab runat="server" Text=" ProductPrice " >
        </telerik:RadTab>

     </Tabs>

 </telerik:RadTabStrip>

 <telerik:RadMultiPage runat="server" SelectedIndex="0" ID="radMultiPage">

     <telerik:RadPageView ID="RadPageView1" runat="server" Height="500px" ContentUrl="Products.aspx"></telerik:RadPageView>

     <telerik:RadPageView ID="RadPageView2" runat="server" Height="500px" ContentUrl="Lux.aspx"></telerik:RadPageView>

     <telerik:RadPageView ID="RadPageView3" runat="server" Height="500px" ContentUrl="Santoor.aspx"></telerik:RadPageView>

     <telerik:RadPageView ID="RadPageView4" runat="server" Height="500px" ContentUrl="ProductPrice.aspx"></telerik:RadPageView>

 </telerik:RadMultiPage>

  

When MainContentPage.aspx page loads, By default the Products tab, Lux tab Selected and Lux.aspx page loaded.
and i am having GoProdcutPrice button in my Lux.aspx Page(Childtab page) , When i click on this button i have to select ProductPrice.aspx page and ProductPrice tab.

How can i achieve this scenario?

Thanks
Shaik Nazeer Hussain

[Kate]

Hi Shaik,

You can use some client-side programming to find the RadTabStrip controls and set the desired tab and multipage as selected (you can use the set_selected(true) method) by attaching an event handler on the OnClientClicked event.

Kind regards,
Kate
the Telerik team

[nazeer]

Hi Kate,

Can you please give some sample code where can i redirect child tab page to parent tab page.
I have tried client-side programming, but it did not work.
I can not able to invoke paret page RadMultipageID  from Child page.

Please find the screenshot for scenario where i needed.

Thanks
Shaik Nazeer Hussain

[nazeer]

Hi Telerik team,

Any updates on my above mentioned query.

Thanks
Shaik Nazeer Hussain

[Kate]

Hi Shaik,

You can use the following code to achieve the desired functionality:

<script type="text/javascript">
            function OnClientClicking(sender, e) {
                e.set_cancel(true);
                var tbs = $find("RadTabStrip1");
                var tab = tbs.get_tabs().getTab(3);
                tab.set_selected(true);
            }

        </script>

markup:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab Text="Court Info" PageViewID="RadPageView0">
                </telerik:RadTab>
                <telerik:RadTab Text="Contacts">
                    <Tabs>
                        <telerik:RadTab Text="tab1">
                        </telerik:RadTab>
                        <telerik:RadTab Text="tab2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTab>
                <telerik:RadTab Text="Activity" PageViewID="RadPageView2">
                </telerik:RadTab>
                <telerik:RadTab Text="DueDates" PageViewID="RadPageView3">
                </telerik:RadTab>
                <telerik:RadTab Text="Discovery" PageViewID="RadPageView4">
                </telerik:RadTab>
                <telerik:RadTab Text="Schedule" PageViewID="RadPageView5">
                </telerik:RadTab>
                <telerik:RadTab Text="Settlement" PageViewID="RadPageView6">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="RadPageView0" runat="server">
                page0
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView1" runat="server">
                page1
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView2" runat="server">
                page2
                <telerik:RadButton runat="server" ID="button1" Text="button1" OnClientClicking="OnClientClicking">
                </telerik:RadButton>
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView3" runat="server">
                page3
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView4" runat="server">
                page4
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView5" runat="server">
                page5
            </telerik:RadPageView>
            <telerik:RadPageView ID="RadPageView6" runat="server">
                page6
            </telerik:RadPageView>
        </telerik:RadMultiPage>

Kind regards,
Kate
the Telerik team

[nazeer]

Hi Kate,

Its not working for my scenario.As per my scenario i have changed the code(added contenturl for RadPageview).

Now i click Activity Tab my page get redirects to page2.aspx.Now if i click button1, i want to redirect my page to page3.aspx and should select DueDates tab.

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"

            SelectedIndex="0">

            <Tabs>

                <telerik:RadTab Text="Court Info" PageViewID="RadPageView0">

                </telerik:RadTab>

                <telerik:RadTab Text="Contacts">

                    <Tabs>

                        <telerik:RadTab Text="tab1">

                        </telerik:RadTab>

                        <telerik:RadTab Text="tab2">

                        </telerik:RadTab>

                    </Tabs>

                </telerik:RadTab>

                <telerik:RadTab Text="Activity" PageViewID="RadPageView2">

                </telerik:RadTab>

                <telerik:RadTab Text="DueDates" PageViewID="RadPageView3">

                </telerik:RadTab>

                <telerik:RadTab Text="Discovery" PageViewID="RadPageView4">

                </telerik:RadTab>

                <telerik:RadTab Text="Schedule" PageViewID="RadPageView5">

                </telerik:RadTab>

                <telerik:RadTab Text="Settlement" PageViewID="RadPageView6">

                </telerik:RadTab>

            </Tabs>

        </telerik:RadTabStrip>

        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

            <telerik:RadPageView ID="RadPageView0" runat="server" ContentUrl="page0.aspx">
            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView1" runat="server" ContentUrl="page1.aspx">
            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView2" runat="server" ContentUrl="page2.aspx">

                <telerik:RadButton runat="server" ID="button1" Text="button1" OnClientClicking="OnClientClicking">

                </telerik:RadButton>

            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView3" runat="server" ContentUrl="page3.aspx">

            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView4" runat="server" ContentUrl="page4.aspx">

            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView5" runat="server" ContentUrl="page5.aspx">

            </telerik:RadPageView>

            <telerik:RadPageView ID="RadPageView6" runat="server" ContentUrl="page6.aspx">

            </telerik:RadPageView>

        </telerik:RadMultiPage>

If i use OnClientClicking function in my Page2.aspx, i can not find the object for RadTabStrip1.
Please let me know is there any way to acheive this functionality?

Thanks
Shaik Nazeer Hussain

[Kate]

Hi Shaik,

You will need to access the parent element of the page whose contentUrl you set (however, this is applicable only in the scenario when the page containing the RadTabStrip control and the page whose content is loaded in the pageview belong to the same domain). Here is an example how you can achieve that (you can also refer to the attached runnable project).

content page:

<script type="text/javascript">
        function OnClientClicking(sender, args) {
            window.parent.GetTabStripAndSelectItem();
        }
    </script>
    <div>
        iframe page
        <telerik:RadButton runat="server" ID="button1" Text="button1" AutoPostBack="false"
            OnClientClicking="OnClientClicking">
        </telerik:RadButton>
    </div>

parent page:

<script type="text/javascript">
        function GetTabStripAndSelectItem() {
            var tabstrip = $find("RadTabStrip1");
            var tab = tabstrip.get_tabs().getTab(0);
            tab.set_selected(true);
        }
    </script>
    <div>
        <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1">
            <Tabs>
                <telerik:RadTab Text="tab1" PageViewID="pv1">
                </telerik:RadTab>
                <telerik:RadTab Text="tab2" PageViewID="pv2">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
            <telerik:RadPageView ID="pv1" runat="server">
            </telerik:RadPageView>
            <telerik:RadPageView ID="pv2" runat="server" ContentUrl="Default2.aspx">
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>

 
All the best,
Kate
the Telerik team

[nazeer]

Thanks for your support Kate.Its working fine.

Thanks
Shaik Nazeer Hussain