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

Center Grid Column Header content

Environment

Product Grid for Blazor

Description

I want to center the content of the Grid column header. How to achieve it?

Solution

In order to center the content of the Grid column headers you can use some custom CSS as per the example below.

Grid with centered column header content. The result from the snippet

Grid with centered column header content

@* Grid with centered column header content *@

<style>
    .centered-header-grid .k-cell-inner > .k-link {
        justify-content: center;
    }
</style>

<TelerikGrid Class="centered-header-grid"
             Data="@MyData" Height="400px"
             Pageable="true" Sortable="true"
             FilterMode="GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px"/>
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name"/>
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@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; }
    }
}

Notes

  • If you need to wrap the column header content as well, you can try the approach from this knowledge base article - Wrap and center the Grid Column Header text. It shows how to change the default display property of the header cells to block and then easily operate with their content to wrap and center it.

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

In this article
Not finding the help you need? Improve this article