We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Please provide example of Tab strip control

Thread ID:

Created:

Updated:

Platform:

Replies:

116559 Jun 9,2014 06:57 PM UTC Jun 12,2014 07:25 AM UTC ASP.NET Web Forms (Classic) 3
loading
Tags: TabStrip
Anjanaa Parasuraman
Asked On June 9, 2014 06:57 PM UTC

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 [Syncfusion]
Replied On June 10, 2014 03:37 PM UTC

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
Replied On June 11, 2014 02:11 PM UTC

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 [Syncfusion]
Replied On June 12, 2014 07:25 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;