Back to Devexpress

DxGridDataColumn.FieldName Property

blazor-devexpress-dot-blazor-dot-dxgriddatacolumn.md

latest5.0 KB
Original Source

DxGridDataColumn.FieldName Property

Specifies the data field that supplies column values.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(null)]
[Parameter]
public string FieldName { get; set; }

Property Value

TypeDefaultDescription
Stringnull

A unique field name.

|

Remarks

Use the Data property to bind the Grid to a data collection. To display data within the Grid, declare DxGridDataColumn objects in the Columns template and use the FieldName property to assign data fields. These data fields should be implemented as properties.

Note

The FieldName property value must be unique for each data column. For an unbound data column, set the FieldName to a string other than field names in the bound data source.

To bind a column to a complex field (a field that belongs to a data collection’s nested object), use the following syntax: NestedObject.FieldName.

The Grid creates user-friendly column captions based on field names. The component adds spaces between words when a field is named according to the CamelCase naming convention. You can use the Caption property to specify a custom caption.

razor
@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" Width="120px" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}
csharp
using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}
csharp
using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),               
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}
csharp
// ...
builder.Services.AddSingleton<WeatherForecastService>();

Run Demo: Grid - Data Binding

Implements

FieldName

See Also

DxGridDataColumn Class

DxGridDataColumn Members

DevExpress.Blazor Namespace