DxDataGridColumn Class

A data column with a text editor.

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

public class DxDataGridColumn :
    DxDataGridColumnBase<IDataColumnModel>,
    IDataColumnItemContentRenderer

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 DxDataGridColumn column displays values that can be modified in a text editor. The DxDataGridColumn class also defines the base API for classes that define other data columns.

Bind a Column to Data

Add the <DxDataGridColumn/> tag to a Data Grid component’s markup.
Use the Field property to assign a data source field to the column.

Razor

<DxDataGrid Data="@forecasts" ...>
    <DxDataGridColumn Field="@nameof(WeatherForecast.Forecast)"></DxDataGridColumn>
</DxDataGrid>

DataGrid Column Types

Run Demo: Data Grid - Column Types

Watch Video: Data Grid - Column Customization

Column Appearance and Visibility

Use the following properties to customize column appearance and visibility:

Property	Description
Caption	Specifies the column’s caption.
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 text editor that allows users to modify the 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.