Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > Select Maintab and Maintabpage from Child page

• nazeer

  Posted on Feb 6, 2012 (permalink)

  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

  Reply

• Kate Kate

  Posted on Feb 6, 2012 (permalink)

  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 >>

  Reply


• nazeer

  Posted on Feb 8, 2012 (permalink)

  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

  Attached files

  • Capture.PNG

  Reply

• nazeer

  Posted on Feb 9, 2012 (permalink)

  Hi Telerik team,
  
  Any updates on my above mentioned query.
  
  Thanks
  Shaik Nazeer Hussain

  Reply

• Kate Kate

  Posted on Feb 13, 2012 (permalink)

  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 >>

  Reply

• nazeer

  Posted on Feb 17, 2012 (permalink)

  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
  

  Reply

• Answer Kate Kate

  Posted on Feb 22, 2012 (permalink)

  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.

  Attached files

  • TabStripContentUrlPage.zip

  Reply

• nazeer

  Posted on Feb 24, 2012 (permalink)

  Thanks for your support Kate.Its working fine.
  
  Thanks
  Shaik Nazeer Hussain

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > Select Maintab and Maintabpage from Child page