Skip to main content

ASPxClientTabControlBase.SetActiveTabIndex(index) Method

Makes a tab active within the tab control, specifying the tab’s index.

Declaration

SetActiveTabIndex(
    index: number
): void

Parameters

Name Type Description
index number

The index of the tab to select.

Remarks

End users are allowed to select tabs via mouse clicks. The tab control also provides the capability to select tabs on the client side via code. You can use the SetActiveTabIndex method to activate a tab by its index.

Note that a tab control always has the active tab, and only one tab can be active within the control at the same time. So, the SetActiveTabIndex method is in effect if it’s passed a correct tab index which lies in the range of 0 to the ASPxClientTabControlBase.GetTabCount value, decremented by one.

Example

Full examples are available at:

Web Forms:

<dx:ASPxFormLayout runat="server" ...>
    <Items>
        <dx:LayoutItem Caption="<b>Contact me through:</b>" CaptionSettings-Location="Top">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxRadioButtonList runat="server" ID="radioButtonList" ClientSideEvents-SelectedIndexChanged="OnContactMethodChanged" ...>
                    ...
                    </dx:ASPxRadioButtonList>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:TabbedLayoutGroup ClientInstanceName="tabbedGroupPageControl" ...>
            <ClientSideEvents Init="OnTabbedGroupPageControlInit" />
                <Items>
                ...
                </Items>
        </dx:TabbedLayoutGroup>
    </Items> 
</dx:ASPxFormLayout>
...
function OnContactMethodChanged(s, e) {
    var selectedIndex = s.GetSelectedIndex();
    UpdateRadioButtonListDecoration(s);
    tabbedGroupPageControl.SetActiveTabIndex(selectedIndex);
}
function OnTabbedGroupPageControlInit(s, e) {
    s.SetActiveTabIndex(radioButtonList.GetSelectedIndex());
}
...

MVC:

@Html.DevExpress().FormLayout(settings => {
    settings.Name = "typeOfContact";
    settings.Items.Add(m => m.Type, i => {
        i.NestedExtension().RadioButtonList(s => {
            s.Name = "radioButtonList";
            s.Properties.ClientSideEvents.SelectedIndexChanged = "OnContactMethodChanged";
        });
    });

    settings.Items.AddTabbedGroupItem(t => {
        t.Name = "tabbedGroup";
            t.ClientSideEvents.Init = "OnTabbedGroupPageControlInit";
    });
    ...
}).GetHtml()
...
function OnContactMethodChanged(s, e) {
    var selectedIndex = s.GetSelectedIndex();
    UpdateRadioButtonListDecoration(s);
    tabbedGroup.SetActiveTabIndex(selectedIndex);
}
function OnTabbedGroupPageControlInit(s, e) {
    s.SetActiveTabIndex(radioButtonList.GetSelectedIndex());
}
...

Result:

TabControl - SetAciveTabIndex Method

Online Demos

See Also