RadTabStrip click event when multiple tabs exists under a Tab

[Dorababu]

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.

[Princy]

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.

[Dorababu]

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>

[Dorababu]

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

[Princy]

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.