DxCheckBoxSettings.CheckType Property

Specifies the type of the displayed checkbox editor when the Grid is in edit mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(CheckType.Checkbox)]
[Parameter]
public CheckType CheckType { get; set; }

Property Value

Type	Default	Description
CheckType	Checkbox	An enumeration value.

Available values:

Name	Description
Checkbox	A standard checkbox.
Switch	A toggle switch.

Remarks

When the CheckType property is set to Checkbox, the checkbox editor looks identical to the standard checkbox. The standard checkbox allows users to switch between checked, unchecked, and indeterminate states.

Set the CheckType property to Switch to display the checkbox editor as a toggle switch. The switch allows users to select between checked and unchecked states. The indeterminate state is unavailable in this mode.

Note

The CheckType property does not affect checkboxes displayed in data cells when the Grid is in display mode.

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 the checkbox type at runtime, use the ICheckBoxSettings.CheckType property.

Implements

CheckType