Put Sorting and Filtering icons in separate, second grid table header row or second line.

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 04 Jun 2025 06:37 by ADMIN

Anna

Created on: 29 May 2025 08:09

Category: UI for Blazor

Type: Feature Request

Put Sorting and Filtering icons in separate, second grid table header row or second line.

I would like to have possibility to put sorting and filtering icons in second row or at least second line in TelerikGrid header. To follow our project design I need to have 1 header row with header titles, and second row with sorting and filtering. Or at least one table header row with sorting and filtering icons in 2 line. Is this somehow possible to achieve?

1 comment

ADMIN

Dimo

Posted on: 04 Jun 2025 06:37

Hi Anna,

I am copying some thoughts and my example from your private ticket for community visibility.

A built-in feature exactly as described is unlikely and never requested so far. Customers normally want to save vertical space, not the other way around. On the other hand, I understand that you want to avoid horizontal Grid scrolling. Thus, the adaptive Grid behavior that will show the data items as cards (no columns) may be a suitable option. In addition, as of version 9.0 you can use Grid toolbar tools for column operations and then hide the header icons with CSS.

<p>Filter Menu</p>

<TelerikGrid Data="@GridData"
             TItem="@Product"
             FilterMode="GridFilterMode.FilterMenu"
             Pageable="true"
             Sortable="true"
             Class="two-row-headers">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Group)" />
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

<p>Column Menu</p>

<TelerikGrid Data="@GridData"
             TItem="@Product"
             FilterMode="GridFilterMode.FilterMenu"
             ShowColumnMenu="true"
             Pageable="true"
             Sortable="true"
             Class="two-row-headers">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" />
        <GridColumn Field="@nameof(Product.Group)" />
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
        <GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:d}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

<style>
    .two-row-headers th.k-table-th .k-cell-inner,
    .two-row-headers th.k-table-th .k-cell-inner > .k-link {
        display: block;
    }

        .two-row-headers th.k-table-th .k-cell-inner > .k-link {
            padding-left: 8px;
        }

    .two-row-headers th.k-table-th .k-sort-icon {
        position: absolute;
        bottom: 7px;
        left: 2px;
    }

    .two-row-headers th.k-table-th .k-cell-inner:has(.k-sort-icon) > .k-grid-header-menu {
        margin-left: 28px;
    }
</style>

@code {
    private List<Product> GridData { get; set; } = new();

    protected override void OnInitialized()
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= 3; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
                Group = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 10000),
                Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
                Discontinued = i % 4 == 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Group { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.