Menu
I'm trying to add custom hovertext (like a tooltip), to the column headers in a KendoUI grid. The text should be specific to each column and ideally not displayed on anything but the header row. There isn't a tooltip option for the Grid object but I'm not sure if there might be a way to do it either using CSS or their row template configuration.
Would be interested in hearing if anyone has done this before and if so how, or if it may not be possible.
Thanks.
736
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.
Use the Tooltip template to display the content of its anchor elements. Wrap the Grid component inside the kendoTooltip directive. Set showOn to none and handle the mouseover event to show the Tooltip in specific conditions. Use the toggle and hide methods to change the visibility of the Tooltip programmatically.
Returns the data item to which the specified table row is bound. The data item is a Kendo UI Model instance. When using the Grid's MVC wrapper, the Grid must be Ajax-bound for the dataItem() method to work.
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"
});
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.
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.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
