Skip to main content

DxGridDataColumn Class

A DxGrid‘s data column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.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.

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.

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.

@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();
    }
}

Create an Unbound Column

  1. Add a DxGridDataColumn object to the Columns collection and specify the UnboundType and FieldName properties. The FieldName property value should be unique and not match the Grid data source’s field names.

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

    • Use the UnboundExpression property.

      @using Microsoft.EntityFrameworkCore
      @inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
      @implements IDisposable
      @* ... *@
      <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="TotalSum"
                                DisplayFormat="c"
                                UnboundType="GridUnboundColumnType.Decimal"
                                UnboundExpression="UnitPrice * Quantity * (1 - Discount)" />
          </Columns>
      </DxGrid>
      
      @code {
          object GridDataSource { get; set; }
          NorthwindContext Northwind { get; set; }
      
          protected override void OnInitialized() {
              Northwind = NorthwindContextFactory.CreateDbContext();
              GridDataSource = Northwind.OrderDetails
                  .Include(i => i.Product)
                  .ToList();
          }
          @* ... *@
          public void Dispose() {
              Northwind?.Dispose();
          }
      }
      
    • Handle the UnboundColumnData event.

      @using Microsoft.EntityFrameworkCore
      @inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
      @implements IDisposable
      
      <DxGrid Data="GridDataSource"
          UnboundColumnData="Grid_CustomUnboundColumnData">
          <Columns>
              <DxGridDataColumn FieldName="ProductId" Caption="Product ID" DisplayFormat="d" />
              <DxGridDataColumn FieldName="UnitPrice" />
              <DxGridDataColumn FieldName="Quantity" />
              <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" />
              <DxGridDataColumn FieldName="Terminated" UnboundType="GridUnboundColumnType.Boolean">
                  <CellDisplayTemplate>
                      <DxCheckBox CssClass="d-inline-block" Checked="@((bool)context.Value)" />
                  </CellDisplayTemplate>
              </DxGridDataColumn>
              <DxGridDataColumn FieldName="TotalPrice"
                            DisplayFormat="c"
                            UnboundType="GridUnboundColumnType.Decimal" />
          </Columns>
      </DxGrid>
      @* ... *@
      @code {
          object GridDataSource { get; set; }
          NorthwindContext Northwind { get; set; }
      
          protected override void OnInitialized() {
              Northwind = NorthwindContextFactory.CreateDbContext();
              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;
              }
          }
      
          public void Dispose() {
              Northwind?.Dispose();
          }
      }
      

Note

When you use a Server Mode data source, the Grid does not support unbound columns whose values are populated in the UnboundColumnData event handler. You can create unbound columns whose values are calculated based on the UnboundExpression.

When you use a GridDevExtremeDataSource, the Grid does not support any unbound columns.

Inheritance

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