ASPxClientTabControlBase.ActiveTabChanged Event

Fires on the client side after the active tab has been changed within a tab control.

Declaration

ActiveTabChanged: ASPxClientEvent<ASPxClientTabControlTabEventHandler<ASPxClientTabControlBase>>

Event Data

The ActiveTabChanged event's data class is ASPxClientTabControlTabEventArgs. The following properties provide information specific to this event:

Property	Description
tab	Gets the tab object related to the event.

Remarks

Write an ActiveTabChanged event handler to perform actions on the client side each time the selected tab is changed. You can use the event parameter’s tab property to identify the new active tab.

When a user changes the active tab, a control (ASPxTabControl or ASPxPageControl) might raise the following events:

• On the server side:
  • ASPxTabControlBase.ActiveTabChanged
  • ASPxTabControlBase.ActiveTabChanging
• On the client side:
  • ASPxClientTabControlBase.ActiveTabChanged
  • ASPxClientTabControlBase.ActiveTabChanging

The following two properties control which events to generate:

• the AutoPostBack property of a control
• the processOnServer property of the client-side ActiveTabChanging event argument

Note

The processOnServer property’s default value is equal to a control’s AutoPostBack property setting.

The value of the AutoPostBack property affects the event generation logic as follows:

• true: Only the server-side ActiveTabChanging and ActiveTabChanged events are raised. Their client-side equivalents (ActiveTabChanging and ActiveTabChanged) are not invoked.

• false: The default behavior is that the client-side ActiveTabChanging and ActiveTabChanged events are raised to handle an active tab change only on the client. Optionally, you can pass event processing to handlers of the server-side event equivalents (ActiveTabChanging and ActiveTabChanged). To do this, enable the processOnServer property in a client-side ActiveTabChanging event handler. Note that the client-side ActiveTabChanged event is not fired in this case.

Example

This example shows how to handle ActiveTabChanging and ActiveTabChanged events on the client side. Note that the AutoPostBack property is disabled to make a control raise the client-side events, instead of the server-side equivalents.

ASPX

<dx:ASPxLabel ID="ActiveTabLabel" ClientInstanceName="activeTabLabel"  runat="server"/>
<dx:ASPxCheckBox ID="AllowTabChange" ClientInstanceName="allowTabChange" runat="server" Text="Allow Tab Change" Checked="True" CheckState="Checked"/>
<dx:ASPxTabControl ID="TabControl" runat="server"
    AutoPostBack="False">
    <Tabs>
        <dx:Tab Text="Tab 1"/>
        <dx:Tab Text="Tab 2"/>
        <dx:Tab Text="Tab 3"/>
    </Tabs>
    <ClientSideEvents 
        ActiveTabChanging="function(s, e) {
            //Based on the checkbox state, specify whether to cancel the tab change.
            e.cancel = !allowTabChange.GetChecked();
        }" 

        ActiveTabChanged="function(s, e){
            //Display the name of the active tab.
            activeTabLabel.SetText('Active Tab: ' + e.tab.GetText());
        }"
    />
</dx:ASPxTabControl>