New to Telerik UI for Blazor? Download free 30-day trial

Wrap and center the Grid Column Header text


Product Grid for Blazor


Could you please tell me how I can have the GridColumn title text wrap around and be centered?


You can use some custom CSS that aligns text in the center and enables text wrapping as per the example below:

@* You can also use the Class parameter of the grid to cascade these rules through a selector so it only affects certain grid instances and not all grids on your app *@

    .k-grid th.k-header {
        justify-content: center;

    .k-grid th.k-header .k-column-title {
        white-space: normal;
        text-align: center;

<TelerikGrid Data="@MyData"
             Groupable="true" ShowColumnMenu="true" Resizable="true" Reorderable="true"
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Width="120px" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />

@code {
    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
            Id = x,
            Name = "name " + x,
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date

    public class SampleData
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }


  • If you only need to center the header text content, you can try the approach demonstrated in this knowledge base article - Center Grid Column Header content. This will keep the preset display: flex style of the cells.

  • If you want full control over the header text contents and rendering, you can use the column header template.

In this article