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:
Online Demos
See Also