DxGrid.ColumnHeaderCaptionTemplate Property
Specifies a common template used to display captions of all column headers in the Grid.
Namespace: DevExpress.Blazor
Assembly:
DevExpress.Blazor.v21.1.dll
NuGet Package:
DevExpress.Blazor
Declaration
[Parameter]
public RenderFragment<GridColumnHeaderCaptionTemplateContext> ColumnHeaderCaptionTemplate { get; set; }
Property Value
The ColumnHeaderCaptionTemplate
allows you to customize captions of all column headers in the Grid. To define a template for individual column headers, use the DxGridColumn.HeaderCaptionTemplate.
The ColumnHeaderCaptionTemplate
accepts a GridColumnHeaderCaptionTemplateContext object as the context
parameter. You can use the parameter’s members to get the Column and current Caption. You can also access the Grid object and use its members to obtain additional information about the Grid.
The following example shows the tooltip when a user hovers the mouse pointer over any column caption:
@using Grid.Northwind
@inject NorthwindContext Northwind
<DxGrid Data="@Data">
<Columns>
<DxGridDataColumn FieldName="FirstName" />
<DxGridDataColumn FieldName="LastName" />
<DxGridDataColumn FieldName="Title" />
<DxGridDataColumn FieldName="BirthDate" />
<DxGridDataColumn FieldName="HireDate" />
</Columns>
<ColumnHeaderCaptionTemplate>
<span title="Click the header to sort data by this column. Drag and drop the header to change the column's position">
@context.Caption</span>
</ColumnHeaderCaptionTemplate>
</DxGrid>
@code {
IEnumerable<Employee> Data { get; set; }
Employee CurrentEmployee { get; set; }
protected override void OnInitialized() {
Data = Northwind.Employees
.ToList();
}
}
using System;
using System.Collections.Generic;
namespace Grid.Northwind {
public partial class Employee {
public Employee() {
this.Orders = new List<Order>();
}
public int EmployeeId { get; set; }
public string LastName { get; set; }
public string FirstName { get; set; }
public string Title { get; set; }
public string TitleOfCourtesy { get; set; }
public Nullable<System.DateTime> BirthDate { get; set; }
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";
}
}
using Microsoft.EntityFrameworkCore;
#nullable disable
namespace Grid.Northwind {
public partial class NorthwindContext : DbContext {
public NorthwindContext() {
}
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);
}
// ...
}
}
public class Startup {
// ...
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddEntityFrameworkSqlServer();
services.AddDbContext<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
See Also