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

Apply different styles to the Grid group and subgroup headers


Product Grid for Blazor


By default, the group and subgroup headers are styled in the exact same way and it is hard to differentiate them. I would like to style my group headers slightly different than the subgroup headers. How to achieve this?


You can customize the default rendering of the Grid group headers through Group Header Template. It allows you to place the desired content in the specific group header.

For styling customizations such as changing the background, use custom CSS as shown in the example below.

Add a GridColumn from code

@*Different styles for the group headers and subheaders*@

Group by "Team" and then "Active Projects"

    .custom-grid .k-grouping-row td {
        padding: 0px !important;

    .custom-grid .k-grouping-row td .k-reset .k-icon {
        position: absolute;
        margin-left: 8px;
        margin-top: 8px;
        margin-bottom: 8px;

    .custom-grid .custom-group-header {
        height: 100%;
        width: 100%;
        padding-left: 31px;
        padding-top: 8px;
        padding-bottom: 8px;

<TelerikGrid Class="custom-grid" Data=@GridData Groupable="true" Pageable="true" Height="650px">
        <GridAggregate Field=@nameof(Employee.Team) Aggregate="@GridAggregateType.Count" />
        <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
        <GridColumn Field=@nameof(Employee.Team) Title="Team">
                <div class="custom-group-header" style="background:lightblue">
                    @context.Value @* the default text you would get without the template *@
                    &nbsp;<span>Team size: @context.Count</span>
        <GridColumn Field=@nameof(Employee.Salary) Title="Salary" Groupable="false" />
        <GridColumn Field=@nameof(Employee.ActiveProjects) Title="Active Projects">
                    <div class="custom-group-header" style="background:lightgreen">
                        Currently active projects: @context.Value &nbsp;

@code {
    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
            Random rnd = new Random();
            GridData.Add(new Employee()
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Team = "Team " + i % 3,
                    Salary = rnd.Next(1000, 5000),
                    ActiveProjects = i % 4 == 0 ? 2 : 5

    public class Employee
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public decimal Salary { get; set; }
        public int ActiveProjects { get; set; }
In this article