Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
65
Rotate Column Header text in iggrid
posted

Is it possible to rotate the column header text 90 degrees in the IgniteUI grid?

Parents
  • 775
    posted

    Hello Christensen,

     

        After working on this, it was determined that such header text rotation functionality is a new product idea. You can suggest it for future version at http://ideas.infragistics.com. There are many benefits to submitting it as a product idea:

    -          You can have direct communication with our product management team.

    -          Receive notifications whenever new information regarding your idea becomes available.

    -          Ability to vote for it and other ideas as well.

    There are several step to create your idea:

        1. Log into the Infragistics Product Idea site at http://ideas.infragistics.com

        2. Navigate to the procut channel of your choice - in this case Ignite UI

        3. Add your product idea and be sure to be specific and provide as much detail as possible.

        However, there is another approach which I can share with you. It’s not a preferred way of doing it, but it works in many cases, and yours just might be it. So, what you need to do is just type the following code in the “headersRendered” event in the igGrid control:

                        var count = $("#grid1").find('th').length;

     

                        for(var i = 0; i < count; i++) {

                            var width = Number.toInteger($("#grid1").find('th').eq(i).find('span').css('width').replace('px', ''));

     

                            $("#grid1").find('th').eq(i).find('span').css('display', 'block');

                            $("#grid1").find('th').eq(i).find('span').css('transform', 'rotate(90deg)');

     

                            $("#grid1").find('th').eq(i).find('span').css('width', width);

                            $("#grid1").find('th').eq(i).css('height', width);

                        }

    where “#grid1” is the selector of the DOM element, in which your grid is instantiated. Note that this may not work well when you activate some of the igGrid’s features, but if you just need it to be shown that way, it will work fine.

    If you have some questions or need some more information, please feel free to ask.

    Hope it helps,

    Martin Stoev

Reply Children