Showing a Tooltip for Column Records
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I show a Tooltip for the Telerik UI Grid for ASP.NET MVC?
Solution
- Initialize the Tooltip for the Grid.
@(Html.Kendo().Tooltip()
.For("#grid")
.Position(TooltipPosition.Right)
.Width(250)
)
- Specify a selector for elements, which the Tooltip will display within the grid, through the
Filterconfiguration method.
.Filter("td:nth-child(3), th:nth-child(3)")
- Provide a content handler for the Tooltip by using the
ContentHandlerconfiguration method.
.ContentHandler("contentHandler")
function contentHandler(e) {
// If the element is the header, return the text of the cell.
if (e.target.is("th")) {
return e.target.text();
}
var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
var content = dataItem.QuantityPerUnit;
return content;
}
For more information on how to implement the suggested approach, refer to the following Telerik REPL example.