Using Tooltip in an MVC UI Grid

1 Answer 1185 Views
ToolTip
Anthony
Top achievements
Rank 1
Anthony asked on 02 Feb 2017, 03:25 PM

 

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.

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 03 Feb 2017, 02:58 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Jesse
Top achievements
Rank 1
commented on 05 Feb 2018, 07:56 PM

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
Telerik team
commented on 07 Feb 2018, 12:59 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ToolTip
Asked by
Anthony
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or