Introduction to ComponentArt's TabStrip Control
page 3 of 6
by Nihar Nayak
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 27505/ 82

Creating a Sample Page Using TabStrip Control

Start Visual Studio. Click File -> New -> Web Site. Select the ASP.NET Web Site and name the site as TabStripSample.

Open Default.aspx in source mode. Expand the "ComponentArt Web UI 2010.1 for ASP.NET" node in toolbox. Drag the TabStrip control and drop it into the page. You can also manually type it, but dragging the control for the first time adds the following reference to the page.

<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" 
TagPrefix="ComponentArt" %>

Now the control is placed in the page. We need to set some other properties of the control.

How to Create Multiple Tabs Using MultiPage Control

ComponentArt's MultiPage control is used to create tabs for the TabStrip control. Inside MultiPage control we can create many PageViews. So the MultiPage control acts as the main placeholder for all the tabs and the PageView control acts as one tab. We can create as many PageViews inside one MultiPage control. Inside the PageView control we can put any HTML content to create the tab.

Specify an ID to the MultiPage control. The TabStrip control has a property called "MultiPageId". Set this property to the ID of the MultiPage control.

Now the HTML content for our Tabs is ready. Now we have to create the Tab names or the headers for the respective PageView.

How to Set the Tab Names

There are 2 ways of setting the Tab names to your tabs.

Setting Tab Names by Binding to an external XML file


Create an XML file which will hold all the required Tab names or the Headers. Write the following XML code into the file.

      <item Text="Employee Details" />
      <item Text="Employee Contact" />
      <item Text="Employee Projects" />   


I have named the root node as SiteMap but you can specify any other name. But the starting and ending node names should be same. Inside the root node there are some item nodes. The "item" node has a property called "Text". This property's value will be set as the Tab's name or header. While creating the XML nodes you need to keep one thing mind that the order of the PageView control and the "item" nodes should match. Otherwise "Employee Details" tab will show "Employee Contact" or "Employee Projects".

By Specifying Under the TabStrip Control

There is another way of creating the Tab names. You can specify them directly under the TabStrip control like below.

    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Details "></ComponentArt:TabStripTab>
    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Contact "></ComponentArt:TabStripTab>
    <ComponentArt:TabStripTab runat="server" 
        Text=" Employee Projects "></ComponentArt:TabStripTab>                

You have to choose either of this method.

View Entire Article

User Comments

Title: Very GOOD   
Name: SAI
Date: 2010-05-20 7:00:38 AM
Nice Thought process. People like you are are Good assets for company
Title: Good   
Name: Your Boss
Date: 2010-05-19 5:39:24 AM
Good one Nihar. Keep it up. Really I am missing you. I am not able to find a professional like you with all round knowledge like professional.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-18 11:07:06 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search