Telerik Forums / UI for ASP.NET AJAX Forum / TabStrip /

Select Maintab and Maintabpage from Child page

Telerik UI for ASP.NET AJAX
Resources Buy Try

8 posts, 1 answers

nazeer

27 posts

Member since:
May 2009

Posted 06 Feb 2012 Link to this post

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
Admin

1898 posts

Posted 06 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
nazeer

27 posts

Member since:
May 2009
Posted 08 Feb 2012 Link to this post

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

Capture.PNG
nazeer

27 posts

Member since:
May 2009

Posted 09 Feb 2012 Link to this post

Hi Telerik team,

Any updates on my above mentioned query.

Thanks
Shaik Nazeer Hussain
Kate
Admin

1898 posts

Posted 13 Feb 2012 Link to this post

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

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
nazeer

27 posts

Member since:
May 2009

Posted 17 Feb 2012 Link to this post

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
Answer
Kate
Admin

1898 posts
Posted 22 Feb 2012 Link to this post

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

TabStripContentUrlPage.zip
nazeer

27 posts

Member since:
May 2009

Posted 24 Feb 2012 Link to this post

Thanks for your support Kate.Its working fine.

Thanks
Shaik Nazeer Hussain

Select Maintab and Maintabpage from Child page

nazeer

Kate

nazeer

nazeer

Kate

nazeer

Kate

nazeer