Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 01 Sep 2022 09:40 by ADMIN
James
Created on: 28 Feb 2022 16:17
Category: Grid
Type: Bug Report
1
Grid header alignment doesn't work anymore

The current version of Kendo UI no longer allows you to align column headings as described in the demo https://demos.telerik.com/kendo-ui/grid/cell-alignment

It occurs because a nested tag (k-link) is set as display: flex;

You can see an example of it on your own demo site (link above) - Ship City header should be centered but isn't.

{
    field: "ShipCity",
    title: "Ship City",
    headerAttributes: { style: "text-align: center" },
    attributes: { style: "text-align: right" }
}

3 comments
ADMIN
Nikolay
Posted on: 01 Sep 2022 09:40

Hello James,

This behavior is applicable to all Less themes and I recommend using the following:

{ field: "Freight", headerAttributes: { style: "text-align: center;" } }
...
dataBound: function(e) {
   e.sender.element.find(".k-grid-header").find("thead th").each(function(i, el) {
         $(el).find(".k-cell-inner").css("display", "inline-flex")
    })
}

Dojo demo: https://dojo.telerik.com/UteWiHAz

The Less themes will be deprecated with the Kendo UI R1 2023 release, thus, I will not log this as a bug and I strongly recommend switching to Sass themes. Support for the Less themes will be discontinued in the very near future.

Let me know if you have any questions.

 

Regards,
Nikolay
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/.

James
Posted on: 25 Aug 2022 15:58

I tracked the bug with interest and whilst I noticed that the claim to be fixed was made, it never worked for me.

I've just investigated why.

 

The problem is still present with the Bootstrap V3 theme even in your demo. There seems to be a difference between this theme and others.

If you add the following to kendo.common-bootstrap.min.css then it will work.  I think perhaps the sass themes were upgraded and the less themes were missed?

.k-grid .k-cell-inner, .k-grid .k-cell-inner>.k-link {
   justify-content: inherit;
}
ADMIN
Nikolay
Posted on: 07 Mar 2022 12:48

Hi James,

I confirm this is a bug and you can track its progress at the following link:

A workaround at this time is applying the following style:

<style>
      th.custom>.k-cell-inner>.k-link {
        justify-content: right;
      }
<style>

Here is a Dojo demo demonstrating this: https://dojo.telerik.com/uFivaSer

Regards,
Nikolay
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/.

Create an account Log In
View
Type
Status
Category