Skip to main content

DxDataGrid<T>.Columns Property

Specifies the data grid’s column collection.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

[Parameter]
public RenderFragment Columns { get; set; }

Property Value

Type Description
RenderFragment

A collection of columns (UI fragments) that is rendered in the data grid’s markup.

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 Data Grid supports the following column types:

Command column
The column contains buttons that allow users to update (create, edit, remove) rows and to clear values in the filter row.
CheckBox column
The column displays disabled checkboxes and is replaced with a combobox when users filter column values. Checkboxes support the checked, unchecked, and indeterminate states.
ComboBox column
The column displays values that can be modified in a combobox editor.
Date Edit column
The column displays values that can be modified in a date edit editor.
Selection column
The column contains checkboxes that allow you to select individual or all data rows.
Spin Edit column
The column displays values that can be modified in a spin editor.
Text column
The column displays values that can be modified in a text editor.

If you do not use templates in the Data Grid component, you can specify columns directly between the <DxDataGrid> and </DxDataGrid> tags.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync">
    <DxDataGridCommandColumn></DxDataGridCommandColumn>
    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)"></DxDataGridSpinEditColumn> 
    @* ... *@
</DxDataGrid>

When you define templates (for instance, EditFormTemplate or DetailRowTemplate), you should use the Columns property to add grid columns.

<DxDataGrid Data="@ProductCategories.DataSource" >
    <Columns>
        <DxDataGridCommandColumn></DxDataGridCommandColumn>
        <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)"></DxDataGridSpinEditColumn> 
        @* ... *@
    </Columns>
    <DetailRowTemplate>
        @* ... *@
    </DetailRowTemplate>
</DxDataGrid>

Run Demo: Data Grid - Column Types

See Also