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

Question

I am trying to show the ellipsis for long values ​​in a kendo grid. According to the telerik forum I need to install the file in css

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

I am trying to set styles in a grid-bound event as 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 that does not work. The grid still does not show ellipsis.

How can I do to show the ellipsis. Note. I can not put this in a css file.

Answer 1

Add to CSS white-space: nowrap;

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

See here: Fiddle

Answer 2

I am not familiar with Kendo, but a quick test (with firebug) on ​​their demo seems to show that the setup is:

text-overflow: ellipsis
white-space: nowrap

as CSS properties should do the trick.

Answer 3

css, dataBound KendoGrid

:

    dataBound:function() {
        $('td').each(function(){
            $(this).addClass('ellipsisClass')
        })
    }

CSS:

.ellipsisClass {
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 4

, , . : css (text-overflow: ellipsis) css ! Kendo Default! ! , - , :

• Scrollable()?
• - css Settings, ?

, -...