DxDataGridCheckBoxColumn Class

A data column that displays disabled checkboxes and is replaced with a combobox when users filter column values.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DxDataGridCheckBoxColumn :
    DxDataGridColumn

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

The DxDataGridCheckBoxColumn displays disabled checkboxes that support the checked, unchecked, and indeterminate states.

To switch the state in the edit form, users can click the checkbox or press SPACE when the checkbox is focused.

Run Demo: Data Grid - Column Types

Watch Video: Data Grid - Column Customization

Bind to Data

Use the Field property to bind the checkbox column to a field from the Data Grid’s data source.

Razor

@using System.Threading

<DxDataGrid DataAsync="@GetForecastAsync">
    @*...*@
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" Caption="Precipitation" />
</DxDataGrid>

@code {
    public class WeatherForecast {
        // ...
        public bool Precipitation { get; set; }
    }

    public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
        var rng = new Random();
        return Task.FromResult(Enumerable.Range(1, 15).Select(index => new WeatherForecast {
            // ...
            Precipitation = rng.Next(100) < 30
        }).AsEnumerable());
    }
}

The field’s values specify checkbox states. The field’s type defines whether checkboxes support the indeterminate state.

Data Type	Checked State	Unchecked State	Indeterminate State
Boolean	true	false	(not supported)
Nullable Boolean	true	false	null
String	“true”	“false”	null or any other value
Byte Int32 UInt32 Int64 Decimal Single Double	1	0	other values
Other Data Types	See Bind to Custom Data Types for more information.

Bind to Custom Data Types

You can bind the checkbox column to a custom data type (Enum, Object, etc.) Use the following properties to explicitly specify how to consider type values:

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

If a value is not equal to the specified properties, it is considered indeterminate.

The following example demonstrates how to bind the checkbox column to an Enum object:

Razor

<DxDataGrid Data="@Orders" ...>
    ...
    <DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)"
                              ValueChecked="@OrderStatus.Delivered"
                              ValueUnchecked="@OrderStatus.Processing"
                              ValueIndeterminate="@OrderStatus.InTransit"
                              Caption="Order Status">
    </DxDataGridCheckBoxColumn>
</DxDataGrid>
}

@code {
    IEnumerable<Order> Orders;

    protected override async Task OnInitializedAsync() {
        Orders = await OrderRepository.Load();
    }
}

Data Source

public class Order {
    public int OrderID { get; set; }
    // ...
    public OrderStatus OrderStatus { get; set; }
}
public enum OrderStatus {
    Processing,
    InTransit,
    Delivered
}

Column Appearance and Visibility

Use the following properties to customize column appearance and visibility:

Property	Description
Caption	Specifies the column’s caption.
CheckType	Specifies how to display column values.
DisplayTemplate	Specifies a template for column cells.
ShowInColumnChooser	Specifies if the column is displayed in the Column Chooser.
TextAlignment	Specifies the text alignment in the column.
Visible	Specifies if the column is visible in the grid.
VisibleIndex	Specifies the column’s visible index.
Width	Specifies the column’s width.

Settings For Edit Mode

When users click the New or Edit button in a command column, the grid displays the Edit Form. The form contains a checkbox that allows users to modify the checkbox column’s value. To customize this editor, use the following properties:

Property	Description
ClearButtonDisplayMode	Specifies if the Clear button is displayed in the non-empty editor.
EditFormVisibleIndex	Specifies the editor’s visible index.
EditorVisible	Specifies if the editor is visible.
EditTemplate	Specifies a template used to display the editor.

Group and Sort Data

Use the following properties to specify group and sort settings for an individual column:

Property	Description
AllowGroup	Specifies if users can group grid data by this column.
AllowSort	Specifies if users can sort data by the column’s values.
GroupIndex	Specifies the column’s index among group columns. If the property is set to -1, the grid data is not grouped by this column.
SortIndex	Specifies the column’s index among sorted columns. If the property is set to -1, the grid data is not sorted by this column.
SortOrder	Specifies the column’s sort order.

Filter Data

The filter row displays the combobox editor for the checkbox column. The editor contains items whose text corresponds to column states: True, False, and (optionally) Indeterminate.

Use the following properties to show custom texts in the filter row’s combobox editor:

• FilterTextChecked - Specifies text for the checked state.
• FilterTextUnchecked - Specifies text for the unchecked state.
• FilterTextIndeterminate - Specifies text for the indeterminate state.

The following example demonstrates how to bind the checkbox column to an Enum object and specify custom filter texts for all three states.

Razor

<DxDataGrid Data="@Orders" ShowFilterRow="true" ...>
    ...
    <DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)"
                              FilterTextChecked="Delivered"
                              FilterTextUnchecked="Processing"
                              FilterTextIndeterminate="In transit"
                              ValueChecked="@OrderStatus.Delivered"
                              ValueUnchecked="@OrderStatus.Processing"
                              ValueIndeterminate="@OrderStatus.InTransit"
                              Caption="Order Status">
    </DxDataGridCheckBoxColumn>
</DxDataGrid>
}

@code {
    IEnumerable<Order> Orders;

    protected override async Task OnInitializedAsync() {
        Orders = await OrderRepository.Load();
    }
}

Data Source

public class Order {
    public int OrderID { get; set; }
    // ...
    public OrderStatus OrderStatus { get; set; }
}
public enum OrderStatus {
    Processing,
    InTransit,
    Delivered
}

Run Demo: Data Grid - Filter Row

Switch Mode

Set the CheckType property to CheckType.Switch to display column values as toggle switches. In the edit form, users can select between the checked and unchecked states. The indeterminate state is not available in this mode.

Razor

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync" ...>
    ...
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" CheckType="CheckType.Switch">
    </DxDataGridCheckBoxColumn>
</DxDataGrid>

Implements

IHandleEvent

IAsyncDisposable

IComponent

IHandleAfterRender

Inheritance

Object

ComponentBase

DevExpress.Blazor.Base.DxAsyncDisposableComponent

DxSettingsComponent

DxDataColumnBase

DxDataColumnBase<DevExpress.Blazor.Internal.Grid.IDataColumnModel>

DxDataGridColumnBase<DevExpress.Blazor.Internal.Grid.IDataColumnModel>

DxDataGridColumn

DxDataGridCheckBoxColumn