Rotate headers 90deg (vertical headers)

[Pierre]

Do we have a way to turn all grid header verticaly?

I try:

$('#GroupeID' + GroupeId).find('.k-header').each(function () {
    $(this).css({
        'transform':'rotate(90deg)',
        '-moz-transform':'rotate(90deg)',
        '-o-transform':'rotate(90deg)',
        '-webkit-transform':'rotate(90deg)',
        '-ms-transform':'rotate(90deg)'
    });
});

$('#GroupeID' + GroupeId).find('.k-grid-header').css('height', '300px');

But that not give the exepected result.
thanks

[Kiril Nikolov]

Hi Pierre,

Vertical alignment of the Kendo UI Grid column headers is not a supported feature. We have played a bit with the Grid and made a demo with a possible implementation, but you need to keep in mind that this is not supported feature and it is more of a CSS workaround that only works in the latest browsers. So please evaluate the pros and cons of using this implementation.

http://jsbin.com/eqatuj/3
 
Regards,
Kiril Nikolov
Telerik

[Andrew]

Something like this will be better.)
http://jsbin.com/feguquqotu/edit?html,css,js,output

[Kiril Nikolov]

Hello,

Thanks for the suggestion, Andrew. Looks really nice!

Regards,
Kiril Nikolov
Telerik

 

 

[Coen]

Great suggestion!

I had to modify the styling a bit to get the text position to the header correctly. In my case it dropped to the bottom of the grid.

#autGrid .k-grid-header .k-header .verticalText {
    display: inline-block;
    white-space: nowrap;
    transform: translate(0,100%) rotate(-90deg);
    transform-origin: 0 0;
    position: absolute;
    top: 140px;
}

#autGrid .k-grid-header .k-header {
  height: 150px !important;
}

[Stefan]

Hello, Coen,

Thank you for the provided code it looks very good.

I applied it to the Grid using the latest version, and replaced the Title property with the headerTemplate property which is preferred in this case when specific DOM elements will be added in the header:

https://dojo.telerik.com/IpoFiTil

Regards,
Stefan
Progress Telerik