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
ActiveTabIndex Int32? Gets or sets a zero-based index of a tab that is currently active.
attribute
inner element
static value
bindable
default
0
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
ContentTemplate ITemplate Gets or sets template for tab contents from DataSource. This property is used when the tabs are generated from a collection bound to the DataSource property.
attribute
inner element
static value
bindable
default
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
HeaderTemplate ITemplate Gets or sets template for tab headers. This property is used when the tabs are generated from a collection bound to the DataSource property.
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
ItemIsActiveBinding IValueBinding Gets or sets a binding expression for a DataSource collection item which determines whether the tab should be active or not. Only one of the tabs should be open at the same time.
attribute
inner element
static value
bindable
default
Items List<TabItem> Gets or sets list of tab items.
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 selected 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 HeaderTemplate and ContentTemplate properties are used to specify the header and content of the tabs.

<%-- 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}">
    <HeaderTemplate>
        {{value: Name}}
    </HeaderTemplate>
    <ContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </ContentTemplate>
</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 Index

The ActiveTabIndex property specifies an index of the tab which is currently selected. 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.

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

<bp:TabControl ActiveTabIndex="{value: SelectedTabIndex}"
               ActiveTabChanged="{command: TabChanged()}">
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
            <bp:Button Text="Go to Tab 2"
                       Click="{command: SelectedTabIndex = 1}" />
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem HeaderText="Tab 2">
        <ContentTemplate>
            <p>Tab 2 description</p>
            <bp:Button Text="Go to Tab 1"
                       Click="{command: SelectedTabIndex = 0}" />
        </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 SelectedTabIndex { get; set; } = 1;
        public int ChangeCount { get; set; }

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

Sample 3: Alternative Tab Switching

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

In the data-bound tabs mode, you can use the ItemIsActiveBinding 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}"
               ItemIsActiveBinding="{value: IsSelected}">
    <HeaderTemplate>
        {{value: Name}}
    </HeaderTemplate>
    <ContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </ContentTemplate>
</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