DxGridDataColumn Class

A DxGrid‘s data column.

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

public class DxGridDataColumn :
    DxGridColumn,
    IGridDataColumn,
    IGridColumn

Remarks

The DxGrid supports bound and unbound data columns. Bound columns get their data from the bound data source. You should populate unbound columns because they are not mapped to data fields in the data source.

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.

You can also specify the following properties to customize the column:

Caption - Specifies the column’s caption. If you do not specify this property, the data grid generates a caption based on the field name.
Width - Specifies the column’s width.
DisplayFormat - Specifies the pattern used to format the column’s display values.

<DxGrid Data="GridDataSource">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" 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; }

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

Create an Unbound Column

Add a DxGridDataColumn object to the Columns collection and specify the UnboundType property.

Use one of the following ways to specify data for the unbound column:

Use the UnboundExpression property.

<DxGrid Data="GridDataSource">
    <Columns>
        <DxGridDataColumn FieldName="Product.ProductName" Caption="Product Name" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c"  />
        <DxGridDataColumn FieldName="Quantity" DisplayFormat="d"  />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="TotalPrice"
                      DisplayFormat="c"
                      UnboundType="GridUnboundColumnType.Decimal"
                      UnboundExpression="UnitPrice * Quantity * (1 - Discount)" />
    </Columns>
</DxGrid>

@code {

    object GridDataSource { get; set; }

    protected override void OnInitialized()
    {
        GridDataSource = Northwind.OrderDetails
            .Include(i => i.Product)
            .ToList();
    }
    @* ... *@
}

Handle the UnboundColumnData event.

<DxGrid Data="GridDataSource"
    UnboundColumnData="Grid_CustomUnboundColumnData">
    <Columns>
        <DxGridDataColumn FieldName="ProductId" DisplayFormat="d" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="Quantity" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
        <DxGridDataColumn FieldName="Discontinued" UnboundType="GridUnboundColumnType.Boolean">
            <CellDisplayTemplate>
                <DxCheckBox Checked="@((bool)context.Value)" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="TotalPrice"
                      DisplayFormat="c"
                      UnboundType="GridUnboundColumnType.Decimal" />
    </Columns>
</DxGrid>
@* ... *@
@code {

    object GridDataSource { get; set; }

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

    void Grid_CustomUnboundColumnData(GridUnboundColumnDataEventArgs e)
    {
        if(e.FieldName == "TotalPrice")
        {
            var unitPrice = Convert.ToDecimal(e.GetRowValue("UnitPrice"));
            var quantity = Convert.ToDecimal(e.GetRowValue("Quantity"));
            var discount = Convert.ToDecimal(e.GetRowValue("Discount"));

            e.Value = quantity * unitPrice * (1 - discount);
        }

        if(e.FieldName == "Discontinued")
        {
            e.Value = Convert.ToDecimal(e.GetRowValue("Discount")) == 0;
        }
    }
}

Note

The Grid does not support unbound columns when you use a GridDevExtremeDataSource.