Provide kendo grid column header wrap around for long column title so that the column width will stayed fix

[Parthasarathi]

Hi All,

How to wrap large data in row column preventing extending column width?
Please help in this case as soon as possible. It would be appreciated.

Regards,
Partha.

[Marcin Butlak]

You can give explicit width to any column in the grid. Just use the width parameter in column definition.

[Parthasarathi]

Hi Marcin,

We have already tried in the same way. But no luck. Is there any other way?

Regards,
Partha.

[Marcin Butlak]

Ok I see the problem even if you set the width the text doesn't wrap if it is not fitting in the column. The problem lies in column header styles.

You must either override the global column header styles:

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

or apply them to every column via headerAtrributes: http://docs.kendoui.com/api/web/grid#columnsheaderattributes-object.

[John]

Through kendo tag

<kendo:grid-column headerAttributes="style=\"overflow: visible; white-space: normal;\"" title="your title" field="fieldName" />

Thanks for the info.

[David McClelland]

Yes, this was helpful to me too!  If you're using the ASP.NET MVC wrappers, you can do this:

columns.Bound(p => p.Active).Title("Active").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });