Kendo Grid column header wrapping / overflow

[Jacob]

Hi,

I’m working on a product that utilizes Kendo Grids where the text displayed in the column headers are often too wide to be displayed without ellipses.

There are too many columns to use the 'auto-width' functionality (we must have a horizontal scroll bar), and we cannot rely on fixed widths to be sufficiently wide enough when the text is translated into different languages. 

In some cases, as when the titles consist of several words, a simple CSS fix like this would suffice (although it yields unevenly aligned filter icons):

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

However, given that the text in these headers is internationalized (and runs the risk of being translated into long German nouns), there should be a more robust solution for viewing these column names. Do you know of any thing we can do to alleviate this problem?

Proposed solutions include:
 - automatically line-breaking words with hyphens, instead of truncating with ellipses
 - adding tooltips that display the full name of the column on hover

[Dimo]

Hello Jacob,

Text wrapping in the Grid headers is disabled by default for implementation simplicity and better performance.

You can enable long word splitting with the word-wrap CSS property.

Kendo UI Tooltips can be added as well, if you use the content setting as a function to retrieve the header text.

http://docs.telerik.com/KENDO-UI/api/javascript/ui/tooltip#configuration-content

Regards,
Dimo
Telerik

[Jacob]

Here is a response I got on a support ticket for this topic: 

-----------

Hi Jacob,

In addition to setting explicit widths for all columns, there is one more way to achieve horizontal scrolling and that is to apply a width or a min-width style to the Grid tables. In this way you can skip setting widths to some or even all columns.

http://docs.telerik.com/kendo-ui/web/grid/appearance#column-widths

If auto-sizing Grid columns is very important, another possible option is to disable Grid scrolling (which will disable the fixed table layout that crushes width-less columns) and use a custom scrollable container outside it, just like you would do with a plain HTML table.

Yet another option is to use the autoFitColumn method after Grid initialization:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

I don't recommend using it for all columns, due to performance considerations, but you can use it for some columns that need it most.

Regards,
Dimo 
Telerik