Declined
Last Updated: 05 May 2023 13:47 by ADMIN
Michael
Created on: 28 Apr 2023 18:37
Category: Grid
Type: Bug Report
0
All column headers now have sortable column styles applied to them

Previously igrid 5.0.0 introduced sortable column headers and their contents being wrapped in spans with inner cell and link classes

<span class="k-cell-inner">
       <span class="k-link>......

now after upgrading to 11.2.0 it looks like ALL column headers get this additional element nesting even if they aren't sortable which is greatly affecting how column headers display since .k-link has a display: flex value.  As well as many other styles.

Before

After

There are also "link" like styles applied to any and every column even if it doesn't sort giving the false impression that a column header is clickable.

This can be seen from kendo's own stackblitz for the grid https://stackblitz.com/edit/angular-lyxxa7?file=src%2Fapp%2Fapp.component.ts where if you inspect the header elements you'll see they've been wrapped in the sortable span elements. If this is intentional to wrap all column headers in we'll just have to work around it but we're curious if applying the sortable styling to ALL column headers was done on purpose or a bug.

1 comment
ADMIN
Martin
Posted on: 05 May 2023 13:47

Hi Michael,

Thank you for the provided feedback.

Some breaking changes to the functionality and the rendering of the components require an update to the class names syntax, adding additional DOM elements to our components, and reorganizing their structure. This is indeed required because of different reasons the recent ones were accessibility compliance and style unification (for the ThemeBuilder). For example, we also introduced some changes in v5.4.1 of the themes updating all state class names syntax, by removing the state from the class:

.k-state-selected -> .k-selected

The themes repo is public and the codebase, as well as all commits, are visible. Here is the actual commit and change log:

https://github.com/telerik/kendo-themes/commit/c62c36386c6746f28038177791663ae2e4d9ac56

These changes were required in the process of style unification that we aim to achieve through other Kendo suites.

That is why implementing custom business logic and styles to the integrated CSS selectors of the Kendo UI for Angular components is considered a developer`s effort and updating to a newer version of a certain component may cause a mismatch in the applied custom CSS styles. Thus I am afraid that the custom CSS selector related to the Grid and their validity must be double-checked manually by the developer.

For this particular case, I could suggest exploring the available headerClass and headerStyle properties, which allows you to apply the required styling when needed. Alternatively, k-sorted class is added to the <th> when the column is sorted.

Regards,
Martin
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources