DxDataGridColumn.Field Property

Specifies a data source field assigned to the current column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
[DefaultValue("")]
public string Field { get; set; }

Property Value

Type Default Description
String

String.Empty

The field name.

Remarks

Use the Field property to bind a column to a field from the Data Grid’s data source. An error occurs if the data source does not contain the specified field or the field type is not applicable to the column type. See the Column Types demo for more information about column types and their supported values.

The Data Grid generates user-friendly column captions based on field names. It adds space characters between parts of the field names that begin with uppercase letters. For instance, the “Temperature C“ caption is displayed for the TemperatureC field. Use the column’s Caption property to specify a custom caption.

@inject WeatherForecastService ForecastService

<DxDataGrid Data="@DataSource" PageSize="5">
    <DxDataGridDateEditColumn Field="Date" DisplayFormat="D" />
    <DxDataGridColumn Field="Forecast" />
    <DxDataGridColumn Field="CloudCover" />
    <DxDataGridSpinEditColumn Field="TemperatureC"
                              Caption="@("Temp. (\x2103)")"
                              TextAlignment="@DataGridTextAlign.Left"
                              Width="150px" />
    <DxDataGridSpinEditColumn Field="TemperatureF"
                              Caption="@("Temp. (\x2109)")"
                              TextAlignment="@DataGridTextAlign.Left"
                              Width="150px" />
</DxDataGrid>

@code {
    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public bool Precipitation { get; set; }
        public string Forecast { get; set; }
        public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
        public string CloudCover { get; set; }
    }
}

Data Grid - Bind a column to a field

You can also bind a Data Grid column to a complex field (a field that belongs to a data source object’s nested object). A complex field name is constructed via the DataSourceObject.Name1.Name2 structure. To bind a column to a complex field (CompanyAddress in the example below), use the following approach:

@{ var CompanyAddress = $"{nameof(Order.CompanyInfo)}.{nameof(Company.Address)}"; }

<DxDataGrid Data="@Orders">
    <DxDataGridColumn Field="@nameof(Order.ID)"></DxDataGridColumn>
    <DxDataGridColumn Field="@CompanyAddress"></DxDataGridColumn>
</DxDataGrid>

@code {

    IEnumerable<Order> Orders;

    public class Order {
        public int ID { get; set; }
        public string ProductName { get; set; }
        public Company CompanyInfo { get; set; } = new Company();
    }

    public class Company {
        public string Name { get; set; }
        public string Address { get; set; }
    }
}

Run Demo: Data Grid - Column Types

See Also