Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxFormLayoutTabPage Class

A component that implements a tabbed layout group.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxFormLayoutTabPage :
    FormLayoutGroupBase,
    IFormLayoutLevel

#Remarks

The Form Layout stores its tabbed layout groups in a DxFormLayoutTabPages collection. A DxFormLayoutTabPage class instance is an individual tabbed layout group that can contain layout groups and items.

Razor
<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage Caption="Personal Information">
            @* ... *@
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Work Information">
            <DxFormLayoutItem Caption="Position:" ColSpanMd="6" >
                @* ... *@
            </DxFormLayoutItem>
            @* ... *@
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Tab Example

#Customize a Caption

Use the CaptionPosition property to place the caption of a nested item above it (Vertical) or at its left border (Horizontal). You can also assign a CSS class to the caption.

Razor
<style>
    .my-style {
        font-style: italic;
        color: red;
    }
</style>

<DxFormLayout>
    <DxFormLayoutTabPages @bind-ActiveTabIndex="@ActiveTabIndex" >
        <DxFormLayoutTabPage Caption="Personal Information" CaptionCssClass="my-style">
            <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
                <DxTextBox @bind-Text="@FirstName" />
            </DxFormLayoutItem>
            @*...*@
        </DxFormLayoutTabPage>
        @*...*@
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tabbed Group CSS Class

Use the CaptionTemplate property to specify the caption’s custom content.

The following example applies a template:

razor
<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage>
            <CaptionTemplate>
                <em>Work Information</em>
            </CaptionTemplate>
            <Items>
                @* ... *@
            </Items>
        </DxFormLayoutTabPage>
        <DxFormLayoutTabPage Caption="Personal Information"></DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tab - CaptionTemplate

#Customize a Header

Use the HeaderCssClass property to apply a CSS class to the tab’s header. The header can also contain an icon. Use the HeaderIconCssClass property to specify an icon’s CSS class or the HeaderIconUrl property to specify its URL. In the following example, tabs use Open Iconic icons:

razor
<DxFormLayout>
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage HeaderIconCssClass="oi oi-envelope-closed" Caption="Work Information" />
        <DxFormLayoutTabPage HeaderIconCssClass="oi oi-book" Caption="Personal Information" />
    </DxFormLayoutTabPages>
</DxFormLayout>

Form Layout Tab with an Icon

#Disabled and Read-Only Modes

You can disable auto-generated editors within the tab page or mark them as read-only.

Razor
<DxFormLayout Data="@editFormData"
              ItemUpdating="@((pair) => OnItemUpdating(pair.Key, pair.Value))">
    <DxFormLayoutTabPages>
        <DxFormLayoutTabPage Caption="Employee Information" Enabled="false">
            <DxFormLayoutItem Field="@nameof(FormDataItem.Name)"
                              Caption="Contact Name:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)"
                              Caption="Birth Date:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)"
                              Caption="Years Worked:"
                              ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)"
                              Caption="On Vacation:"
                              ColSpanMd="6" />
        </DxFormLayoutTabPage>
    </DxFormLayoutTabPages>
</DxFormLayout>

Disabled Editors

Run Demo: Form Layout - Tabbed Groups

#Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
See Also