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; }
    }
}
In this article
Not finding the help you need? Improve this article