Rotate headers 90deg (vertical headers)

4 posts, 0 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 22 Jul 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 24 Jul 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    2 posts
    Member since:
    Dec 2014

    Posted 25 Mar Link to this post

    Something like this will be better.)
    http://jsbin.com/feguquqotu/edit?html,css,js,output
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 25 Mar Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready