This is a migrated thread and some comments may be shown as answers.

Kendo Grid column header wrapping / overflow

2 Answers 1819 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jacob
Top achievements
Rank 2
Jacob asked on 12 Jun 2015, 03:31 PM

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

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Jun 2015, 11:18 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jacob
Top achievements
Rank 2
answered on 23 Jul 2015, 02:39 PM

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

Tags
Grid
Asked by
Jacob
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Jacob
Top achievements
Rank 2
Share this question
or