Using Tooltip in an MVC UI Grid

[Anthony]

 

I would like to display data in a popup window or tooltip when users hover over or click on a cell in the Telerik grid. I tried using the Telerik tooltip, however the tooltip doesn't display at all. I also tried the jquery and bootstrap tooltips, but they do not work as well. When I use the tooltips for an element outside of the grid, they work fine. Does anyone have a razor example for using the Telerik tooltip in a grid?  Also, are there other ways to approach this? Essentially, I want to display a small popup window with a table of additional information related to one specific cell in each row of the table.

[Marin Bratanov]

Hi Anthony,

You can start from the following article that shows the general approach: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/grid-with-kendo-ui-tooltip. You can tweak the tooltip selector, events and other properties as you see fit.

For example, you can have templates in the cell to use a simpler class selector. Below is one example based on the article above and the InlineEditing demo of the grid.

Another option is to have a custom command button that will open a popup: http://demos.telerik.com/aspnet-mvc/grid/custom-command.

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).ClientTemplate("<div class=\"forTooltips\">#=ProductName#</div>").HtmlAttributes(new { @class = "overridePadding" });
        columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);
        columns.Bound(p => p.LastSupply);
        columns.Bound(p => p.UnitPrice).Width(120);
        columns.Bound(p => p.UnitsInStock).Width(120);
        columns.Bound(p => p.Discontinued).Width(120);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Model(model =>
        {
            model.Id(p => p.ProductID);
        })
        .Create(update => update.Action("EditingInline_Create", "Grid"))
        .Read(read => read.Action("EditingInline_Read", "Grid"))
        .Update(update => update.Action("EditingInline_Update", "Grid"))
        .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
    )
)

@(Html.Kendo().Tooltip()
      .For("#grid")
      .Filter(".forTooltips")
      .ContentHandler("getRatingTooltip")
      .Position(TooltipPosition.Right)
      .AutoHide(false)
)

<style>
       /*the grid cells have some padding,
        so if you do not like this behavior you would probably have to fall back to n-th child selectors to get the cells
        or remove the padding form the cells by overriding the built-in CSS
       */
    .forTooltips {
        width: 100%;
        height: 100%;
        padding: .929em 1.286em;
    }

    td.overridePadding {
        padding: 0;
    }
</style>
<script>
    function getRatingTooltip(e) {
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.UnitPrice;
        return content;
    }
</script>

Regards,

Marin Bratanov
Telerik by Progress

[Jesse]

I would like to use the overload for LoadContentFrom that lets you pass in query parameters. I can get it to work with a request start event where I find the id I need with javascript and set e.options.data to an object with that value, but I shouldn't have to rely on that since this overload exists. 

How can I reference gridRow dataItem properties? I've tried "#=someID#", "\\#=someID\\#", etc.
The docs give an example for passing in an id with a static value which seems like something very few, if any, situations would call for when getting a tooltip with an id parameter. 

 

@(Html.Kendo()
    .Grid<SomeModel>()
    .Name("someGrid")
    .Columns(col =>
    {
        col.Bound(c => c.somePKID).Title("SomeLabel")
            .ClientTemplate($"<a href='someURL' class='for-tooltip'>#=SomeLabel#</a>");
    })
    ...

@(Html.Kendo()
    .Tooltip()
    .For("#someGrid")
    .Filter(".for-tooltip")
    .LoadContentFrom("GetTooltip", "Tooltip", new { someID = "#=someID#" }) // this will not work
    ...

[Veselin Tsvetanov]

Hi Jesse,

I am afraid, that passing the ID of the hovered item / row directly as a member of the LoadContentFrom() method would not be possible. That is because the route values for that call will be evaluated on the server, before the Tooltip is actually initialized on the client. Having that said, the proper way to pass that additional parameter would be to use the requestStart event and the options.data object.

Regards,
Veselin Tsvetanov
Progress Telerik

[Meddah]

Is there an example of using tooltip for asp.net core?

[Anton Mironov]

Hi Meddah,

In order to use ToolTip for a Telerik UI Grid in ASP.NET Core, I would recommend using the approach from the following article:

• https://docs.telerik.com/aspnet-core/knowledge-base/grid-with-kendo-ui-tooltip
  

Kind Regards,
Anton Mironov