Header Wrapping / Height

1 Answer 3587 Views
Grid
Scott Rakestraw
Top achievements
Rank 1
Scott Rakestraw asked on 06 Jan 2012, 03:07 PM
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?

1 Answer, 1 is accepted

Sort by
1
Dimo
Telerik team
answered on 06 Jan 2012, 03:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Scott Rakestraw
Top achievements
Rank 1
commented on 06 Jan 2012, 09:15 PM

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
Telerik team
commented on 09 Jan 2012, 09:19 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
DEINTEC
Top achievements
Rank 1
commented on 24 Oct 2012, 05:12 PM

Worked perfect for me
James
Top achievements
Rank 1
commented on 05 Mar 2013, 02:55 PM

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
Telerik team
commented on 05 Mar 2013, 03:40 PM

Thank you, James.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Lauren
Top achievements
Rank 1
commented on 23 Sep 2021, 06:23 PM

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 ;
}
Tags
Grid
Asked by
Scott Rakestraw
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or