DxFormLayoutTabPages.TabClick Event

Fires when a user clicks the Form Layout’s tab.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<TabClickEventArgs> TabClick { get; set; }

Event Data

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

Property	Description
MouseEventArgs	The Blazor’s built-in MouseEventArgs event arguments.
TabIndex	Gets the clicked tab’s index.
TabInfo	Returns information about a tab related to the event.

Remarks

Use the TabClick event to specify a click handler for all Form Layout’s tabs. You can also use the DxFormLayoutTabPage.Click event to specify individual click handlers for tabs.

<DxFormLayout CssClass="w-100">
    <DxFormLayoutTabPages @bind-ActiveTabIndex="@ActiveTabIndex"
                          TabClick=@OnTabClick>
        <DxFormLayoutTabPage Caption="Personal Information">
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                <DxTextBox @bind-Text="@FirstName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:" ColSpanMd="6">
                <DxTextBox @bind-Text="@LastName" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                <DxDateEdit @bind-Date="@BirthDate" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:" ColSpanMd="6">
                <DxTextBox @bind-Text="@Position" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:" ColSpanMd="6">
                <DxDateEdit @bind-Date="@HireDate" />
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Notes:" ColSpanMd="6">
                <DxTextBox @bind-Text="@Notes" />
            </DxFormLayoutItem>
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

@ClickedTab

@code {
    int ActiveTabIndex { get; set; } = 1;
    string FirstName { get; set; } = "Nancy";
    string LastName { get; set; } = "Davolio";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    string Position { get; set; } = "Sales Representative";
    DateTime HireDate { get; set; } = DateTime.Now.AddYears(-20);
    string Notes { get; set; } = "Education includes a BA in psychology.";
    string ClickedTab { get; set; } = "";

    void OnTabClick(TabClickEventArgs e) {
        ClickedTab = $"The '{e.TabIndex}' tab was clicked";
    }
}