RadTabStrip
The RadTabStrip control is used to display a list of tabs in a Web Forms page and is often used in combination with a RadMultiPage control for building tabbed interfaces. The RadTabStrip control supports the following features:
- Databinding that allows the control to be populated from various datasources
- Programmatic access to the RadTabStrip object model which allows to dynamic creation of tabstrips, populate h tabs, set properties.
- Customizable appearance through built-in or user-defined skins.
Tabs
The RadTabStrip control is made up of tree of tabs represented by RadTab objects. Tabs at the top level (level 0) are called root tabs. A tab that has a parent tab is called a child tab. All root tabs are stored in the Tabs collection. Child tabs are stored in a parent tab's Tabs collection.
Each tab has a Text and a Value property. The value of the Text property is displayed in the RadTabStrip control, while the Value property is used to store any additional data about the tab, such as data passed to the postback event associated with the tab. When clicked, a tab can navigate to another Web page indicated by the NavigateUrl property.
You can find information on the Server-side API of RadTabStrip at .
Definition
Namespace:Telerik.Web.UI
Assembly:Telerik.Web.UI.dll
Syntax:
[EmbeddedSkin("TabStrip", typeof(RadTabStrip))]
[EmbeddedSkin("TabStrip", "Default", typeof(RadTabStrip))]
[RequiredCss("Telerik.Web.UI.Skins.Common.fonticons.css", RenderMode.Lightweight, typeof(RadTabStrip))]
[RequiredCss("Telerik.Web.UI.Skins.Common.MaterialRipple.css", RenderMode.Lightweight, typeof(RadButton))]
[RequiredScript(typeof(ScrollingScripts))]
[RequiredScript(typeof(jQueryPlugins))]
[RequiredScript(typeof(MaterialRipple))]
[ClientScriptResource("Telerik.Web.UI.RadTabStrip", "Telerik.Web.UI.TabStrip.RadTabStripScripts.js")]
[TelerikToolboxCategory("Navigation")]
[ToolboxBitmap(typeof(RadTabStrip), "Toolbox.Icons.TabStrip.png")]
public class RadTabStrip : HierarchicalControlItemContainer, IComponent, IDisposable, IParserAccessor, IUrlResolutionService, IDataBindingsAccessor, IControlBuilderAccessor, IControlDesignerAccessor, IExpressionsAccessor, IAttributeAccessor, IScriptControl, IControlResolver, IPostBackDataHandler, ISkinnableControl, IControl, IFeatureGroup, INamingContainer, IXmlSerializable, IControlItemContainer, IRadTabContainer, IPostBackEventHandler
Inheritance: objectControlWebControlBaseDataBoundControlDataBoundControlRadDataBoundControlControlItemContainerHierarchicalControlItemContainerRadTabStrip...
Implements:
Inherited Members
Constructors
Initializes a new instance of the RadTabStrip class.
public RadTabStrip()
Use this constructor to create and initialize a new instance of the RadTabStrip control.
Properties
Gets or sets the alignment of the tabs in the RadTabStrip control.
[Bindable(true)]
[ClientControlProperty]
[ClientPropertyName("_align")]
public TabStripAlign Align { get; set; }
One of the TabStripAlign enumeration values. The default value is Left.
Gets or sets a value that indicates whether child tabs are cleared before data binding.
[Bindable(false)]
public override bool AppendDataBoundItems { get; set; }
True if child tabs should not be cleared before databinding; otherwise false. The default value is false (child items will be cleared before databinding).
Overrides:
The AppendDataBoundTabs property allows you to add items to the RadTabStrp control before data binding occurs. After data binding, the items collection contains both the items from the data source and the previously added items.
The value of this property is stored in view state.
Gets the object that controls the Wai-Aria settings applied on the control's element.
[PersistenceMode(PersistenceMode.InnerProperty)]
public WaiAriaSettings AriaSettings { get; }
Gets or sets a value indicating whether tabs should postback when clicked.
[ClientControlProperty]
[ClientPropertyName("_autoPostBack")]
public bool AutoPostBack { get; set; }
True if tabs should postback; otherwise false. The default value is false.
RadTabStrip will postback provided one of the following conditions is met:
- The AutoPostBack property is set to
true.- The user has subscribed to the TabClick event.
Gets or sets a value indicating whether validation is performed when a tab within the RadTabStrip control is selected.
[ClientControlProperty]
[ClientPropertyName("causesValidation")]
public override bool CausesValidation { get; set; }
true if validation is performed when a tab is selected; otherwise, false. The default value is true.
Overrides:
By default, page validation is performed when a tab is selected. Page validation determines whether the input controls associated with a validation control on the page all pass the validation rules specified by the validation control. You can specify or determine whether validation is performed on both the client and the server when a tab is clicked by using the CausesValidation property. To prevent validation from being performed, set the CausesValidation property to false.
Gets or sets a value indicating whether the tabstrip should postback when the user clicks the currently selected tab.
[ClientControlProperty]
[ClientPropertyName("clickSelectedTab")]
public bool ClickSelectedTab { get; set; }
True if the tabstrip should postback when the user clicks the currently selected tab; otherwise false.
The default value is false.
Gets a list of all client-side changes (adding a tab, removing a tab, changing a tab's property) which have occurred.
[Browsable(false)]
public IList<ClientOperation<RadTab>> ClientChanges { get; }
A list of ClientOperation<T> objects which represent all client-side changes the user has performed. By default the ClientChanges property returns empty list. Client-changes are recorded if and only if the client-side methods trackChanges()/commitChanges() have been invoked.
You can use the ClientChanges property to respond to client-side modifications such as
The ClientChanges property is available in the first postback (ajax) request after the client-side modifications have taken place. After this moment the property will return empty list.
The CssClass property will now be used instead of the former Skin and will be modified in AddAttributesToRender()
protected override string CssClassFormatString { get; }
Overrides:
Gets a collection of RadTabBindingCollection objects that define the relationship between a data item and the tab it is binding to.
[PersistenceMode(PersistenceMode.InnerProperty)]
[Browsable(false)]
public RadTabBindingCollection DataBindings { get; }
Gets or sets the field from the data source which is the "child" column in the "parent-child" relationship used to databind the RadTabStrip control.
public override string DataFieldID { get; set; }
A string that specifies the field of the data source that will be the "child" column during databinding. The default is empty string.
Overrides:
RadTabStrip requires both DataFieldID and DataFieldParentID properties to be set in order to be hierarchically databound.
Gets or sets the field from the data source which is the "parent" column in the "parent-child" relationship used to databind the RadTabStrip control.
public override string DataFieldParentID { get; set; }
A string that specifies the field of the data source that will be the "parent" column during databinding. The default is empty string.
Overrides:
RadTabStrip requires both DataFieldID and DataFieldParentID properties to be set in order to be hierarchically databound.
The value of the column specified by DataFieldParentID must be null (Nothing) for root tabs. This is a requirement for databinding RadTabStrip.
Gets or sets the field of the data source that provides the URL to which tabs navigate.
public override string DataNavigateUrlField { get; set; }
A string that specifies the field of the data source that provides the URL to which tabs will navigate. The default value is empty string.
Overrides:
Use the DataNavigateUrlField property to specify the field of the data source (in most cases the name of the database column) which provides the values for the NavigateUrl property of databound tabs. The DataNavigateUrlField property is taken into account only during data binding. If the DataNavigateUrlField property is not set the NavigateUrl property of databound tabs will have its default value - empty string.
Gets or sets the field of the data source that provides the text content of the tabs.
public override string DataTextField { get; set; }
A string that specifies the field of the data source that provides the text content of the tabs. The default value is empty string.
Overrides:
Use the DataTextField property to specify the field of the data source (in most cases the name of the database column) which provides values for the Text property of databound tabs. The DataTextField property is taken into account only during data binding.
Gets or sets the formatting string used to control how text to the tabstrip control is displayed.
public override string DataTextFormatString { get; set; }
Overrides:
Use the DataTextFormatString property to provide a custom display format for text of the tabs. The data format string consists of two parts, separated by a colon, in the form { A: Bxx }. For example, the formatting string {0:F2} would display a fixed point number with two decimal places.
The entire string must be enclosed in braces to indicate that it is a format string and not a literal string. Any text outside the braces is displayed as literal text.
The value before the colon (A in the general example) specifies the parameter index in a zero-based list of parameters. This value can only be set to 0.
Gets or sets the field of the data source that provides the value of the tabs.
public override string DataValueField { get; set; }
A string that specifies the field of the data source that provides the value of the tabs. The default value is empty string.
Overrides:
Use the DataValueField property to specify the field of the data source (in most cases the name of the database column) which provides the values for the Value property of databound tabs. The DataValueField property is taken into account only during data binding. If the DataValueField property is not set the Value property of databound tabs will have its default value - empty string.
When set to true enables support for WAI-ARIA
[ClientControlProperty]
[ClientPropertyName("enableAriaSupport")]
public bool EnableAriaSupport { get; set; }
Gets or sets a value indicating whether reording with dragging should be enabled.
[ClientControlProperty]
[ClientPropertyName("_enableDragToReorder")]
public bool EnableDragToReorder { get; set; }
true reordering is enabled; otherwise false.
The default value is false.
Controls whether the subitems of the tabstrip will have different styles than the main items.
public bool EnableSubLevelStyles { get; set; }
true if styling should be different; otherwise, false. The default value is false.
Gets the innermost selected tab in a hierarchical RadTabStrip control.
[Browsable(false)]
public RadTab InnermostSelectedTab { get; }
Returns the inner most selected child tab in hierarchical tabstrip scenarios. Null (Nothing in VB.NET) if no tab is selected.
In hierarchical tabstrips this property returns the innermost selected tab.
Gets or sets the maximum number of levels to bind to the RadTabStrip control.
public override int MaxDataBindDepth { get; set; }
The maximum number of levels to bind to the RadTabStrip control. The default is -1, which binds all the levels in the data source to the control.
Overrides:
When binding the RadTabStrip control to a data source, use the MaxDataBindDepth property to limit the number of levels to bind to the control. For example, setting this property to 2 binds only the root tabs and their immediate children. All remaining records in the data source are ignored.
Gets the associated RadMultiPage control if the MultiPageID property is set.
[Browsable(false)]
public RadMultiPage MultiPage { get; }
The RadMultiPage control associated with the current RadTabStrip control. Will return null (Nothing in VB.NET) if the MultiPageID is not set or a corresponding RadMultiPage control cannot be found
Gets or sets the ID of the RadMultiPage control that will be controlled by the current RadTabStrip control.
[TypeConverter("Telerik.Web.Design.MultiPageIDTypeConverter, Telerik.Web.Design, Version=2026.3.812.462, Culture=neutral, PublicKeyToken=121fae78165ba3d4")]
public string MultiPageID { get; set; }
The ID of the associated RadMultiPage. The default value is empty string.
You should use different value depending on the following conditions:
Gets or sets a value indicating the client-side event handler that is called before the browser context menu shows (after right-clicking an item).
[ClientControlEvent]
[ClientPropertyName("contextMenu")]
public string OnClientContextMenu { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientContextMenu property to specify a JavaScript function that will be executed before the context menu shows after right clicking a tab.
Two parameters are passed to the handler
- sender (the client-side RadTabStrip object)
- eventArgs with two properties
- tab - the instance of the selected tab
- domEvent - the browser DOM event
Gets or sets a value indicating the client-side event handler that is called when the user double-clicks a tab.
[ClientControlEvent]
[ClientPropertyName("doubleClick")]
public string OnClientDoubleClick { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientDoubleClick property to specify a JavaScript function that will be executed when the user double-clicks a tab.
Two parameters are passed to the handler
- sender (the client-side RadTabStrip object)
- eventArgs with two properties
- tab - the instance of the selected tab
- domEvent - the browser DOM event
Gets or sets the name of the javascript function called when the control is fully initialized on the client side.
[ClientControlEvent]
[ClientPropertyName("load")]
public string OnClientLoad { get; set; }
A string specifying the name of the javascript function called when the control is fully initialized on the client side. The default value is empty string.
Use the OnClientLoad property to specify a JavaScript function that is executed after the control is initialized on the client side. A single parameter is passed to the handler, which is the client-side RadTabStrip object.
Gets or sets a value indicating the client-side event handler that is called when the mouse leaves a tab in the RadTabStrip control.
[ClientControlEvent]
[ClientPropertyName("mouseOut")]
public string OnClientMouseOut { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientMouseOut property to specify a JavaScript function that is executed whenever the user moves the mouse away from a particular tab in the RadTabStrip control.
Two parameters are passed to the handler:
- sender (the client-side RadTabStrip object);
- eventArgs with two properties:
- tab - the instance of the tab we are moving away from;
- domEvent - the instance of the browser event.
Gets or sets a value indicating the client-side event handler that is called when the mouse hovers a tab in the RadTabStrip control.
[ClientControlEvent]
[ClientPropertyName("mouseOver")]
public string OnClientMouseOver { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientMouseOver property to specify a JavaScript function that is called when the user hovers a tab with the mouse.
Two parameters are passed to the handler:
- sender (the client-side RadTabStrip object);
- eventArgs with two properties
- tab - the instance of the tab that is being hovered
- domEvent - the instance of the browser event.
[ClientControlEvent]
[ClientPropertyName("reordered")]
public string OnClientReordered { get; set; }
[ClientControlEvent]
[ClientPropertyName("reordering")]
public string OnClientReordering { get; set; }
[ClientControlEvent]
[ClientPropertyName("tabDragStart")]
public string OnClientTabDragStart { get; set; }
Gets or sets a value indicating the client-side event handler that is called after selecting a tab.
[ClientControlEvent]
[ClientPropertyName("tabSelected")]
public string OnClientTabSelected { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientTabSelected property to specify a JavaScript function that will be executed after a tab is selected - either by left-clicking it with a mouse or hitting enter after tabbing to that tab.
Two parameters are passed to the handler
- sender (the client-side RadTabStrip object)
- eventArgs with one property
- tab - the instance of the selected tab
Gets or sets a value indicating the client-side event handler that is called just prior to selecting a tab.
[ClientControlEvent]
[ClientPropertyName("tabSelecting")]
public string OnClientTabSelecting { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientTabSelecting property to specify a JavaScript function that will be executed prior to tab selecting - either by left-clicking it with a mouse or hitting enter after tabbing to that tab. You can cancel that event (prevent tab selecting) by seting the cancel property of the event argument to
true.Two parameters are passed to the handler
- sender (the client-side RadTabStrip object)
- eventArgs with one property
- tab - the instance of the selected tab
- cancel - whether to cancel the event
Gets or sets a value indicating the client-side event handler that is called after a tab is unselected (i.e. the user has selected another tab).
[ClientControlEvent]
[ClientPropertyName("tabUnSelected")]
public string OnClientTabUnSelected { get; set; }
A string specifying the name of the JavaScript function that will handle the event. The default value is empty string.
Use the OnClientTabUnSelected property to specify a JavaScript function that is executed after a tab is unselected.
Two parameters are passed to the handler:
- sender (the client-side RadTabStrip object);
- eventArgs with one property:
- tab - the instance of the tab which is unselected;
Gets or sets a value indicating the orientation of child tabs within the RadTabStrip control.
[ClientControlProperty]
[ClientPropertyName("_orientation")]
public TabStripOrientation Orientation { get; set; }
One of the TabStripOrientation values. The default value is HorizontalTopToBottom.
Gets or sets a value indicating whether the tabstrip should scroll directly to the next tab.
[ClientControlProperty]
[ClientPropertyName("_perTabScrolling")]
public bool PerTabScrolling { get; set; }
true if the tabstrip should scroll to the next (or previous) tab; otherwise false.
The default value is false.
Implements:
By default tabs are scrolled smoothly. If you want the tabstrip to scroll directly to the next (or previous) tab set this property to
true. This property is applicable when the ScrollChildren property is set totrue; otherwise it is ignored.
Gets or sets the URL of the page to post to from the current page when a tab from the tabstrip is clicked.
public override string PostBackUrl { get; set; }
The URL of the Web page to post to from the current page when a tab from the tabstrip control is clicked. The default value is an empty string (""), which causes the page to post back to itself.
Overrides:
Gets or sets a value indicating whether the row of the selected tab should move to the bottom.
[ClientControlProperty]
[ClientPropertyName("_reorderTabsOnSelect")]
public bool ReorderTabsOnSelect { get; set; }
true if the row containing the selected tab should be moved to the bottom; otherwise false. The default value is false.
Use the ReorderTabsOnSelect property to mimic the behavior of the Windows tabstrip control.
The position of the scroll buttons with regards to the tab band.
[ClientControlProperty]
[ClientPropertyName("_scrollButtonsPosition")]
public TabStripScrollButtonsPosition ScrollButtonsPosition { get; set; }
One of the TabStripScrollButtonsPosition
enumeration values. The default value is Right.
Implements:
This property is applicable when the ScrollChildren property is set to
true; otherwise it is ignored.
Gets or sets a value indicating whether the immediate children of the RadTabStrip control will be scrollable.
[ClientControlProperty]
[ClientPropertyName("_scrollChildren")]
public bool ScrollChildren { get; set; }
true if the child tabs will be scrollable; otherwise false. The default value is false.
Implements:
Gets or sets the position of the scrollable band of tabs relative to the beginning of the scrolling area.
[Bindable(true)]
public int ScrollPosition { get; set; }
An integer specifying the initial scrolling position (measured in pixels). The default value is 0 (no offset from the default scrolling position). Use negative values to move the tabs to the left.
Implements:
This property is applicable when the ScrollChildren property is set to
true; otherwise it is ignored.
Gets or sets the index of the selected child tab.
public int SelectedIndex { get; set; }
The zero based index of the selected tab. The default value is -1 (no child tab is selected).
Implements:
Use the SelectedIndex property to programmatically specify the selected child tab in a IRadTabContainer (RadTabStrip or RadTab). To clear the selection set the SelectedIndex property to
-1.
Gets the selected child tab.
[Browsable(false)]
public RadTab SelectedTab { get; }
Returns the child tab which is currently selected. If no tab is selected
(the SelectedIndex property is -1) the SelectedTab
property will return null (Nothing in VB.NET).
Implements:
Shows or hides the image at the base of the first level of tabs.
public bool ShowBaseLine { get; set; }
true if line is visible; otherwise, false. The default value is false.
protected override bool SupportsRenderingMode { get; }
Overrides:
Gets a RadTabCollection object that contains the root tabs of the current RadTabStrip control.
[PersistenceMode(PersistenceMode.InnerProperty)]
public RadTabCollection Tabs { get; }
A RadTabCollection that contains the root tabs of the current RadTabStrip control. By default the collection is empty (RadTabStrip has no children).
Implements:
Use the Tabs property to access the child tabs of RadTabStrip. You can also use the Tabs property to manage the root tabs. You can add, remove or modify tabs from the Tabs collection.
Gets or sets the template for displaying all tabs in the RadTabStrip control.
[TemplateContainer(typeof(RadTab))]
[PersistenceMode(PersistenceMode.InnerProperty)]
[Browsable(false)]
[Bindable(false)]
public virtual ITemplate TabTemplate { get; set; }
An object implementing the ITemplateThe default value is a null reference (Nothing in Visual Basic), which indicates that this property is not set.
To specify unique display for specific tabs use the TabTemplate property of the RadTab class.
Gets or sets a value determining whether child tabs are unselected when a parent tab is unselected.
[Bindable(false)]
[ClientControlProperty]
[ClientPropertyName("unselectChildren")]
public bool UnSelectChildren { get; set; }
true if child tabs are unselected when a parent tab is unselected. false if the tabs persist their state even when hidden. The default value is false.
Gets or sets the name of the validation group to which this validation control belongs.
[ClientControlProperty]
[ClientPropertyName("validationGroup")]
public override string ValidationGroup { get; set; }
The name of the validation group to which this validation control belongs. The default is an empty string (""), which indicates that this property is not set.
Overrides:
This property works only when CausesValidation is set to true.
Methods
protected override void AddAttributesToRender(HtmlTextWriter writer)
Overrides:
protected override ControlItemCollection CreateChildItemCollection()
Overrides:
protected override NavigationItemBindingCollection CreateDataBindings()
Overrides:
protected override void DescribeComponent(IScriptDescriptor descriptor)
Overrides:
Returns the first RadTab that matches the conditions defined by the specified predicate. The predicate should returns a boolean value.
Searches the RadTabStrip control for the first RadTab whose Text property is equal to the specified value.
public RadTab FindTabByText(string text, bool ignoreCase)
The value to search for.
ignoreCaseboolA Boolean indicating a case-sensitive or insensitive comparison (true indicates a case-insensitive comparison).
Returns:A RadTab whose Text property is equal to the specified value. If a tab is not found, null (Nothing in Visual Basic) is returned.
Searches the RadTabStrip control for the first RadTab whose NavigateUrl property is equal to the specified value.
public RadTab FindTabByUrl(string url)
The URL to search for.
Returns:A RadTab whose NavigateUrl property is equal to the specifed value. If a tab is not found, null (Nothing in Visual Basic) is returned.
Searches the RadTabStrip control for the first RadTab whose Value property is equal to the specified value.
public RadTab FindTabByValue(string value, bool ignoreCase)
The value to search for.
ignoreCaseboolA Boolean indicating a case-sensitive or insensitive comparison (true indicates a case-insensitive comparison).
Returns:A RadTab whose Value property is equal to the specifed value. If a tab is not found, null (Nothing in Visual Basic) is returned.
Populates the RadTabStrip control from external XML file.
public override void LoadContentFile(string xmlFileName)
The name of the XML file.
Overrides:
The newly added items will be appended after any existing ones.
Executed when post data is loaded from the request
protected override bool LoadPostData(string postDataKey, NameValueCollection postCollection)
Overrides:
protected virtual void OnReordered(RadTabStripReorderedEventArgs e)
protected override void RaiseItemDataBound(ControlItem item)
Overrides:
protected override void RaiseTemplateNeeded(ControlItem item)
Overrides:
protected override void RenderContents(HtmlTextWriter writer)
Overrides:
Events
Occurs on the server when a tab in the RadTabStrip control is reordered.
public event RadTabStripReorderedEventHandler Reordered
Occurs on the server when a tab in the RadTabStrip control is clicked.
public event RadTabStripEventHandler TabClick
Occurs when a tab is created.
public event RadTabStripEventHandler TabCreated
The TabCreated event is raised when an tab in the RadTabStrip control is created, both during round-trips and at the time data is bound to the control. The TabCreated event is not raised for tabs which are defined inline in the page or user control.
The TabCreated event is commonly used to initialize tab properties.
Occurs when a tab is data bound.
public event RadTabStripEventHandler TabDataBound
The TabDataBound event is raised for each tab upon databinding. You can retrieve the tab being bound using the event arguments. The DataItem associated with the tab can be retrieved using the DataItem property.
The TabDataBound event is often used in scenarios when you want to perform additional mapping of fields from the DataItem to their respective properties in the Tab class.
Occurs before template is being applied to the tab.
public event RadTabStripEventHandler TemplateNeeded
The TemplateNeeded event is raised before a template is been applied on the tab, both during round-trips (postbacks) and at the time data is bound to the control. The TemplateNeeded event is not raised for tabs which are defined inline in the page or user control.
The TemplateNeeded event is commonly used for dynamic templating.