General Information

.NET Subscription

Overview

Common Tools

Project Converter

Assembly Deployment Tool

Localization Service

Quality Assurance and Productivity

CodeRush

CodeRush Classic

TestCafe Studio

Logify

Desktop

Controls

WinForms

WPF

VCL

UWP (Windows 10)

Tools

WinForms Skin Editor

WPF Theme Designer

WPF Theme Editor (Legacy)

Coded UI Test Extension

Frameworks and Libraries

eXpressApp Framework (XAF)

eXpress Persistent Objects (XPO)

XPO Profiler

Core Libraries

Web

Mobile

UI Controls for Xamarin.Forms

Charts for iOS / Xamarin.iOS

Charts for Android / Xamarin.Android

Grid for Xamarin.Forms (Legacy)

Enterprise and Analytic Tools

Reporting

Report and Dashboard Server

Dashboard

Office File API

End-User Documentation

Interface Elements for Desktop

Interface Elements for Web

Dashboard for Desktop

Dashboard for Web

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

Declaration

public class DxDataGridCheckBoxColumn :
    DxDataGridCheckBoxColumnBase

Remarks

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.

Blazor-Data-Grid-CheckBoxColumn-Checkboxes

NOTE

Online Demo: Data Grid - Column Types

Bind to Data

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

Razor
WeatherForecast

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

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public bool Precipitates { get; set; }
    // ...
}

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

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

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

Blazor-DataGrid-CheckBoxColumn-CustomType

NOTE

Online Demo: Data Grid - Filter Row

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.

Blazor-Data-Grid-CheckBoxColumn-Standard-FilterText

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

<DxDataGrid Data="@Orders" ...>
    ...
    <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();
    }
}

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

Blazor-Data-Grid-CheckBoxColumn-Custom-FilterText

NOTE

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

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

public class WeatherForecast
{
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public bool Precipitates { get; set; }
    // ...
}

Blazor-Data-Grid-CheckBoxColumn-Switches