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.

Solution 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

Solution 2

You need to create a css Class and then bind it in the dataBound property of KendoGrid

Working Fiddle

Code Snippet:

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

CSS Class:

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

Solution 3

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

text-overflow: ellipsis
white-space: nowrap

as CSS properties should do the trick.

Solution 4

I also had problems with showing ellipsis in Kendo grid and I've tried all answers above without success. Solution in my case was very simple: this css class (text-overflow: ellipsis) was overwritten with another css setting in the code! This class is set from Kendo as Default! So ellipsis should be available out of the box! So if someone runs into same Problems just check following first:

1. Is Scrollable() grid property activated?
2. Is there any css Settings that prevent showing it?

Hope this additional answer will help someone...

View more solutions

Comments

[subs]

which demo? can you give me the link?

[subs]

I am setting the same properties, but trying to do it in databiund event as I cant set it in css.

[subs]

Is there any way i can display a tooltip for the ellipsis content?

[subs]

In my case, I had to add white-space: nowrap to make it work. Thanks for ur help though.

[V31]

@syd: thought you want it in the function rather than applying it in the cssClass. Happy to help though

[manuBriot]

For the tooltip, you could try setting a 'title' attribute on the <td>. Most browser will render it as a tooltip

[subs]

Is this code IE 11 specific? The style is not working on IE 10.

[OnaBai]

Just tested my Fiddle in IE10.0.9200.16921 and worked fine. No, it should not be specific of IE11 since this is old CSS (CSS1)

[Albert Cortada]

In a inline editing grid i also had to add .k-grid table { table-layout: fixed; }

[user776686]

@OnaBai Refering to your jsfiddle example: is there a way to achieve the same dynamically, ie. for each column or simply when a grid is built dynamically and you don't always know the column name?