Donnerstag, Dezember 12, 2019

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

5 Kommentare

  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

  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
  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
  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…

  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.

Kostenlose Online-Tests

Letzte Fragen

Tun ItemView löst Blase?

Ich habe eine CompositeView für eine Tabelle. Ich habe Trigger-set in der Kind-ItemView für jede Zeile... var TableRow = Marionette.ItemView.extend({ tagName:...

Wie kann ich untersuchen, WCF was 400 bad request über GET?

Die folgenden WCF-endpoint funktioniert gut mit dem WCF test client: AssetList ListFlaggedAssets(short processCode, string platform, string endpoint = "null", string portalId = "null", int...

Bei der Verwendung von UUIDs, sollte ich auch mit AUTO_INCREMENT?

Wir bauen eine neue web-app, die eine offline-iPad - /Android-app-version auf einer Reihe von lokalen Geräten, die Einsätze mit neuen Daten. Als solche benötigen...

Actionscript-Objekt, das verschiedene Eigenschaften

Wie kann ich die Anzahl der Eigenschaften in einer generischen Actionscript-Objekt? (Wie die Array-Länge) InformationsquelleAutor Fragsworth | 2011-01-15

Wie plot mehrere Graphen und nutzen Sie die Navigations-Taste im [matplotlib]

Die neueste version von matplotlib erstellt automatisch Navigations-buttons unter den graph. Aber die Beispiele, die ich finden alles im Internet zeigen, wie erstellen Sie...