In this tutorial you'll learn how to add a control to the content item of the C1WebTabStrip through the use of the C1WebContentItem class. This tutorial uses two different controls as en example. The second lesson shows how a Calendar control can be used in the C1WebTabStrip and the fourth lesson shows how a Literal control is used for adding text in the C1WebTabStrip. The image below labels the content item area of the C1WebTabStrip.
This tutorial is divided into four lessons. It's is recommended that you follow each lesson sequentially from start to finish. The four lessons in this tutorial include the following:
• Lesson 1: Adding a C1WebContentItem Type to C1WebTabStrip
• Lesson 2: Adding a Calendar Control to the C1WebContentItem of the C1WebTabStrip
• Lesson 3: Removing C1WebTabStrip's Default Items
• Lesson 4: Adding a Literal Control to the C1WebContentItem of the C1WebTabStrip
Lesson 1: Adding a C1WebContentItem Type to C1WebTabStrip
You are going to add the C1WebTabStrip control to the Web form by dragging and dropping it onto the Web form, and then you are going to add a new tab header and a new item of the type, C1WebContentItem. For more information on the different types of items for C1WebTabStrip, see TabStrip Item Types.
1. Create a new Web site.
2. Add a C1WebTabStrip control on the Web form. The C1WebTabStrip appears on the Web form. Its default name is C1WebTabStrip1.
3. In the designer, click Edit Groups from the C1WebTabStrip Tasks or from its short-cut menu right-click the control and select Edit Groups.
4. The C1WebTabStripGroup Collection Editor appears. Click the Add button to add a third group.
5. Select the newly added group member and modify its properties to the following:
• Enter Group 3 in the textbox of its Text property.
• Click on the ellipsis button next to the Items property. The C1WebTabStripItemCollection Editor appears.
• Click on the down arrow of the Add button and click C1WebContentItem.
• Click OK to close the C1WebTabStripItem Collection Editor.
• Click OK to close the C1WebTabStripGroup Collection Editor.
Lesson 2: Adding a Calendar Control to the C1WebContentItem of the C1WebTabStrip
Now that you have created a C1WebContentItem type for the C1WebTabStrip, you are ready to programmatically add a Calendar control inside the content area.
1. Right click on the .aspx Web form and select View Code. Import the C1.Web.Command namespace to prevent from having to type the entire namespace every time you use its members.
Imports C1.Web.Command
• C#
using C1.Web.Command;
2. Add the following line of code in the Page_Load event to create a new instance of the C1WebContentItem class.
Dim item As New C1.Web.Command.C1WebContentItem()
• C#
C1.Web.Command.C1WebContentItem item = new C1.Web.Command.C1WebContentItem();
3. Add the following code below in the Page_Load procedure.
item = Ctype(Me.C1WebTabStrip1.Groups(2).Items(0), C1WebContentItem)
item.Add(New Calendar())
• C#
item = (C1WebContentItem)this.C1WebTabStrip1.Groups[2].Items[0];
item.Add(new Calendar());
The first line of code adds the content item to the first item of the third group, Group 3. The second line of code adds the new calendar control to the content item.
4. Resize the C1WebTabStrip control at design time to make it larger to fit the Calendar.
5. Run the project.
6. Click on the third tab header, Group 3 and notice the new Calendar control in the content item.
7. Close the running project.
Lesson 3: Removing C1WebTabStrip's Default Items
Now that you have added a Calander control to the content area of the third tab header, you are going to remove the default items in Group 1 and Group 2 so you can add a C1WebContentItem for each Group 1 and Group 2.
1. Go to the design view of the Web form. Right-click the C1WebTabStrip control and select Edit Groups. The C1WebTabStripGroup Collection Editor appears.
2. Select Group – Group 1 from the Members list.
3. Locate its Items property and click on the ellipsis button. The C1WebTabStripItem Collection Editor appears.
4. Select each member from the list box and click on the Remove button for each member.
5. Click on the down arrow from the Add button and click on the C1WebContentItem.
6. Click OK from the C1WebTabStripItem Collection Editor.
7. Select Group 2 from the C1WebTabStripGroup Collection Editor.
8. Add a C1WebContentItem to the C1WebTabStripItem Collection Editor for Group 2, click OK to close the C1WebTabStripItem Collection Editor, and click OK to close the C1WebTabStripGroup Collection Editor.
Lesson 4: Adding a Literal Control to the C1WebContentItem of the C1WebTabStrip
In the third tab header, Group 3, you added a Calendar control to the content area. Now you are going to add a LiteralControl for each item in Group 1 and Group 2. With a LiteralControl you can create a simple sentence or paragraph for your tabstrip item.
The code below adds a LiteralControl for each item in the first and second group. By adding a LiteralControl, you can create a simple sentence or a paragraph for your tabstrip item.
1. Add the following code to the Page_Load procedure to add a LiteralControl with some text to the first and second group for the tabstrip.
item = CType(Me.C1WebTabStrip1.Groups(0).Items(0), C1WebContentItem)
item.Add(New LiteralControl("Here is the Group 1 section description."))
item = CType(Me.C1WebTabStrip1.Groups(1).Items(0), C1WebContentItem)
item.Add(New LiteralControl("Here is the Group 2 section description."))
• C#
item = (C1WebContentItem)this.C1WebTabStrip1.Groups[0].Items[0];
item.Add(new LiteralControl("Here is the Group 1 section description."));
item = (C1WebContentItem)this.C1WebTabStrip1.Groups[1].Items[0];
item.Add(new LiteralControl("Here is the Group 2 section description."));
2. Run the project.
3. Click the tab headers and notice the content displayed in the tabstrip item for the first and second tab headers.
Congratulations for Your Successful Completion of This Tutorial!
In this tutorial you learned how to add an item of the type, C1WebContentItem to the tabstrip, programatically add a Calendar control to the content area of the third group, remove default items from the tabstrip, and programmatically add a LiteralControl with some text to the content area of the first and second group.
|
