ASPxClientTabControlBase.ActiveTabChanging Event

Fires on the client side before the active tab is changed within a tab control.

Declaration

ActiveTabChanging: ASPxClientEvent<ASPxClientTabControlTabCancelEventHandler<ASPxClientTabControlBase>>

Event Data

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

Property	Description
cancel	Gets or sets a value indicating whether the action which raised the event should be canceled. Inherited from ASPxClientProcessingModeCancelEventArgs.
processOnServer	Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.
reloadContentOnCallback	Gets or sets a value specifying whether a callback should be sent to the server to reload the content of the page being activated.
tab	Gets the tab object related to the event.

Remarks

Write an ActiveTabChanging event handler to perform specific actions on the client side each time before the selected tab changes.

You can use the event parameter’s properties to identify the new active tab (tab), specify whether to pass event handling to the server (processOnServer), and cancel the execution of the command if necessary (cancel).

Note that if the cancel property is set to true in an event handler, the execution of the current command is canceled, no further processing is performed, and the active tab is not changed. If the command execution is not canceled, further event processing depends on the value of the processOnServer property.

To handle the tab change completely on the client side, without a postback to the server, make sure the processOnServer property is set to false. Note that the processOnServer property’s default value is equal to a control’s AutoPostBack property setting. In this case, the client-side ASPxClientTabControlBase.ActiveTabChanged event is fired next and the tab change processing is not passed to the server.

Set the processOnServer property to true to make a control pass the final processing of the event to the server. This requires a round trip to the server. During a round trip, the server-side ASPxTabControlBase.ActiveTabChanging event is fired. Then, the server-side processing generates the server-side ASPxTabControlBase.ActiveTabChanged event instead of its client-side ASPxClientTabControlBase.ActiveTabChanged equivalent.

Example: Cancel a Tab Change on the Client

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>

Example: Use processOnServer to Pass Event Handling to the Server

This example shows how to make a control with the disabled AutoPostBack property generate the server-side ActiveTabChanging and ActiveTabChanged events. Enable the processOnServer property in a client-side ActiveTabChanging event handler to pass event processing to the server.

ASPX

<dx:ASPxLabel ID="ActiveTabLabel" runat="server"/>
<dx:ASPxCheckBox ID="AllowTabChange" runat="server" Text="Allow Tab Change" Checked="True" CheckState="Checked"/>
<dx:ASPxTabControl ID="TabControl" runat="server"  
    OnActiveTabChanging="TabControl_ActiveTabChanging" 
    OnActiveTabChanged="TabControl_ActiveTabChanged"
    AutoPostBack="False">
    <Tabs>
        <dx:Tab Text="Tab 1"/>
        <dx:Tab Text="Tab 2"/>
        <dx:Tab Text="Tab 3"/>
    </Tabs>
    <ClientSideEvents ActiveTabChanging="function(s, e) {
        //Pass tab change processing to the server.
        e.processOnServer = true;
    }" />
</dx:ASPxTabControl>

C#

protected void TabControl_ActiveTabChanging(object source, DevExpress.Web.TabControlCancelEventArgs e){
    //Based on the checkbox state, specify whether to cancel the tab change.
    e.Cancel = !AllowTabChange.Checked;
}

protected void TabControl_ActiveTabChanged(object source, DevExpress.Web.TabControlEventArgs e){
    //Display the name of the active tab.
    ActiveTabLabel.Text = $"Active Tab: {e.ActiveTab.Text}";
}