This is a migrated thread and some comments may be shown as answers.

Rotate headers 90deg (vertical headers)

5 Answers 414 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 1
Pierre asked on 22 Jul 2013, 10:44 PM
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

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 24 Jul 2013, 11:04 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Andrew
Top achievements
Rank 1
answered on 25 Mar 2016, 09:21 AM
Something like this will be better.)
http://jsbin.com/feguquqotu/edit?html,css,js,output
0
Kiril Nikolov
Telerik team
answered on 25 Mar 2016, 11:44 AM
Hello,

Thanks for the suggestion, Andrew. Looks really nice!

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Coen
Top achievements
Rank 2
answered on 13 Mar 2018, 11:47 AM

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;
}
0
Stefan
Telerik team
answered on 15 Mar 2018, 07:41 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Pierre
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Andrew
Top achievements
Rank 1
Coen
Top achievements
Rank 2
Stefan
Telerik team
Share this question
or