DxGridDataColumn.CellDisplayTemplate Property

Specifies a template used to display the column’s cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridDataColumnCellDisplayTemplateContext> CellDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridDataColumnCellDisplayTemplateContext>	The template for the column’s cells.

Remarks

The CellDisplayTemplate property allows you to specify custom content and change the appearance of cells in individual columns. To define a common template for cells of all Grid columns, use the DxGrid.DataColumnCellDisplayTemplate.

The CellDisplayTemplate property accepts a GridDataColumnCellDisplayTemplateContext object as the context parameter. You can use the parameter’s members to get information about a column cell (DataColumn, Value, DisplayText, VisibleIndex). You can also access the Grid object and use its members to obtain additional information about the Grid.

Note that if you use the DataColumnCellDisplayTemplate or CellDisplayTemplate, the CustomizeCellDisplayText event does not fire.

Examples

Show Checkboxes

The code below uses the CellDisplayTemplate property to customize the appearance of the Precipitation column that contains Boolean values. The column cells display checkboxes instead of plain text.

Razor

@inject WeatherForecastService ForecastService

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date"
                          DisplayFormat="D" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" />
        <DxGridDataColumn FieldName="TemperatureC"
                          Caption="Temperature"
                          Width="120px" />
        <DxGridDataColumn FieldName="Precipitation"
                          Width="120px">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }

WeatherForecastService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
    private List<WeatherForecast> Forecast { get; set; }

    private static string[] CloudCover = new[] {
        "Sunny", "Partly cloudy", "Cloudy", "Storm"
    };

    Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
        Tuple.Create( 22 , "Hot"),
        Tuple.Create( 13 , "Warm"),
        Tuple.Create( 0 , "Cold"),
        Tuple.Create( -10 , "Freezing")
    };

    public WeatherForecastService() {
        Forecast = CreateForecast();
    }

    private List<WeatherForecast> CreateForecast() {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Enumerable.Range(1, 15).Select(index => {
            var temperatureC = rng.Next(-10, 30);
            return new WeatherForecast {
                Date = startDate.AddDays(index),               
                TemperatureC = temperatureC,
                CloudCover = CloudCover[rng.Next(0, 4)],
                Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
            };
        }).ToList();
    }

    public IEnumerable<WeatherForecast> GetForecast() {
        return Forecast.ToArray();
        // ...
    }

Startup.cs (.NET 5.0)

public class Startup {
// ...
    public void ConfigureServices(IServiceCollection services) {
    // ...
        services.AddSingleton<WeatherForecastService>();
        // ...
    }
    // ...
}

Program.cs (.NET 6.0)

// ...
builder.Services.AddSingleton<WeatherForecastService>();

Show the More Info Links

The following example displays the More Info… links in cells of a column bound to the EmployeeId field. Users can click these links to view details about data rows in a pop-up window.

Razor

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

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="BirthDate" />
        <DxGridDataColumn FieldName="HireDate" />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Details" AllowSort="false">
            <CellDisplayTemplate>
                <a class="d-block text-left" href="javascript:;" @onclick="() => ShowDetails(context)">More Info...</a>
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>
<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="@PopupHeaderText"
         HorizontalAlignment="HorizontalAlignment.Center"
         VerticalAlignment="VerticalAlignment.Center">
    @PopupContent
</DxPopup>

@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();
    }
    bool PopupVisible {
        get { return CurrentEmployee != null; }
        set { if(!value) CurrentEmployee = null; }
    }
    string PopupHeaderText {
        get { return CurrentEmployee != null ? CurrentEmployee.FirstName + " " + CurrentEmployee.LastName : ""; }
    }
    string PopupContent {
        get { return CurrentEmployee != null ? CurrentEmployee.Notes : ""; }
    }
    public void ShowDetails(GridDataColumnCellDisplayTemplateContext context) {
        CurrentEmployee = Data.Where(e => e.EmployeeId == (int)context.Value).FirstOrDefault();
    }
    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);
    }
}

Startup.cs (.NET 5.0)

using Microsoft.EntityFrameworkCore;
// ...
    public class Startup {
    // ...
        public void ConfigureServices(IServiceCollection services) {
        // ...
            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);
            });
        }
        // ...
    }

Program.cs (.NET 6.0)

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 - Column Templates

Implements

CellDisplayTemplate