New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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 Filter configuration method.
    .Filter("td:nth-child(3), th:nth-child(3)")
  • Provide a content handler for the Tooltip by using the ContentHandler configuration 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.

More ASP.NET MVC Grid Resources

See Also

In this article