[Solved] Column header text wrap

[Alex]

Hi,

Is there a way to wrap the text in a grid's column header? The text in data bound cells wraps just fine, however I can't get the same working in the table headers. Any suggestions?

Thanks,

Alex

[dizzwave]

Hi Alex,
Have you figured out the answer to this one yet? I too would love to know.

thanks,
dave

[Alex]

You can achive this using stylesheet, something like:
.wrappableHeader
{
    white-space: normal;
    height: 50px;
    overflow: hidden;
    vertical-align: top;
}

[Scott]

I had the same question, and through a few different answers in the forum I settled with this...

I pass my model in to the view to get the columns setup, but use an Ajax databinding call to actually populate the data. This gives you your columns right away, even though data hasn't loaded yet.  Important for the javascript to come.

<%= Html.Telerik().Grid<Bpa.Transmission.Administration.Models.Logging_Log>()
 .Name("LogGrid")
 .Columns(columns =>
 {
     columns.Bound(o => o.Message_Txt).Title("Message");
     columns.Bound(o => o.Short_Message_Txt).Title("Short Message");
     columns.Bound(o => o.Created_Dttm).Title("Date Created").Width(30).Format("{0:MM/dd/yyyy}");
     columns.Bound(o => o.Agent_Nm).Title("Agent").Width(60);
 })
 .DataBinding(dBinding => dBinding.Ajax().Select("_SelectClientSide", "Log", new { id = ViewData["agent"] }))
 .Pageable()
%>

Setup a javascript function to be called when the page is done loading. 

<% Html.Telerik()
   .ScriptRegistrar()
   .OnDocumentReady(() =>
        {%>
        ReformatGrid();
        <%}
); %>

Put the javascript function anywhere, doesn`t matter where

<script type="text/javascript">

      function ReformatGrid() {
          var value = $('#LogGrid th:eq(4)').html();
          value = value.replace('Date Created', 'Date <br>Created');
          $('#LogGrid th:eq(4)').html(value);
          value = $('#LogGrid th:eq(3)').html();
          value = value.replace('Short Message', 'Short <br>Message');
          $('#LogGrid th:eq(3)').html(value);
        }
</script>

 

This does depend on knowing the position of a column (zero based).  This is a problem when column order is dynamic.  Couldn't find a way to do this by name, just by ordinal position.

To make sure things stay pretty add this to the header content area of your View page, this adds to existing style values.
Note: em should be used to avoid display resolution difference issues.

<asp:content ID="Content3" contentplaceholderid="HeaderContent" runat="server">
    <style type="text/css">
    /* additional style for multi-line headers, use 3 for two line headers */
    th
    {
        height:3em;
        vertical-align:top;
    }
  </stytle>
</asp:content>

 

That's it.  Now your header wraps where you expect it to.

I hope they change this in a future build, this seems like a pretty big club to use.

[Kev]

This thread addresses the problem in a much more efficient manner.

http://www.telerik.com/community/forums/aspnet-mvc/general/how-to-wrap-column-text-of-grid-asp-net-mvc2.aspx