Wie um zu zeigen, Ellipse für lange Zelle Werte in kendo ui grid?

Ich versuche zu zeigen, Ellipse für long-Werte in die kendo-raster.
Als pro telerik forum, ich brauche, um die nächsten Workshops in css

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

Ich versuche, legen Sie die Stile in datengebundenen-Ereignis des Rasters wie unten

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

Aber das wird nicht funktionieren.Das raster noch nicht angezeigt die Schaltfläche mit den Auslassungszeichen.

Wie kann ich tun, um zu zeigen, das Auslassungszeichen.
Hinweis: ich kann nicht setzen Sie diese in eine css-Datei.

InformationsquelleAutor subs | 2014-07-23
  1. 16

    Fügen Sie der CSS - white-space: nowrap; 

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

    Ihn in Aktion zu sehen hier : Fiddle

    • Gibt es eine Möglichkeit, ich kann ein tooltip für die Schaltfläche mit den Auslassungszeichen Inhalt?
    • Ja, eine Vorlage verwenden, in der jsfiddle.net/OnaBai/8U6rg/3
    • Ist dieser code IE 11 bestimmten? Der Stil ist nicht in IE 10.
    • Gerade getestet, meine Geige in IE10.0.9200.16921 und fein gearbeitet. Nein, es soll nicht sein, bestimmte der IE11 da das alte CSS (CSS1)
    • In einem inline-editing-raster hatte ich auch hinzufügen .k-grid table { table-layout: fixed; }
    • Unter Bezugnahme auf Ihre jsfiddle Beispiel: gibt es einen Weg, um das gleiche zu erreichen dynamisch, dh. für jede Spalte oder einfach nur, wenn ein Gitter aufgebaut ist dynamisch und Sie nicht immer wissen, den Namen der Spalte?
    • natürlich gibt es, überprüfen Sie diese: jsfiddle.net/OnaBai/8U6rg/46

    InformationsquelleAutor OnaBai
  2. 1

    Ich bin nicht vertraut mit Kendo, aber ein kurzer test (mit firebug) auf Ihrer demo scheint
    zeigen Sie, dass die Einstellung:

    text-overflow: ellipsis
white-space: nowrap

    als CSS-Eigenschaften sollten den trick tun.

    • welche demo? kannst du mir den link?
    • Ich bin Einstellung, die die gleichen Eigenschaften haben, aber versuchen, es zu tun in databiund Veranstaltung, wie ich cant es in css.
    • Die demo war am: demos.telerik.com/kendo-ui/grid/column-resizing
    • Für den tooltip, die Sie könnten versuchen, Einstellung, 'title' - Attribut auf die <td>. Die meisten browser Rendern wird es als tooltip angezeigt
    InformationsquelleAutor manuBriot
  3. 1

    Müssen Sie erstellen eine css-Klasse und binden Sie es in der datengebundenen Eigenschaft von KendoGrid

    Arbeiten Geige

    Code-Snippet:

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

    CSS-Klasse:

    .ellipsisClass {
    text-overflow: ellipsis;
    overflow: hidden;
}
    • In meinem Fall musste ich hinzufügen white-space: nowrap, damit es funktioniert. Vielen Dank für ur help aber.
    • dachte du willst es in die Funktion eher als Anwendung in der cssClass. Glücklich zu helfen, obwohl
    InformationsquelleAutor V31
  4. 1

    Ich hatte auch Probleme mit dem zeigen Auslassungszeichen im Kendo Netz und ich habe versucht, alle oben genannten Antworten, ohne Erfolg. Lösung in meinem Fall war sehr einfach: diese css-Klasse (text-overflow: ellipsis) war überschrieben mit einer anderen css-Einstellung in den code!
    Diese Klasse ist von Kendo als Standard! So Auslassungszeichen verfügbar sein sollte, out of the box!
    Also, wenn jemand läuft in die gleichen Probleme, nur überprüfen Sie folgende erste:

    1. Ist Scrollable() grid-Eigenschaft aktiviert?
    2. Gibt es eine css - Settings verhindern, dass es zu zeigen?

    Hoffen, dass diese zusätzliche Antwort jemandem helfen...

    InformationsquelleAutor dm69
  5. 0

    Akzeptierte Lösung scheint nicht für mich arbeiten. Der text wurde nicht versteckt, was in großen Zeilen.
    Ich habe versucht, die folgenden :

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

    Mit diesem text dargestellt wurde, in einer Linie und zeigte die Auslassungspunkte.

    InformationsquelleAutor tscherrer
Schreibe einen Kommentar