BasicTabControl

The BasicTabControl control displays a tab menu according to data provided by a two dimensional array. BasicTabControl doesn’t rely on the Kentico database or API — you can use the control to navigate to pages outside of Kentico websites.

Tip: If you want to display a tab menu for pages on a Kentico website, you can use the CMSTabControl control, which has built-in support for loading Kentico pages.

Getting started

The following is a step-by-step tutorial that shows how to display a simple tab menu using the BasicTabControl control:

  1. Create a new Web form in your web project.

  2. Drag the BasicTabControl control from the toolbox onto the form.

    • The code of the BasicTabControl looks like this:



<cms:BasicTabControl ID="BasicTabControl1" runat="server" />


  1. Add the following CSS styling code between the tags of the web form’s <head> element:

    
    
    
     <style type="text/css">
    
     /* Tab menu class definitions */    
     .TabControlTable { FONT-SIZE: 14px; FONT-FAMILY: Arial,Verdana }
     .TabControlRow { }
     .TabControl { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #e7e7ff; BORDER-LEFT: black 1px solid; CURSOR: pointer; COLOR: black }
     .TabControlSelected { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; BACKGROUND: #4a3c8c; BORDER-LEFT: black 1px solid; CURSOR: default; COLOR: white }
     .TabControlLinkSelected { COLOR: white; TEXT-DECORATION: none }
     .TabControlLink { COLOR: black; TEXT-DECORATION: none }
     .TabControlLeft { WIDTH: 1px }
     .TabControlRight { WIDTH: 0px }
     .TabControlSelectedLeft { WIDTH: 1px }
     .TabControlSelectedRight { WIDTH: 0px }
    
     </style>
    
    
     

    This sets CSS styles that modify the appearance of the generated tab menu. The BasicTabControl control renders tabs even without any CSS classes, but they are extremely basic and not very user friendly.

    The example uses the local <head> element only for convenience. If you wish to use the control on a Kentico website, it is recommended to define the CSS classes in the website’s stylesheet through the CSS stylesheets application.

  2. Add the following code just after the <cms:BasicTabControl> element to display a stripe under the tabs.

    
    
    
     <hr style="width:100%; height:2px; margin-top:0px;" />
    
    
     
  3. Switch to the web form’s code behind and add the following reference:

    
    
    
     using CMS.DocumentEngine.Web.UI.Configuration;
    
    
     
  4. Add the following code to the Page_Load method:

    
    
    
     // Defines and assigns the menu's tabs
     BasicTabControl1.AddTab(new TabItem
     {
         Text = "&nbsp;Home&nbsp;",
         RedirectUrl = "http://www.kentico.com"
     });
    
     BasicTabControl1.AddTab(new TabItem
     {
         Text = "&nbsp;Features&nbsp;",
         RedirectUrl = "http://www.kentico.com/Product/All-Features"
     });
    
     BasicTabControl1.AddTab(new TabItem
     {
         Text = "&nbsp;Download&nbsp;",
         RedirectUrl = "http://www.kentico.com/Download-Demo/Trial-Version",
         Tooltip = "Some tooltip"
     });
    
     // Selects the first tab by default
     BasicTabControl1.SelectedTab = 0;
    
     BasicTabControl1.UrlTarget = "_blank";
    
    
    
     
  5. Save the changes to the web form and its code behind file.

  6. Right-click the web form in the Solution explorer and select View in Browser.

The resulting page displays a tab menu.

Configuration

You can set the following properties for the BasicTabControl:

Property name

Description

Sample value

HideControlForZeroRows

Hides the control when no data is loaded. Default value is false.

RenderedHTML

Allows you to get or set the HTML code rendered by the control.

You need to set this property before the Render event - e.g. in the OnLoad event.

RenderLinkTitle

Indicates whether the control renders TITLE tags for the tab links.

SelectedTab

Index of the selected tab.

SelectFirstItemByDefault

Indicates whether the first tab should be selected by default.

TabControlIDPrefix

Prefix that the BasicTabControl uses for all element IDs in the rendered HTML code. Allows you to avoid conflicts when using multiple tab controls on the same page.

“FirstTabs”

TabControlLayout

Specifies the layout orientation of the tab control.

“Horizontal”
“Vertical”

Tabs (Obsolete)

A 2 dimensional string array where each row represents a tab and the columns represent the following:

tabs[0, 0] = title
tabs[0, 1] = OnClick JavaScript
tabs[0, 2] = URL
tabs[0, 3] = tooltip
tabs[0, 4] = left image URL
tabs[0, 5] = center image URL
tabs[0, 6] = right image URL

Note:

  1. The image URLs in columns 4, 5 and 6 are optional.
  2. If you specify the center image URL, the image is displayed instead of the title.

tabs[0, 0] = “ Home ”;
tabs[0, 1] = “alert(‘It is very simple!’);”;
tabs[0, 2] = “http://www.kentico.com”;
tabs[0, 3] = “Some tooltip”;
tabs[0, 4] = “leftimage.gif”;
tabs[0, 5] = “centerimage.gif”;
tabs[0, 6] = “rightimage.gif”;

UrlTarget

Specifies the target frame for all URLs.

“_blank”

UseClientScript

Indicates if client script should be generated for each tab.

UsePostback

Indicates if the control causes a postback when a users clicks a tab.

ZeroRowsText

Text shown if no records are found. This text is not visible when the control is hidden by the HideControlForZeroRows property.

“No records found.”

Method

Description

Sample value

AddTab

Use the AddTab method to define the menu’s tabs. Accepts CMS.DocumentEngine.Web.UI.Configuration.TabItem objects as the parameter.

BasicTabControl1.AddTab(new TabItem
{
Text = “ Home ”,
OnClientClick = “alert(‘Alert!’);”,
RedirectUrl = “http://www.kentico.com”,
Tooltip = “Tooltip”
});

Appearance and styling

The appearance of the BasicTabControl control is determined by CSS classes. You can use the following CSS classes to modify the design of the control:

CSS class name

Applies to

TabControlTable

Table that contains the tabs (<TABLE> tag).

TabControlRow

Table rows (<TR> tags).

TabControl

Tab items (<TD> tags).

TabControlSelected

The selected tab item (<TD> tag).

TabControlLink

Tab item links - if a URL is specified (<A> tags).

TabControlLinkSelected

Selected tab item link - if a URL is specified (<A> tag).

TabControlLeft

Left side of the tab items (<TD> tags).

TabControlRight

Right side of the tab items (<TD> tags).

TabControlSelectedLeft

Left side of the selected tab item (<TD> tag).

TabControlSelectedRight

Right side of the selected tab item (<TD> tag).