Skip to main content

DxFormLayoutGroup Class

Specifies a container for layout items and other layout groups.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DxFormLayoutGroup :
    FormLayoutGroupBase,
    IFormLayoutLevel

Remarks

Use the DxFormLayoutGroup class to organize layout items (DxFormLayoutItem) and other layout groups. You can use ColSpanXX properties to specify a group width.

See Also: Bootstrap documentation

Create a Group

The following example illustrates how to create groups of layout items in the Form Layout:

<DxFormLayout>
    <DxFormLayoutGroup Caption="Personal Information">
        <DxFormLayoutItem Caption="First Name:" ColSpanMd="6">
            ...
        </DxFormLayoutItem>
    </DxFormLayoutGroup>

    <DxFormLayoutGroup Caption="Work Information">
        <DxFormLayoutItem Caption="Position:" ColSpanMd="6">
            ...
        </DxFormLayoutItem>
    </DxFormLayoutGroup>
</DxFormLayout>

Form Layout Group Example

Use the CssClass property to customize the group’s appearance.

Specify a Caption

To specify a group caption, use the Caption property:

Group captions

Use the CaptionPosition property to place the caption above an item (Vertical) or at its left (Horizontal).

Customize a Group Header

You can specify the template for a group header. To do this, add the HeaderTemplate component to the group’s markup and wrap group items in the Items component:

<DxFormLayout>
    <DxFormLayoutGroup ColSpanMd="6">
        <HeaderTemplate>
            <div class="float-left">
                Work Information
            </div>
            <div class="float-right">
                <DxCheckBox CheckedChanged="@((bool t) => UnemployedChanged(t))" LabelPosition="LabelPosition.Left" Checked="@Unemployed">Unemployed</DxCheckBox>
            </div>
        </HeaderTemplate>
        <Items>
            <DxFormLayoutItem Caption="Position:" ColSpanMd="12">
                <DxTextBox @bind-Text="@Position" Enabled="!Unemployed" />
            </DxFormLayoutItem>
            @* ... *@
        </Items>
    </DxFormLayoutGroup>
</DxFormLayout>

@code {
  bool Unemployed { get; set; }
  string? Position { get; set; } = "Sales Representative";
  // ...
  void UnemployedChanged(bool value)
  { 
      // ...
      Position = value ? null : Position;
      Unemployed = value;
  }
}

Custom FL Group Header

You can apply CSS classes to a group header. To do this, use the HeaderCssClass.

Customize the Appearance

Use the CssClass property to apply a CSS class to a Form Layout group.

<style>
    .my-class {
        color: blue;
    }
</style>

<DxFormLayout Data="forecast">
    <DxFormLayoutGroup Caption="Weather Forecast" CssClass="my-class">
        <DxFormLayoutItem Caption="Date" Field="@nameof(WeatherForecast.Date)" ReadOnly="true" />
        <DxFormLayoutItem Caption="Temperature" Field="@nameof(WeatherForecast.TemperatureC)" Enabled="false" />
    </DxFormLayoutGroup>
</DxFormLayout>

@code {
    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
    }

    WeatherForecast forecast = new WeatherForecast()
    {
        Date = new DateTime(2020, 05, 11),
        TemperatureC = 20,
    };
}

CSS class applied

To customize only the group’s header, use the HeaderTemplate and HeaderCssClass properties.

Refer to following topic for more information: CSS Classes.

Enabled and Read-Only Modes

You can disable the group or mark it as read-only.

<DxFormLayout Data="forecast">
    <DxFormLayoutGroup Caption="Current Date" ColSpanMd="6" ReadOnly="true">
        <DxFormLayoutItem Caption="Date" Field="@nameof(WeatherForecast.Date)" ReadOnly="true" />
    </DxFormLayoutGroup>
    <DxFormLayoutGroup Caption="Weather Forecast" ColSpanMd="6" Enabled="false">
        <DxFormLayoutItem Caption="Temperature" Field="@nameof(WeatherForecast.TemperatureC)" Enabled="false" />
        <DxFormLayoutItem Caption="Precipitation" Field="@nameof(WeatherForecast.Precipitation)" />
    </DxFormLayoutGroup>
</DxFormLayout>

Enabled and ReadOnly Groups

Run Demo: Form Layout - Groups

Inheritance

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