Wenn Sie Tooltip auf jedem columnn Header definieren möchten, können Sie kendoTooltip auf Raster Thead Element wie folgt definieren:
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
Dies zeigt Hover Text, wenn Sie schweben den Header überall, nicht nur auf Text in der Kopfzeile. Der Tooltip wird auch dann angezeigt, wenn die Spalte eine minimale Breite hat und der Text des Headers nicht in voller Länge angezeigt wird oder überhaupt nicht angezeigt wird. Siehe example.
Hier ist der komplette Code aus dem Beispiel bei jsbin.com, falls es muss in der Zukunft wiedergegeben werden:
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();
}
});
eine kleine Verbesserung: Filter: ". K-Header. K-Link-Bereich" zielt auf die Header-Zelle genauer. Die Antwort in der Antwort macht das Filter-Popup manchmal nicht sichtbar, weil der Tooltip dazwischen kommt. – yogi