IGridDataColumn Interface

An interface that defines a Grid data column‘s API members (properties and methods).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

public interface IGridDataColumn :
    IGridColumn

Related API Members

The following members return IGridDataColumn objects:

• GridColumnFooterTemplateContext.DataColumn
• GridColumnGroupFooterTemplateContext.DataColumn
• GridColumnHeaderCaptionTemplateContext.DataColumn
• GridCustomizeFilterMenuEventArgs.DataColumn
• GridDataColumnCellDisplayTemplateContext.DataColumn
• GridDataColumnCellEditTemplateContext.DataColumn
• GridDataColumnFilterMenuTemplateContext.DataColumn
• GridDataColumnFilterRowCellTemplateContext.DataColumn
• GridDataColumnGroupRowTemplateContext.DataColumn

Remarks

We recommend that you use the IGridDataColumn interface when you access a Grid data column’s API members in any of the following cases:

• You use the @ref attribute to reference a Grid data column. For example, you set or change values of the Grid column’s parameters outside the markup.
• You access a DataColumn object from templates or event handlers.
• You access elements of the Grid column collection. For example, the collection that is returned by the GetDataColumns() method.

In all other cases, bind your data to column parameters.

The following code snippet defines the DataColumnCellDisplayTemplate template to customize the appearance of column cells to distinguish between odd and even rows. The template context‘s DataColumn property (which returns an IGridDataColumn object) provides access to a grid data column to which the processed cell belongs.

Razor

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<style>
    .my-style {
        color: blue;
        font-weight: bold;
    }
    .my-date-style {
        color: mediumblue;
        font-weight: bold;
    }
</style>

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <DataColumnCellDisplayTemplate>
        @{
            if (context.VisibleIndex % 2 == 1) {
                if (context.DataColumn.FieldName.Contains("Date")) {
                    <span class="my-date-style">@context.DisplayText</span>
                } else {
                    <span class="my-style">@context.DisplayText</span>
                }
            } else {
                <span>@context.DisplayText</span>
            }
        }
    </DataColumnCellDisplayTemplate>
</DxGrid>

@code {
    IEnumerable<Employee> Data { get; set; }
    NorthwindContext Northwind { get; set; }
    Employee CurrentEmployee { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Employees
            .ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Employee

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace Grid.Northwind {
    public partial class Employee {
        public int EmployeeId { get; set; }
        [Required]
        public string LastName { get; set; }
        [Required]
        public string FirstName { get; set; }
        [Required]
        public string Title { get; set; }
        public string TitleOfCourtesy { get; set; }
        public Nullable<System.DateTime> BirthDate { get; set; }
        [Required]
        [Range(typeof(DateTime), "1/1/2000", "1/1/2020",
        ErrorMessage = "HireDate must be between {1:d} and {2:d}")]
        public Nullable<System.DateTime> HireDate { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string HomePhone { get; set; }
        public string Extension { get; set; }
        public byte[] Photo { get; set; }
        public string Notes { get; set; }
        public Nullable<int> ReportsTo { get; set; }
        public string PhotoPath { get; set; }
        public virtual ICollection<Order> Orders { get; set; }
        public string Text => $"{FirstName} {LastName} ({Title})";
        public string ImageFileName => $"Employees/{EmployeeId}.jpg";
    }
}

NorthwindContext

using Microsoft.EntityFrameworkCore;
#nullable disable

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

        public NorthwindContext(DbContextOptions<NorthwindContext> options)
            : base(options) {
        }
        // ...
        public virtual DbSet<Employee> Employees { 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.Entity<Employee>(entity => {
                entity.HasIndex(e => e.EmployeeId, "EmployeeId");
                entity.HasIndex(e => e.LastName, "LastName");
                entity.HasIndex(e => e.FirstName, "FirstName");
                entity.HasIndex(e => e.Title, "Title");
                entity.HasIndex(e => e.BirthDate, "BirthDate");
                entity.HasIndex(e => e.HireDate, "HireDate");
                entity.HasIndex(e => e.Notes, "Notes");
            });
            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);
});