DxCheckBoxSettings.Alignment Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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 is in edit or pop-up edit form mode, use this property to align the checkbox horizontally. The Grid aligns 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, the Grid centers the checkbox within the container.

Note

In edit row mode, the Alignment property has no effect and the checkbox editor is centered within its cell.

The example below demonstrates how to display a toggle switch at the right side of the edit form’s FormLayoutItem element:

Razor

@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();
    }
}

ProductService.cs

public class ProductService {
    public Task<Product[]> GetData() {
        List<Product> products = new List<Product>();
        products.Add(new Product() { ProductID = 1, ProductName = "Chai", UnitPrice = 19, UnitsInOrder = 20, Discontinued = true });
        products.Add(new Product() { ProductID = 2, ProductName = "Chang", UnitPrice = 19, UnitsInOrder = 40, Discontinued = true });
        products.Add(new Product() { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10, UnitsInOrder = 70, Discontinued = true });
        products.Add(new Product() { ProductID = 4, ProductName = "Mishi Kobe Niku", UnitPrice = 97, UnitsInOrder = 32, Discontinued = false });
        products.Add(new Product() { ProductID = 5, ProductName = "Ikura", UnitPrice = 31, UnitsInOrder = 10 });
        products.Add(new Product() { ProductID = 6, ProductName = "Chef Anton's Cajun Seasoning", UnitPrice = 22, UnitsInOrder = 12, Discontinued = false });
        products.Add(new Product() { ProductID = 7, ProductName = "Chef Anton's Gumbo Mix", UnitPrice = 21.35m, UnitsInOrder = 16, Discontinued = true });
        products.Add(new Product() { ProductID = 8, ProductName = "Grandma's Boysenberry Spread", UnitPrice = 25, UnitsInOrder = 20, Discontinued = true });
        products.Add(new Product() { ProductID = 9, ProductName = "Uncle Bob's Organic Dried Pears", UnitPrice = 30, UnitsInOrder = 24, Discontinued = false });
        products.Add(new Product() { ProductID = 10, ProductName = "Northwoods Cranberry Sauce", UnitPrice = 40, UnitsInOrder = 18, Discontinued = false });
        products.Add(new Product() { ProductID = 11, ProductName = "Queso Cabrales", UnitPrice = 21, UnitsInOrder = 30 });
        products.Add(new Product() { ProductID = 12, ProductName = "Queso Manchego La Pastora", UnitPrice = 38, UnitsInOrder = 10 });
        return Task.FromResult(products.ToArray());
    }
}

Product.cs

public class Product {
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInOrder { get; set; }
    public bool? Discontinued { get; set; }
}

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

Implements

Alignment