Dynamic Tooltip with links in particular Grid column

5 posts, 0 answers
  1. Nirav
    Nirav avatar
    17 posts
    Member since:
    Mar 2013

    Posted 15 Apr 2013 Link to this post

    Hi,

    I want to display customised tooltip on hover in one of the column in grid.
    My requirement is:
    I have Person's grid where I am displaying first name, last name, birth date details. There is an another column say "Go To". When user mousehover on that particular column's cells, I want to display tooltip template. In which there will be few links (addresses, emails, phones etc.) with person id.
    Based on the person's Id the link in tooltip should be constructed, So clicking on it navigates to person details.

    How to do this? I have searched on net but couldn't find exact or nearer example.
    Need help.

    Thanks,
    Nirav
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 17 Apr 2013 Link to this post

    Hi Nirav,

     
    Basically you can achieve the desired behavior using the Tooltip show event to get the current row underlying dataItem using Grid API. Then you can pass the dataItem to given template and load the generated template into the Tooltip content. Please check the example below:

    <script type="text/javascript">
        $(function () {
            var template = kendo.template($("#toolTipTemplate").html());
            //initialize tooltip to grid tbody with filter cells with given CSS class
             tooltip = $("#grid tbody").kendoTooltip({
                 filter: "td.myClass",
                 width: 120,
                 show: function (e) {
                    //get current target row
                    var currentRow = this.target().closest("tr");
                    var grid = $("#grid").data("kendoGrid");
                    //get current row dataItem
                    var dataItem = grid.dataItem(currentRow);
     
                    //pass the dataItem to the template
                    var generatedTemplate = template(dataItem);
                    //set the generated template to the content of the tooltip
                    this.content.html(generatedTemplate);
                },
            }).data("kendoTooltip");
        })
    </script>
     
    <script id="toolTipTemplate" type="text/x-kendo-template">
        <span>Units currently in stock: #=UnitsInStock#</span>
    </script>


    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 16 Oct 2015 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

     I know this is pretty old, but could you post an example project of this functionality?

     Thanks,

    Blake

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 19 Oct 2015 Link to this post

    Hello Blake,

    Please check the example below:


    Regards,
    Vladimir Iliev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Blake
    Blake avatar
    18 posts
    Member since:
    Sep 2015

    Posted 19 Oct 2015 Link to this post

    Thank you Vladimir. This was great.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready