RadTabStrip click event when multiple tabs exists under a Tab

5 posts, 1 answers
  1. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 13 Jun 2012 Link to this post

    Hi all I am having my RadTabstrip  designed as follows

    <telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal"
                UnSelectChildren="True" Skin="Vista" EnableEmbeddedSkins="False" ClickSelectedTab="True"
                AutoPostBack="True" SelectedIndex="0" OnTabClick="tabClick">
                <Tabs>
                    <telerik:RadTab runat="server" Text="Personal">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Contact">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Salary">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Bank">
                    </telerik:RadTab>
                    <telerik:RadTab runat="server" Text="Taxes">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Residence">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Work">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTab>
                </Tabs>
            </telerik:RadTabStrip>
            <telerik:RadMultiPage ID="rdmpPersonal" runat="server">
                <telerik:RadPageView ID="rdpgPersonal" runat="server">
                    <label>
                        Demo Personal
                    </label>
                </telerik:RadPageView>
                <telerik:RadPageView ID="rdpgContact" runat="server">
                    <label>
                        Demo Contact
                    </label>
                </telerik:RadPageView>
                <telerik:RadPageView ID="rdpgResident" runat="server">
                    <label>
                        Resident Demo
                    </label>
                </telerik:RadPageView>
                <telerik:RadPageView ID="rdpgWork" runat="server">
                    <label>
                        Work Demo
                    </label>
                </telerik:RadPageView>
            </telerik:RadMultiPage>

    You can find under Taxes tab I am having sub Tabs. How can I handle Click event for that .

    I write my code as follows

    protected void tabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab.Text);
            e.Tab.PageView.Selected = true;
        }
        private void AddPageView(string pageViewID)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = pageViewID;
            rdmpPersonal.PageViews.Add(pageView);
        }

    But this didn't work child Tabs can some one help me

    I am also getting the following error if i click the same Tab for multiple times

    Multiple controls with the same ID 'Personal' were found. FindControl requires that controls have unique IDs.

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2012 Link to this post

    Hi Dorababu,

    You can use tabClick event for handling click event in child tabs. After inspecting your code I found that you are not using Unique ID for the RadPageView. Error occurred because of creating the RadPageView with same ID on each tabCilck event. Please try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal" UnSelectChildren="True" Skin="Vista" EnableEmbeddedSkins="False" ClickSelectedTab="True" AutoPostBack="True" SelectedIndex="0" OnTabClick="tabClick">
      <Tabs>
         <telerik:RadTab runat="server" Text="Personal" >
         </telerik:RadTab>
         <telerik:RadTab runat="server" Text="Contact" >
         </telerik:RadTab>
         <telerik:RadTab runat="server" Text="Salary" >
         </telerik:RadTab>
         <telerik:RadTab runat="server" Text="Bank">
         </telerik:RadTab>
         <telerik:RadTab runat="server" Text="Taxes">
            <Tabs>
               <telerik:RadTab runat="server" Text="Residence">
               </telerik:RadTab>
               <telerik:RadTab runat="server" Text="Work">
               </telerik:RadTab>
            </Tabs>
         </telerik:RadTab>
      </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rdmpPersonal" runat="server">
       <telerik:RadPageView ID="rdpgPersonal" runat="server">
          <label>
               Demo Personal
          </label>
       </telerik:RadPageView>
       <telerik:RadPageView ID="rdpgContact" runat="server">
          <label>
               Demo Contact
          </label>
       </telerik:RadPageView>
       <telerik:RadPageView ID="rdpgResident" runat="server">
          <label>
               Resident Demo
          </label>
       </telerik:RadPageView>
       <telerik:RadPageView ID="rdpgWork" runat="server">
          <label>
               Work Demo
          </label>
       </telerik:RadPageView>
    </telerik:RadMultiPage>

    C#:
    public static int i = 0;
    protected void Page_Load(object sender, EventArgs e)
        {
        }
    protected void tabClick(object sender, RadTabStripEventArgs e)
        {
            AddPageView(e.Tab.Text);
            e.Tab.PageView.Selected = true;
        }
    private void AddPageView(string pageViewID)
        {
            RadPageView pageView = new RadPageView();
            pageView.ID = pageViewID+i;
            i = i + 1;
            rdmpPersonal.PageViews.Add(pageView);
        }

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 13 Jun 2012 Link to this post

    Hi I am unable to view Work View

    My code

    public static int i = 0;
       protected void Page_Load(object sender, EventArgs e)
       {
            
       }
     protected void tabClick(object sender, RadTabStripEventArgs e)
           {
               AddPageView(e.Tab.Text);
               e.Tab.PageView.Selected = true;
     
           }
           private void AddPageView(string pageViewID)
           {
               RadPageView pageView = new RadPageView();
               pageView.ID = pageViewID + i;
               i = i + 1;
               rdmpPersonal.PageViews.Add(pageView);
           }

    My design

    <telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal"
               UnSelectChildren="True" Skin="WebBlue" EnableEmbeddedSkins="False" ClickSelectedTab="True"
               SelectedIndex="0" OnTabClick="tabClick">
               <Tabs>
                   <telerik:RadTab runat="server" Text="Personal">
                   </telerik:RadTab>
                   <telerik:RadTab runat="server" Text="Contact">
                   </telerik:RadTab>
                   <telerik:RadTab runat="server" Text="Salary">
                   </telerik:RadTab>
                   <telerik:RadTab runat="server" Text="Bank">
                   </telerik:RadTab>
                   <telerik:RadTab runat="server" Text="Taxes" SelectedIndex="0">
                       <Tabs>
                           <telerik:RadTab runat="server" Text="Residence">
                           </telerik:RadTab>
                           <telerik:RadTab runat="server" Text="Work">
                           </telerik:RadTab>
                       </Tabs>
                   </telerik:RadTab>
               </Tabs>
           </telerik:RadTabStrip>
           <telerik:RadMultiPage ID="rdmpPersonal" runat="server">
               <telerik:RadPageView ID="rdpgPersonal" runat="server" Selected="true">
                   <label>
                       Demo Personal
                   </label>
               </telerik:RadPageView>
               <telerik:RadPageView ID="rdpgContact" runat="server">
                   <label>
                       Demo Contact
                   </label>
               </telerik:RadPageView>
               <telerik:RadPageView ID="RadPageView1" runat="server">
                   <label>
                       Salary Demo
                   </label>
               </telerik:RadPageView>
               <telerik:RadPageView ID="RadPageView2" runat="server">
                   <label>
                       Demo Bank
                   </label>
               </telerik:RadPageView>
               <telerik:RadPageView ID="rdpgResident" runat="server">
                   <label>
                       Resident Demo
                   </label>
               </telerik:RadPageView>
               <telerik:RadPageView ID="rdpgWork" runat="server">
                   <label>
                       Work Demo
                   </label>
               </telerik:RadPageView>
           </telerik:RadMultiPage>
  5. Dorababu
    Dorababu avatar
    95 posts
    Member since:
    May 2012

    Posted 13 Jun 2012 Link to this post

    Few Issue when I click on Taxes tab I would like to select Residence by default.

    Also when I click on Residence for multiple times page view ID changes.

    Assume my child tab Work is selected, if I select Taxes again I would like to select Residence by default..

    Can you help me on this scenario
  6. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2012 Link to this post

    Hi Dorababu,

    Try the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadTabStrip ID="rdtabEmployee" runat="server" MultiPageID="rdmpPersonal" UnSelectChildren="True" Skin="WebBlue" EnableEmbeddedSkins="False" ClickSelectedTab="True" SelectedIndex="0" OnTabClick="tabClick">
      <Tabs>
        <telerik:RadTab runat="server" Text="Personal" PageViewID="rdpgPersonal">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Contact" PageViewID="rdpgContact">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Salary" PageViewID="RadPageView1">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Bank" PageViewID="RadPageView2">
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Taxes" SelectedIndex="0" >
          <Tabs>
            <telerik:RadTab runat="server" Text="Residence" PageViewID="rdpgResident">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Work" PageViewID="rdpgWork">
            </telerik:RadTab>
          </Tabs>
        </telerik:RadTab>
      </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rdmpPersonal" runat="server">
      <telerik:RadPageView ID="rdpgPersonal" runat="server" Selected="true">
        <label>
            Demo Personal
        </label>
      </telerik:RadPageView>
      <telerik:RadPageView ID="rdpgContact" runat="server">
        <label>
            Demo Contact
        </label>
      </telerik:RadPageView>
      <telerik:RadPageView ID="RadPageView1" runat="server">
        <label>
            Salary Demo
        </label>
      </telerik:RadPageView>
      <telerik:RadPageView ID="RadPageView2" runat="server">
        <label>
            Demo Bank
        </label>
      </telerik:RadPageView>
      <telerik:RadPageView ID="rdpgResident" runat="server">
        <label>
            Resident Demo
        </label>
      </telerik:RadPageView>
      <telerik:RadPageView ID="rdpgWork" runat="server">
        <label>
            Work Demo
        </label>
      </telerik:RadPageView>
    </telerik:RadMultiPage>

    Hope this helps.

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017