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:

• Selection-Dependent Inputs (MVC)

• Selection-Dependent Inputs (Web Forms)

Web Forms:

ASPX

<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>

JS

...
function OnContactMethodChanged(s, e) {
    var selectedIndex = s.GetSelectedIndex();
    UpdateRadioButtonListDecoration(s);
    tabbedGroupPageControl.SetActiveTabIndex(selectedIndex);
}
function OnTabbedGroupPageControlInit(s, e) {
    s.SetActiveTabIndex(radioButtonList.GetSelectedIndex());
}
...

MVC:

C#

@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()

JS

...
function OnContactMethodChanged(s, e) {
    var selectedIndex = s.GetSelectedIndex();
    UpdateRadioButtonListDecoration(s);
    tabbedGroup.SetActiveTabIndex(selectedIndex);
}
function OnTabbedGroupPageControlInit(s, e) {
    s.SetActiveTabIndex(radioButtonList.GetSelectedIndex());
}
...

Result:

Online Demos

• Selection-Dependent Inputs (MVC)

• Selection-Dependent Inputs (Web Forms)