How to show ellipsis for long cell values in kendo ui grid?

Question

I am trying to show ellipsis for long values in kendo grid. As per telerik forum, I need to set the folling in css

.k-grid td
{
overflow: hidden;
text-overflow: ellipsis;
}

I am trying to set the styles in databound event of the grid like below

var grid = $("#kendoGrid").kendoGrid({
        columns: columnConfiguration,
        dataBound: function (e) {
$("#kendoGrid td").css("overflow", "hidden");                               
$("#kendoGrid td").css("text-overflow", "ellipsis");
},......other events and functions

But this is not working.The grid is still not showing the ellipsis.

How do i have to do to show the ellipsis. Note: I can't put this in a css file.

Answer 1

Add to the CSS white-space: nowrap;

.k-grid td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

See it in action here : Fiddle