Using Tooltip in an MVC UI Grid

2 posts, 0 answers
  1. Anthony
    Anthony avatar
    19 posts
    Member since:
    Feb 2008

    Posted 02 Feb Link to this post

     

    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.

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3809 posts

    Posted 03 Feb Link to this post

    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.
Back to Top