Please provide example of Tab strip control

[Anjanaa Parasuraman]

Hello.. 

I am new to TabStrip. Can you please provide example of Tab strip control? 

My requirement goes like having a diagram web control in the main tab, On node click, it has to navigate to another tab that has another diagram web control. 

Thanks

Anjanaa

[Ezhil S]

Hi Anjanaa,

 

Thank you for using Syncfusion products.

 

To create a TabStrip control that loads different controls on each tab, we suggest you to create TabStrip with MultiPage. You can add each tab to load a page based on the PageViewID, which should match the MultiPage ID and Clicking on the button you can navigate to corresponding tabs by setting selected property as true.Please check the attached sample to illustrate the above mentioned behavior. Please refer the following code snippet,

 

<code>

[ASPX]

    <syncfusion:tabstrip id="TabStrip" runat="server" width="100px" autoformat="Multiple Pages" height="40px" multipageid="MultiPage1">

        <Items>

            <syncfusion:TabStripItem ID="tab1" Text="Support" PageViewID="MultiPage1_page1" Selected="True">

            </syncfusion:TabStripItem>

            <syncfusion:TabStripItem ID="tab2" Text="Services" PageViewID="MultiPage1_page4">

            </syncfusion:TabStripItem>

            <syncfusion:TabStripItem ID="tab3" Text="Home" PageViewID="MultiPage1_page2">

            </syncfusion:TabStripItem>

            <syncfusion:TabStripItem ID="tab4" Text="About" PageViewID="MultiPage1_page5">

            </syncfusion:TabStripItem>

        </Items>

    </syncfusion:tabstrip>

    <syncfusion:multipage id="MultiPage1" runat="server" borderwidth="1px" height="240px" pagecount="4" selectedindex="3" width="432px" backcolor="White" borderstyle="Solid">

        <syncfusion:PageView runat="server" ID="MultiPage1_page4">

            Services<br/>

            You can add controls related to tab functionality<br/>

            <syncfusion:ButtonAdv runat="server" ID="ButtonAdv1" Text="Next>>" Height="25px" Width="54px" AutoFormat="Office2010Blue" DisplayType="TextOnly" OnClick="ButtonAdv1_Click">

         </syncfusion:ButtonAdv>

        </syncfusion:PageView>

        <syncfusion:PageView ID="MultiPage1_page5" runat="server">

            Location and Contacts<br/>

           You can add controls related to tab functionality<br/>

             <syncfusion:ButtonAdv runat="server" ID="ButtonAdv3" Text="First>>" Height="25px" Width="54px" AutoFormat="Office2010Blue" DisplayType="TextOnly" OnClick="ButtonAdv3_Click">

         </syncfusion:ButtonAdv>

        </syncfusion:PageView>

        <syncfusion:PageView ID="MultiPage1_page2" runat="server">

            Products

            You can add controls related to tab functionality<br/>

            <syncfusion:ButtonAdv runat="server" ID="ButtonAdv2" Text="Next>>" Height="25px" Width="54px" AutoFormat="Office2010Blue" DisplayType="TextOnly" OnClick="ButtonAdv2_Click">

         </syncfusion:ButtonAdv>

          

        </syncfusion:PageView>

        <syncfusion:PageView ID="MultiPage1_page1" runat="server">

            KB and forum<br/>You can add controls related to tab functionality<br />  

         <syncfusion:ButtonAdv runat="server" ID="OfficeButton1" Text="Next>>" Height="25px" Width="54px" AutoFormat="Office2010Blue" DisplayType="TextOnly" OnClick="OfficeButton1_Click">

          </syncfusion:ButtonAdv>

        </syncfusion:PageView>

    </syncfusion:multipage>  

 

[CodeBehind.CS]

               //Code for a button click event

protected void ButtonAdv1_Click(object Sender, Syncfusion.Web.UI.WebControls.Shared.ButtonAdvControl.ButtonAdvClickEventArgs e)

        {

            tab1.Selected = false;

            tab2.Selected = false;

            tab3.Selected = true;

            tab4.Selected = false;

        }

</code>

 

Please download the sample prepared from the following link:

http://www.syncfusion.com/downloads/support/directtrac/125997/Tab_125997-1676462875.zip

 

Kindly let us know if you have further queries.

 

Regards,

Ezhil S

[Anjanaa Parasuraman]

Thanks Ezhil for your prompt response. I will try this and I will let you know. 

By the way, Ezhil seems to be name of a person from Tamil Nadu. Are you from Tamil Nadu? I am too. 

Thanks

Anjanaa

[Ezhil S]

Hi Anjanaa,

 

Thanks for your update.

 

Yes, we are from TamilNadu. We will wait to hear from you.

 

Kindly let us know if you require further assistance on this.

 

Regards,

Ezhil S