Kendo UI Grid use sortable:true and ellipses in Column

[Johann Meyer]

Hello, we are trying to combine ellipses and sortable columns in Kendo grid. But if we set sortable:true the column does no longer get the ellipses feature. The full header is displayed without the "..." at the end.

The reason seems to be, that the sortable option adds another <a> Tag to the column Header, disabling the Display:inline style required for the ellipses.

Is there any workaround for that? Is this a bug that will be fixed in a future version of Kendo UI?

Thanks a log
Johann

[Dimiter Madjarov]

Hi Johann,


You could add the following CSS styles to overcome the issue:

.k-grid-header th a {
    overflow: hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}

.k-grid-header .k-filterable .k-link {
    padding-right: 0;
}

.k-grid-header .k-header .k-link{
    margin: 0;
    padding: 0;
}

Here is a JS Bin example, which shows them in action.

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik