DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

TabControl

in namespace DotVVM.BusinessPack.Controls

Renders a collection of tabs with specific contents.

Properties

Name Type Description Notes Default Value
ActiveTabKey Object Gets or sets the key of a tab that is currently active.
attribute
inner element
static value
bindable
default
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
DataContext Object Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.
attribute
inner element
static value
bindable
default
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
TabContentTemplate ITemplate Gets or sets the template rendering contents of tabs. This property is used when tabs are loaded from the DataSource property.
attribute
inner element
static value
bindable
default
TabEnabledBinding IValueBinding Gets or sets the binding which retrieves whether a tab from DataSource is enabled and can be activated.
attribute
inner element
static value
bindable
default
TabHeaderTemplate ITemplate Gets or sets the template for headers of tabs. This property is used when tabs are loaded from the DataSource property.
attribute
inner element
static value
bindable
default
TabHeaderTextBinding IValueBinding Gets or sets the binding which retrieves the text of the header a tab from DataSource.
attribute
inner element
static value
bindable
default
TabIsActiveBinding IValueBinding Gets or sets the binding which determines whether a tab from DataSource is active or not. Only one tab can be active at the same time.
attribute
inner element
static value
bindable
default
TabKeyBinding IValueBinding Gets or sets the binding which retrieves the unique key of a tab from DataSource.
attribute
inner element
static value
bindable
default
Tabs List<TabItem> Gets or sets a collection of tabs rendered inside.
attribute
inner element
static value
bindable
default
TabVisibleBinding IValueBinding Gets or sets the binding which retrieves whether a tab from DataSource is visible.
attribute
inner element
static value
bindable
default
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description
ActiveTabChanged Command Gets or sets the command that will be triggered when the active tab is changed.

Usage & Scenarios

Renders a container with tabs that are defined in the markup, or generated from a collection in the viewmodel.

HTML Rendered by the Control

Sample 1: Basic Usage

The tabs can be defined inside the <bp:TabControl> individually. Each tab can have a different content in this case.

Alternatively, the tabs can be generated using the DataSource property bound to a collection in the viewmodel. In this case, the TabHeaderTemplate and TabContentTemplate properties are used to specify the header and content of the tabs.

If the tab header contains only a text value, you can use the HeaderText property instead of the HeaderTemplate.

<%-- Hardcoded tabs --%>
<bp:TabControl>
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem>
        <HeaderTemplate>
            <i>Tab 2</i>
        </HeaderTemplate>
        <ContentTemplate>
            <p>Tab 2 description</p>
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<%-- Templated tabs --%>
<bp:TabControl DataSource="{value: Countries}">
    <TabHeaderTemplate>
        {{value: Name}}
    </TabHeaderTemplate>
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class ViewModel
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } },
            new Country { Id = 3, Name = "United States", Cities = new List<string> { "Washington", "New York" } }
        };
    }
}
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsChecked { get; set; }
    }
}

Sample 2: Tab Key

The ActiveTabKey property specifies a key of the tab which is currently selected. The key of a tab is by default equal to its HeaderText. You can override it by setting the Key property. The data-binding works in both ways, so it is possible to switch the tabs from the viewmodel.

The ActiveTabChanged property specifies a command in the viewmodel which is triggered when the user switches the tab.

<bp:TabControl ActiveTabKey="{value: ActiveTabKey}"
               ActiveTabChanged="{command: TabChanged()}">
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
            <bp:Button Text="Go to Tab 2"
                       Click="{command: ActiveTabKey = "Other"}" />
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem Key="Other" HeaderText="Tab 2">
        <ContentTemplate>
            <p>Tab 2 description</p>
            <bp:Button Text="Go to Tab 1"
                       Click="{command: ActiveTabKey = "Tab 1"}" />
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<p>Active tab has changed {{value: ChangeCount}} times.</p>
namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample2
{
    public class ViewModel
    {
        public int ChangeCount { get; set; }

        public string ActiveTabKey { get; set; } = "Other";

        public void TabChanged()
        {
            ChangeCount++;
        }
    }
}

Sample 3: Alternative Tab Switching

If you don't want to use the ActiveTabKey property to identify the tab which is selected, there is an alternative way.

In the data-bound tabs mode, you can use the TabIsActiveBinding property. This property is bound to a bool property in the DataSource collection objects which keeps track of whether the tab is selected or not.

<bp:TabControl DataSource="{value: Countries}"
               TabIsActiveBinding="{value: IsSelected}"
               TabHeaderTextBinding="{value: Name}"
               TabKeyBinding="{value: Id}">
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>

<br />

<dot:Repeater DataSource="{value: Countries}">
    <ItemTemplate>
        {{value: Name}} Tab {{value: IsSelected ? "is" : "is not"}} selected.
        <br />
    </ItemTemplate>
</dot:Repeater>
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class ViewModel
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } }
        };
    }
}
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsSelected { get; set; }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message