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

6 posts, 0 answers
  1. Parthasarathi
    Parthasarathi avatar
    24 posts
    Member since:
    Oct 2012

    Posted 10 Dec 2012 Link to this post

    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.

  2. Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 10 Dec 2012 Link to this post

    You can give explicit width to any column in the grid. Just use the width parameter in column definition.
  3. Kendo UI is VS 2017 Ready
  4. Parthasarathi
    Parthasarathi avatar
    24 posts
    Member since:
    Oct 2012

    Posted 12 Dec 2012 Link to this post

    Hi Marcin,

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

    Regards,
    Partha.
  5. Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 12 Dec 2012 Link to this post

    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.
  6. John
    John avatar
    1 posts
    Member since:
    May 2013

    Posted 28 May 2013 Link to this post

    Through kendo tag

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

    Thanks for the info.
  7. David McClelland
    David McClelland avatar
    9 posts
    Member since:
    Oct 2012

    Posted 25 Nov 2013 Link to this post

    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" });
Back to Top
Kendo UI is VS 2017 Ready