Back to Devexpress

DxGridDataColumn Class

blazor-devexpress-dot-blazor-89ffc31a.md

latest13.1 KB
Original Source

DxGridDataColumn Class

A DxGrid‘s data column.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
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

YouTube video

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.

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

UnboundTypeIndicates that the column is unbound and specifies its data type.FieldNameSpecifies 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:

UnboundExpressionSpecifies an expression to evaluate column values. An expression can consist of field names, constants, operators, and functions.UnboundColumnDataAllows 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";
    }
}

View Example: Create and Edit Unbound Columns

Limitations

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

|

Refer to the following topic for additional information: Cell Editors in Blazor Grid.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IGridDataColumn

IGridColumn

Inheritance

Object ComponentBase DevExpress.Blazor.Internal.BranchedRenderComponent DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent DevExpress.Blazor.Grid.Internal.GridColumnBase DxGridColumn DxGridDataColumn

Footnotes

  1. The Grid replaces a checkbox editor with a combo box in the filter row.

See Also

DxGridDataColumn Members

DevExpress.Blazor Namespace