Skip to main content

DxCheckBoxSettings Class

Contains settings of an auto-generated checkbox editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxCheckBoxSettings :
    DxEditSettings,
    ICheckBoxSettings,
    IEditSettings

Remarks

The Grid component automatically generates editors for columns based on associated data types. For Boolean and Nullable Boolean types, the Grid generates a checkbox editor.

The DxCheckBoxSettings class contains checkbox editor settings. Specify properties of this class to customize checkbox appearance and behavior in the following Grid elements:

You can replace the default editor of any column with a checkbox. Refer to the following section for more information: Change a Column Editor to Checkbox.

Auto-Generated CheckBox in Edit Cells

The Grid component automatically displays column editors in data rows during edit operations. In the following code snippet, the Grid displays a checkbox editor for the Discontinued column:

Grid Editors

@inject ProductService ProductData

<DxGrid Data="@products"
        PageSize="5"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" Width="30%" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

@code {
    private Product[]? products;
    protected override async Task OnInitializedAsync() {
        products = await ProductData.GetData();
    }
}

Auto-Generated CheckBox in Edit Forms

Place a column editor in EditFormTemplate to display the editor in the edit form or pop-up edit form. To get the editor, pass the column’s field name to the GetEditor(String) method.

In the following code snippet, the Grid displays an auto-genarated checkbox editor for the Discontinued column:

Editors in Edit Form

@inject ProductService ProductData

<DxGrid Data="@products" PageSize="3">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" Width="30%" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued" />
    </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();
    }
}

The Grid allows you to customize settings of a column’s checkbox editor. To apply the settings, specify a DxCheckBoxSettings object in a column’s EditSettings property:

Modified Editors

<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>

Auto-Generated CheckBox in Filter Row

In the filter row, the Grid replaces a checkbox with another editor based on the current FilterMode. If the Grid filters column data by value, the component displays a combo box instead of the checkbox. If column data is filtered by display text, the component replaces the checkbox with a text box.

In the following code snippet, the Grid filters Discontinued column data by value:

Filter Row

<DxGrid Data="@products"
        PageSize="5"
        ShowFilterRow="true">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" Width="30%" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>

Display Text in Filter Menu and Column Cell

In display mode, the Grid shows read-only checkboxes instead of column cell values if the column’s editor is a checkbox. Set the ShowCheckBoxInDisplayMode property to false to show text strings instead of checkboxes in display mode. To customize these strings, specify the following properties:

The following code snippet displays custom strings in the Discontinued column:

Check Box Setting

<DxGrid Data="@products" PageSize="5">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued">
            <EditSettings>
                <DxCheckBoxSettings ShowCheckBoxInDisplayMode="false"
                                    CheckedDisplayText="Yes"
                                    IndeterminateDisplayText="Unknown"
                                    UncheckedDisplayText="No" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    private Product[]? products;
    protected override async Task OnInitializedAsync() {
        products = await ProductData.GetData();
    }
}

A filer menu also displays these text strings:

Alternate Check Box Text in Filter Menu

Change a Column Editor to Checkbox

The Grid automatically generates editors for columns based on their data type. For Boolean and Nullable Boolean types, the Grid generates a checkbox editor. Specify a DxCheckBoxSettings object in a column’s EditSettings property to replace the default editor with a checkbox.

A checkbox editor supports all data types. For predefined data types, the checkbox defines the values that correspond to checked, unchecked, and indeterminate[1] states as follows:

Data Type

Checked State

Unchecked State

Indeterminate State

Boolean

true

false

(not supported)

Nullable Boolean

true

false

null

String

"true"

"false"

null

Unsigned Integer Numeric Types

1

0

2

Signed Integer Numeric Types

1

0

-1

Floating-Point Numeric Types

1

0

-1

Other values correspond to the indeterminate state of the checkbox. If the indeterminate state is unavailable, such values correspond to the unchecked state.

Set the following properties to display a checkbox editor for a column associated with another data type:

ValueChecked
Specifies the value that corresponds to the checked state.
ValueUnchecked
Specifies the value that corresponds to the unchecked state.
ValueIndeterminate
Specifies the value that corresponds to the indeterminate state.

The following code snippet displays a checkbox for a column bound to an Enum object:

<DxGrid Data="@products"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued">
            <EditSettings>
                <DxCheckBoxSettings ValueChecked="@State.Yes"
                                    ValueUnchecked="@State.No"
                                    ValueIndeterminate="@State.Unknown" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

Runtime Customization

At runtime, call the GetColumnEditSettings<T>(String) method to access settings of a checkbox editor in the specified column. The following code snippet dynamically disables the editor:

<DxButton Click="@OnButtonClick" />
<DxGrid @ref=Grid
        Data="@products"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
        <DxGridDataColumn FieldName="Discontinued" />
    </Columns>
</DxGrid>
<DxButton Text="Disable the Discontinued Column" Click="Button_Click" />

@code {
    IGrid grid { get; set; }

    protected override async Task OnInitializedAsync() {
        products = await ProductData.GetData();
    }
    void Button_Click() {
        var settings = grid.GetColumnEditSettings<ICheckBoxSettings>("Discontinued");
        grid.BeginUpdate();
        settings.Enabled = false;
        grid.EndUpdate();
    }
}

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DxEditSettings
DxCheckBoxSettings
Footnotes
  1. The indeterminate state is unavailable if the CheckType property is set to Switch.

See Also