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

Change the expand/collapse icons in a Hierarchical Grid


Product Grid for Blazor


How to change the expand/collapse icons in a Hierarchical Grid? I want to change the built-in plus/minus icons in a Hierarchical Grid.


You can change the expand/collapse icons in the Hierarchical Grid by overriding the built-in plus/minus icons with other icons using custom CSS rules. In addition, you can use the Class parameter of the Grid to add custom CSS Class and modify a specific instance of the Grid, instead of all instances on the page. The code block below demonstrates how to achieve the described approach.

@*Change the icons in the Hierarchical Grid*@

    .custom-icons .k-hierarchy-cell .k-icon.k-i-plus::before {
        content: "\e005";

    .custom-icons .k-hierarchy-cell .k-icon.k-i-minus::before {
        content: "\e006";

<TelerikGrid Class="custom-icons" Data="salesTeamMembers" @ref="Grid"
             OnStateInit="@( (GridStateEventArgs<MainModel> args) => OnStateInit(args))">
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders">
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>

@code {
    public TelerikGrid<MainModel> Grid { get; set; }

    async Task OnStateInit(GridStateEventArgs<MainModel> args)
        //expand first row
        args.GridState.ExpandedItems = new List<MainModel> { salesTeamMembers.FirstOrDefault() };

    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
        salesTeamMembers = GenerateData();

    private List<MainModel> GenerateData()
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 3).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
        return data;

    public class MainModel
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }

    public class DetailsModel
        public int OrderId { get; set; }
        public double DealSize { get; set; }

Change the built-in expand/collapse icons. The result of the code snippet above.

Hierarchical Grid with changed expand/collapse icons


To get the desired icons, you can use your dev tools to inspect the rendered icon you want and get its content. Also, you can use any custom icons that are not from the Telerik font (e.g., icons from Bootstrap, Open Iconic, and so on) by specifying the desired font name in addition to the content.

In this article