Skip to main content

DxGridDataColumn Class

A DxGrid‘s data column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxGridDataColumn :
    DxGridColumn,
    IGridDataColumn,
    IGridColumn,
    IParameterTrackerSettingsOwner

Remarks

The DxGrid supports bound and unbound data columns. Bound columns get their data from the bound data source. Unbound columns are not bound to any data source field and should be populated manually.

Watch Video: Grid - Column Types, Column Resize and Visibility

Create a Bound Column

Add a DxGridDataColumn object to the Columns collection and specify the FieldName property. This property binds the column to a data field.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="Order.OrderDate" DisplayFormat="d" Caption="Order Date" />
        <DxGridDataColumn FieldName="Order.ShipName" Caption="Ship Name" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
    </Columns>
</DxGrid>

@code {

    object GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.OrderDetails
            .Include(i => i.Order)
            .ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Run Demo: Grid - Data Binding View Example: Grid - Implement Cascading Combo Boxes

Create an Unbound Column

Add a DxGridDataColumn object to the Columns collection and and set up the following properties:

UnboundType
Indicates that the column is unbound and specifies its data type.
FieldName
Specifies a unique name that should not match field names in the Grid’s data source.

You can use the following API to fill an unbound column with data:

UnboundExpression
Specifies an expression to evaluate column values. An expression can consist of field names, constants, operators, and functions.
UnboundColumnData
Allows you to implement custom logic or obtain column values from a custom/external data source.
<DxGrid Data="forecasts" UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="Date" Caption="Date" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temperature (\x2103)")" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temperature (\x2109)")"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="32 + [TemperatureC] / 0.5556" />
        <DxGridDataColumn FieldName="Summary"
                          UnboundType="GridUnboundColumnType.String" />
    </Columns>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e) {
        if (e.FieldName == "Summary") {
            int temperature = Convert.ToInt32(e.GetRowValue("TemperatureC"));
            e.Value = GetTemperatureString(temperature);
        }
    }

    static string GetTemperatureString(int value) {
        if (value < -10)
            return "Cool";
        if (value >= -10 && value < 5)
            return "Chilly";
        if (value >= 5 && value < 15)
            return "Warm";
        return "Hot";
    }
}

DevExpress Blazor Grid - Unbound Columns

View Example: Create and Edit Unbound Columns

Limitations

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DevExpress.Blazor.Internal.GridColumnBase
DxGridColumn
DxGridDataColumn
See Also