Header Wrapping / Height

[Scott Rakestraw]

I have a grid that is dynamically driven by metadata with the user choosing the columns they want to see.  I do not know ahead of time what the headers will be or how many columns the user will select.  I have the grid setup with a fixed height and every column gets a fixed width of 200.  What happens is that some columns header is bigger than the allowed space and gets cut off.  Is there any way to increase the height of the header and have the text wrap to a new line?  Any other solutions for this?

[Dimo]

Hello Scott,

You can allow Grid header wrapping by using a couple of additional CSS rules.

.k-grid  .k-grid-header  .k-header  .k-link {
    height: auto;
}

.k-grid  .k-grid-header  .k-header {
    white-space: normal;
}

All the best,
Dimo
the Telerik team

[Scott Rakestraw]

When I do this the grid loses it's defined height then.  The space is taken by the div, but the pager is not at the bottom of the space and is instead shrunken down.

[Dimo]

Hi Scott,

This problem can occur if the column titles are changed after the Grid has calculated its data area height. In this case you will need to set some pixel height to the k-link CSS class, instead of "auto". You can also leave height:auto, but define a min-height.

Greetings,
Dimo
the Telerik team

[DEINTEC]

Worked perfect for me

[James]

This is a simple and wonderful solution.  With all the issues I have had with Kendo lately, I wanted to post to say this was very useful.

[Dimo]

Thank you, James.

Regards,
Dimo
the Telerik team

[Lauren]

If you have locked columns, then you are going to need to expand the rules as follows to cover those:

.k-grid .k-grid-header        .k-header ,
.k-grid .k-grid-header-locked .k-header
{
    white-space : normal ;
}

.k-grid .k-grid-header        .k-header .k-link ,
.k-grid .k-grid-header-locked .k-header .k-link
{
    height : auto ;
}

[Mark]

Found this link:  https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-header-wrap/

In the example the text isn't shown as wrapped. Example needs to be updated so it actually works.

[Nikolay]

Hi Mark,

This forum thread targets the Kendo UI for jQuery Grid. The Kendo UI for Angular is an entirely different suite and it has a different forum dedicated.

Please submit your inquiry at the below link and the respective team will respond accordingly.

https://www.telerik.com/forums/kendo-angular-ui

Regards,

nikolay