Removing Group Indent in Grid for Blazor

Description

This knowledge base article answers the following questions:

• Is there a way to remove the group indent and adjust the spacing without compromising the Grid behavior?
• How can I customize the grouping appearance in a Blazor Grid?
• How to hide the group indent and group header icons in a Blazor Grid?
• What is the best way to hide the expand/collapse icons of the groups headers in a Telerik Blazor Grid?

Environment

Product

Grid for Blazor

Solution

To remove the group indent in the Grid for Blazor and hide the expand/collapse icons of the groups, you will need to override the default theme styles. This solution involves applying custom CSS styles to the Grid component. Run the example below and group the Grid by some of the columns to see the removed group indentation:

<TelerikGrid Data=@GridData
             Groupable="true"
             Pageable="true"
             Height="400px"
             Class="custom-grouping">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
        <GridColumn Field=@nameof(Employee.Team) Title="Team" />
        <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

<style>
    .custom-grouping.k-grid .k-group-col {
        width: 0.1px; /* Safari ignores a zero value */
    }

    .custom-grouping.k-grid .k-grouping-row .k-icon {
        display: none;
    }
</style>

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

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
                {
                    EmployeeId = i,
                    Name = "Employee " + i.ToString(),
                    Team = "Team " + i % 3,
                    IsOnLeave = i % 2 == 0
                });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool IsOnLeave { get; set; }
    }
}

See Also

• Grid Overview
• Override Theme Styles