I want to show my header text vertically to save horizontal space. What is the best way to accomplish this using 2014.2?
Hello rsimm.
Thank you for contacting us!
As I understand you want to align the text within igGrid headers vertically. I have created a sample for you in order to show you this approach. As you can see from the sample I am overriding the css class .ig-iggrid-headertext with:
.ui-iggrid-headertext { display: inline-block; vertical-align: middle; white-space: normal; }
Online sample:
http://jsfiddle.net/zdravko/hbo3xbrb/2/
I hope that you will find the sample helpful.
Thank you for the response, but I am not trying to set the vertical alignment. I want to actually rotate the header text vertically (so that it takes up less space horizontally)...like a transform: 'rotate(-90deg)' would do.
let me know if I may be of further assistance.
Hello rsimm,
Keep in mind that this is custom approach, because our igGrid does not provide vertical header text alignment by design.
If you consider this as a good new functionality my suggestion is to log it at http://ideas.infragistics.com, the Product Ideas site allows you to suggest new product features, new functionalities in existing products and controls, and even request new controls and products altogether. Members of the Infragistics Community then vote for the features and suggestions they want to see added to the products, resulting in the most popular features bubbling up to the top. When planning new releases, our Product Management team will look at the most popular features and use your feedback to prioritize upcoming work.
It does not adjust the height of the header row to allow for the vertical text.
If you have the sorting feature enabled (and you have used css to adjust the height of the header row), then when you sort, it will truncate the text with an ellipsis as if the text were fitting horizontally.
Hello rsimm
Why don't you use the approach that you've suggested:
http://jsfiddle.net/zdravko/hbo3xbrb/13/show/