DxGridDataColumn Class

A DxGrid‘s data column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

NuGet Package: DevExpress.Blazor

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.

Razor

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

OrderDetail

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; }
    }
}

NorthwindContext

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

Program.cs

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

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.

     Razor

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

     OrderDetail

     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; }
         }
     }
     

     NorthwindContext

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

     Program.cs

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

   • Handle the UnboundColumnData event.

     Razor

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

     OrderDetail

     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; }
         }
     }
     

     NorthwindContext

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

     Program.cs

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

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.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IGridDataColumn

IGridColumn

Inheritance

Object

ComponentBase

DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent

DxGridColumn

DxGridDataColumn