DxGridDataColumn Class

In This Article

Declaration

Remarks

Create a Bound Column

Create an Unbound Column

A DxGrid‘s data column.

Namespace: DevExpress.Blazor

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

Read Tutorial: Columns in Blazor Grid Watch Video: Grid - Column Types, Column Resize and Visibility

#Create a Bound Column

Add a DxGridDataColumn object to the Columns collection. Specify the FieldName property to bind the column to a data field. Note that the FieldName property value must be unique for each data column.

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

using System;
using System.Collections.Generic;

#nullable disable

namespace Grid.Northwind {
    public partial class OrderDetail {
        public int OrderId { get; set; }
        public int ProductId { get; set; }
        public decimal UnitPrice { get; set; }
        public short Quantity { get; set; }
        public float Discount { get; set; }

        public virtual Order Order { get; set; }
        public virtual Product Product { get; set; }
    }
}

using Microsoft.EntityFrameworkCore;
#nullable disable

namespace Grid.Northwind {
    public partial class NorthwindContext : DbContext {

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<OrderDetail> OrderDetails { get; set; }
        // ...
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
            if(!optionsBuilder.IsConfigured) {
                optionsBuilder.UseSqlServer("Server=.\\sqlexpress;Database=Northwind;Integrated Security=true");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder) {
            modelBuilder.HasAnnotation("Relational:Collation", "SQL_Latin1_General_CP1_CI_AS");
            // ...
            modelBuilder.Entity<OrderDetail>(entity => {
                entity.HasKey(e => new { e.OrderId, e.ProductId })
                    .HasName("PK_Order_Details");
                entity.ToTable("Order Details");
                entity.HasIndex(e => e.OrderId, "OrderID");
                entity.HasIndex(e => e.OrderId, "OrdersOrder_Details");
                entity.HasIndex(e => e.ProductId, "ProductID");
                entity.HasIndex(e => e.ProductId, "ProductsOrder_Details");
                entity.Property(e => e.OrderId).HasColumnName("OrderID");
                entity.Property(e => e.ProductId).HasColumnName("ProductID");
                entity.Property(e => e.Quantity).HasDefaultValueSql("((1))");
                entity.Property(e => e.UnitPrice).HasColumnType("money");
                entity.HasOne(d => d.Order)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.OrderId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Orders");
                entity.HasOne(d => d.Product)
                    .WithMany(p => p.OrderDetails)
                    .HasForeignKey(d => d.ProductId)
                    .OnDelete(DeleteBehavior.ClientSetNull)
                    .HasConstraintName("FK_Order_Details_Products");
            });
            // ...
            OnModelCreatingPartial(modelBuilder);
        }

        partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
    }
}

using Microsoft.EntityFrameworkCore;
// ...
builder.Services.AddDbContextFactory<NorthwindContext>((sp, options) => {
    var env = sp.GetRequiredService<IWebHostEnvironment>();
    var dbPath = Path.Combine(env.ContentRootPath, "Northwind-5e44b51f.mdf");
    options.UseSqlServer("Server=(localdb)\\MSSQLLocalDB;Integrated Security=true;AttachDbFileName=" + dbPath);
});

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.

Razor

<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

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 unbound columns.

#Column Cell Editors

The Grid component generates and configures cell editors for columns based on associated data types. The component automatically displays column editors in the filter row and in data rows during edit operations.

The table below list classes that define cell editor settings and the corresponding data types:

Editor Settings	Generated for Data Types	Supported Data Types
DxCheckBoxSettings ^[1]	Boolean	All data types
DxComboBoxSettings	Enum	All data types
DxDateEditSettings	DateOnly, DateTime, DateTimeOffset	DateOnly, DateTime, DateTimeOffset
DxMaskedInputSettings	Never generated	Numeric, String, TimeSpan, TimeOnly, DateTime, DateOnly, DateTimeOffset
DxMemoSettings	Never generated	String
DxSpinEditSettings	Numeric	Numeric
DxTextBoxSettings	String	String
DxTimeEditSettings	TimeOnly	TimeOnly, TimeSpan, DateTime