Line break in grid header titles?

[EricB]

Greetings,

  I am looking to utilize a template column in order to combine multiple items from my model into one column, however, I don't see an easy way to line break the title.  For example:

Picture this as a table (I'm not an artist, sorry. :D)

+-------------------------+
|      Start Date /         |
|       End Date           |
+-------------------------+
| Model.StartDate <br/> Model.EndDate| <-- this part works just fine, but need to also do the same in the header title.

Thanks,
Eric

[Atanas Korchev]

Hello EricB,

You can try this:

columns.Bound(c => c.CustomerID).Width(100).Title("Start Date /\n End Date").HeaderHtmlAttributes(new { style="white-space:pre;height:60px;" });

Regards,
Atanas Korchev
the Telerik team

[EricB]

That did it!  Thanks! :)

I wonder if there is an easier way?  Perhaps you can provide for this abilty more easily with the title property some how?  I know the MVCContrib grid let's me do this rather easily by simply placing a <br/> in the title and setting the encoding to false.  That seems "more correct" to me as <br/> is standard html.

Thanks for your quick reply and thanks again as this does the trick! :)

-Eric

[EricB]

I just found justification for correcting the title property to support HTML...

The column width has to be set JUST right to have the column header wrap as desired, but the problem is the data is cut off.  If I make the column wide enough so the data fits, the header wrap goes away. :(

Any chance you guys can address this?

Thanks,
Eric

[Atanas Korchev]

Hello EricB,

Currently the Title propery does not support HTML. There are two things that can be done:

1. Modify the source code to allow HTML in the header
2. Use JavaScript to inject a <br> at the required location:

$('#Grid th:eq(0)').html('Start Date /<br /> End Date')
Regards,
Atanas Korchev
the Telerik team

[EricB]

Can't you come up with an easier way to do this?  This is Beta 2... Perhaps now is a good time to add the ability to allow your users to control the formatting of the grid header value?

I have a big need for this.

Thanks,
Eric

[Atanas Korchev]

Hi EricB,

Unfortunately we cannot feature set for the release has been "frozen". Header templates would probably be implemented in a future release. Until then you can use any of the two workarounds mentioned before.

Regards,
Atanas Korchev
the Telerik team

[EricB]

The jQuery approach works perfectly!  Thank you.