Kendo Grid sort icon missing when header text get wrap

1 Answer 11 Views
Grid Sortable
Benjamin
Top achievements
Rank 1
Iron
Veteran
Benjamin asked on 22 Jun 2022, 01:00 AM

When I try to change the header text to wrap instead of showing ellipsis when it is too long. the sort icon seems to be missing. refer to the image below. what I would like to have is for the sorting icon to be top aligned, beside the word business

 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 24 Jun 2022, 09:58 AM

Hi, Benjamin,

I've prepared a Dojo example with a wrapped text header, you can examine it here:

https://dojo.telerik.com/@gdenchev/IwonaWEh 

CSS

      .k-grid  .k-grid-header  .k-header .k-column-title {
        white-space: normal;
      }

The icon seems to be rendering normally:

You can position it at the top instead of the center by using the following rule:

      .k-grid  .k-grid-header  .k-header .k-i-sort-asc-sm {
        place-self: flex-start;
      }

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Benjamin
Top achievements
Rank 1
Iron
Veteran
commented on 27 Jun 2022, 01:37 AM

hi,

I saw from ur dojo that the k-link for ur column header is <span>. while mine is <a>, not sure if it is due to this?

Tags
Grid Sortable
Asked by
Benjamin
Top achievements
Rank 1
Iron
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or