Hinzufügen Hovertext auf KendoUI Grid Spaltenüberschriften

Ich versuche, um eigene hovertext (wie ein tooltip), um die Spaltenüberschriften in einer KendoUI grid. Der text sollte spezifisch für jede Spalte und idealerweise nicht angezeigt, was aber die header-Zeile. Gibt es nicht eine tooltip-option für das Grid-Objekt, aber ich bin mir nicht sicher, ob es möglicherweise einen Weg, es zu tun entweder mit CSS oder Ihre Zeile Vorlage Konfiguration.

Wäre daran interessiert zu hören, wenn jemand dies getan hat, bevor und wenn ja, wie, oder wenn es nicht möglich sein kann.

Dank.

InformationsquelleAutor Bryce Sandlund | 2013-10-28

css kendo-ui

Wenn der Inhalt des tooltip ist statisch, dann könnten Sie den Spalten.headerTemplate, um dann fügen Sie eine tooltip in die Kopfzeile.

Beispiel jsFiddle.

Code:

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
    },
        "Freight", {
        field: "OrderDate",
        title: "Order Date",
        width: 120,
        format: "{0:MM/dd/yyyy}",
        headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
    }]
});

$("#grid").kendoTooltip({
    filter: ".k-header span"
});

eine kleine Verbesserung: filter: ".k-header .k-link span" Ziele der header-Zelle genauer. Der in Antwort macht der filter popup nicht angezeigt, manchmal, weil der tooltip kommt dazwischen.

InformationsquelleAutor CodingWithSpike

Wenn Sie wollen, um zu definieren, tooltip auf jeden columnn-header, den Sie definieren können kendoTooltip auf der grid-thead-element wie diesem:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target;
        return $(target).text();
    }
});

Dieser zeigt einen hover-text, wenn Sie mit dem Kopf überall, nicht nur auf den text in der Kopfzeile. Der tooltip wird auch angezeigt, wenn die Spalte minimale Breite und der text der Kopfzeile nicht vorgestellt/gezeigt, in voller Länge oder gar nicht angezeigt. Sehen Beispiel.

Hier ist der komplette code aus dem Beispiel jsbin.com im Fall muss man es reproduziert in der Zukunft:

HTML:*

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id="grid"></div>  
</body>
</html>

JavaScript:

var grid = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true
    },
    height: 430,

    columns: [{
            field: "OrderID",
            width: 250
        }, {
            field: "ShipName",
            title: "Ship Name",
            width: 200

        }
    ]
}).data("kendoGrid");

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target; //element for which the tooltip is shown
        return $(target).text();
    }
});

Links können hilfreich sein, zusätzliche Informationen, aber link-nur die Antworten sind stark entmutigt. Bitte fügen Sie eine Zusammenfassung von verknüpften Daten, die relevant für die Frage, und erklären, wie er das Problem behebt.
Ich habe meine Antwort aktualisiert
Besser, aber man sollte immer den vollständigen code benötigt, um zu reproduzieren Beispiele von Websites wie jsbin und jsfiddle, im Falle dass der link rot ist. Definitiv die post zu den bedeutenden Teil in einem eigenen block, als Sie haben; dann fügen Sie den rest des Codes für die Referenz unten. Ich habe es für Sie. Und +1 da haben Sie schon gezeigt, dass dies funktioniert.

InformationsquelleAutor mparulski

0

Für jeden, der versucht, dies zu tun mit Kendo UI MVC kann erreicht werden, indem die folgende Logik:

Auf dem Gitter DataBound - Ereignis erstellen Sie eine JavaScript - Funktion zur Verarbeitung der Datenbindung.

Innerhalb JavaScript Funktion fügen Sie den folgenden code (für mein Beispiel habe ich namens meiner Funktion createToolTip()
```
function createToolTip() {

    $("tr > th").kendoTooltip({
        position: "top"
    });
}
```
Dadurch wird eine QuickInfo angezeigt, die auf die raster-Kopfzeile mit der position der Werkzeugspitze über dem header.

InformationsquelleAutor slee423

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.