Is it possible to rotate the column header text 90 degrees in the IgniteUI grid?
Hello,
Ok. In the meantime if you have any questions we'll be happy to help you.
Thanks
Martin Stoev
So far I have not been able to get it to work but I'm still working on it. I had to step away from this issue to work on another one but I should get back to it soon. I will do a update when I have something one way or the other.
Hello again Christensen,
Just checking on you. Did the proposed solution worked out for you? If you share your success, other people may benefit from this as well. And if there is anything else that you would need - feel free to ask.
Thanks,
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,