Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.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

    DxCheckBoxSettings.Alignment Property

    Specifies the alignment of the checkbox editor in the inline or pop-up edit form.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    #Declaration

    C#
    [DefaultValue(CheckBoxContentAlignment.Default)]
    [Parameter]
    public CheckBoxContentAlignment Alignment { get; set; }

    #Property Value

    Type Default Description
    CheckBoxContentAlignment Default

    An enumeration value.

    Available values:

    Name Description
    Default

    The component’s content is aligned according to outer styles a user applies.

    Left

    The component’s content is aligned to the left of the component’s root element.

    Right

    The component’s content is aligned to the right of the component’s root element.

    Center

    The component’s content is aligned to the center of the component’s root element.

    SpaceBetween

    The component’s content uses the justify-content: space-between alignment.

    SpaceAround

    The component’s content uses justify-content: space-around alignment.

    #Remarks

    When the Grid or TreeList is in EditForm or PopupEditForm edit mode, use this property to align the checkbox horizontally. Grid and TreeList components align the checkbox editor to the left border of the container if the editor’s Alignment property is set to SpaceBetween. If the property is set to SpaceAround, components center the checkbox within the container.

    Note

    In EditRow and EditCell edit modes, the Alignment property has no effect and the checkbox editor is centered within its cell.

    The following code snippet displays a toggle switch at the right side of the edit form’s FormLayoutItem element:

    Checkbox Settings

    @inject ProductService ProductData
    
    <DxGrid Data="@products" PageSize="3">
        <Columns>
            <DxGridCommandColumn />
            <DxGridDataColumn FieldName="ProductName" Width="30%" />
            <DxGridDataColumn FieldName="UnitPrice" />
            <DxGridDataColumn FieldName="UnitsInOrder" />
            <DxGridDataColumn FieldName="Discontinued">
                <EditSettings>
                    <DxCheckBoxSettings CheckType="CheckType.Switch" Alignment="CheckBoxContentAlignment.Right"/>
                </EditSettings>
            </DxGridDataColumn>
        </Columns>
        <EditFormTemplate Context="editFormContext">
            <DxFormLayout>
                <DxFormLayoutItem Caption="Product Name:">
                    @editFormContext.GetEditor("ProductName")
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Unit Price:">
                    @editFormContext.GetEditor("UnitPrice")
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Units In Order:">
                    @editFormContext.GetEditor("UnitsInOrder")
                </DxFormLayoutItem>
                <DxFormLayoutItem Caption="Discontinued:">
                    @editFormContext.GetEditor("Discontinued")
                </DxFormLayoutItem>
            </DxFormLayout>
        </EditFormTemplate>
    </DxGrid>
    
    @code {
        private Product[]? products;
        protected override async Task OnInitializedAsync() {
            products = await ProductData.GetData();
        }
    }
    

    To change checkbox alignment at runtime, use the ICheckBoxSettings.Alignment property.

    #Implements

    See Also