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. Image for the cookie policy date
close icon

Please provide example of Tab strip control

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

3 Replies

ES Ezhil S Syncfusion Team 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



AP Anjanaa Parasuraman 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


ES Ezhil S Syncfusion Team 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


Loader.
Up arrow icon