Adding Hovertext on KendoUI Grid Column Headers
If you want to define tooltip on every columnn header, you can define kendoTooltip on grid thead element like this:
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
This shows hover text when you hover the header anywhere, not only on text in the header. The tooltip is shown even when the column has minimal width and the text of the header is not presented/shown in its full length or isn't shown at all. See example.
Here's the complete code from the example at jsbin.com, in case it needs to be reproduced in the future:
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();
}
});
For anyone attempting to do this with Kendo UI MVC it can be achieved by using the following logic:
On the grids DataBound event create a JavaScript function to handle the databound.
Within that JavaScript function add the following code (for my example I've named my function createToolTip()
function createToolTip() {
$("tr > th").kendoTooltip({
position: "top"
});
}
This will create a tool tip to display on the grids header with the position of the tool tip above the header.
If the contents of the tooltip is static, then you could use the columns.headerTemplate to then add a tooltip to the header.
Example jsFiddle.
The 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"
});