DxFormLayoutGroupBase.Decoration Property

Specifies whether to decorate DxFormLayoutGroup as a card.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
public FormLayoutGroupDecoration Decoration { get; set; }

Property Value

Type Default Description
FormLayoutGroupDecoration

FormLayoutGroupDecoration.Card

One of the FormLayoutGroupDecoration enumeration values.

Remarks

To decorate a DxFormLayoutGroup as a card, set the Decoration property to FormLayoutGroupDecoration.Card.

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" Decoration="FormLayoutGroupDecoration.Card">
        <DxFormLayoutItem Caption="First Name:">
            <Template>
                <DxTextBox @bind-Text="@FirstName"></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption="Last Name:">
            <Template>
                <DxTextBox @bind-Text="@LastName"></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption="Birthday:">
            <Template>
                <DxDateEdit @bind-Date="@Birthday"></DxDateEdit>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
<DxFormLayout>

@code {
    string firstName = "Nancy";
    string FirstName { get => firstName; set { firstName = value; OnChanged(); } }

    string lastName = "Davolio";
    string LastName { get => lastName; set { lastName = value; OnChanged(); } }

    DateTime birthday = DateTime.Now.AddYears(-20);
    DateTime Birthday { get => birthday; set { birthday = value; OnChanged(); } }

    void OnChanged() { InvokeAsync(StateHasChanged); }
}

To disable the group decoration, set the Decoration property to FormLayoutGroupDecoration.None.

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information" Decoration="FormLayoutGroupDecoration.None">
        <DxFormLayoutItem Caption="First Name:">
            <Template>
                <DxTextBox @bind-Text="@FirstName"></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption="Last Name:">
            <Template>
                <DxTextBox @bind-Text="@LastName"></DxTextBox>
            </Template>
        </DxFormLayoutItem>

        <DxFormLayoutItem Caption="Birthday:">
            <Template>
                <DxDateEdit @bind-Date="@Birthday"></DxDateEdit>
            </Template>
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
<DxFormLayout>

@code {
    string firstName = "Nancy";
    string FirstName { get => firstName; set { firstName = value; OnChanged(); } }

    string lastName = "Davolio";
    string LastName { get => lastName; set { lastName = value; OnChanged(); } }

    DateTime birthday = DateTime.Now.AddYears(-20);
    DateTime Birthday { get => birthday; set { birthday = value; OnChanged(); } }

    void OnChanged() { InvokeAsync(StateHasChanged); }
}

NOTE

Online Demo: Form Layout — Groups

See Also