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

Kendo UI Grid use sortable:true and ellipses in Column

1 Answer 23 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johann Meyer
Top achievements
Rank 1
Johann Meyer asked on 15 Jan 2014, 01:07 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 15 Jan 2014, 02:08 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Johann Meyer
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or